概要

ブラウザ見ていたりするとやはり気になりますよね、画面のデザイン
作ってみたくなりますよね、Webの画面

ということで全くのフロント初心者(javascriptもしっかりと通っていない)ですが、React使って環境構築と画面を作ってみたいと思います

React環境構築

まずは環境構築です
ローカルの環境はMacBook Air(M1, 2020)です、そろそろ新しいものに買い替えたいところです

npmの公式ページよりnode.jsをインストールします
初めからLTSが選択されているので特に変更することなくコマンドやインストーラーでダウンロードしましょう

念の為、正常にインストールされたか確認します
以下のそれぞれのコマンドが実行できてバージョン情報が表示されれば問題なくインストールは完了しています

node --version

npm --version

続いて、Reactのインストールを行います
Reactインストール用のプロジェクト作成については「download_window」とします

npx create-react-app download_window
# 「Ok to proceed? (y)」途中で右記のようなメッセージが出ますがy+Enterで問題ありません

本来はここでスムーズにReactのインストールは完了するはずなのですが、自分の環境では以下のエラーが出てしまっていました

プロジェクト自体は作成完了しているので今回は一旦触れず、解決を探して後ほど追記できればと思います

エラー内容

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: download_window@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:

プロジェクトの作成が完了したので、作成されたプロジェクトは以下に移動してReactを起動します

cd path/to/download_window

# Reactの起動
npm start

無事に起動されましたかね？
僕の環境は謎にエラーが発生しました

パッとみた感じだと、「./src/reportWebVitals.js」で使おうとしている「web-vitals」パッケージが見つからないということらしいです

そこで、コードの内容、エラーの内容で色々調べたところ「web-vitals」をnpm installすると良いみたいでした

npm install web-vitals

そして再度Reactを起動してみると、無事に起動が確認できました
ようやくこれでスタートラインにたてました

何か画面を作ってみる

ここからが試してみたいものの本題になります
とはいってもダウンロードの画面を作るというのは、フロント初心者にはハードルが高いので簡単な修正を加えてどのように開発を進めていけば良いかの雰囲気をつかめればと思います

といってもあとはjsが書けるか、実現したいものに必要なパッケージは何かを調べて使えるようにするという流れだと思います

今回は簡単にボタンを押下すると擬似的にダウンロードをしているように見せる画面を作ってみます
ボタンを押下するとプログレスバーが進行して、時間経過で100%と表示されるようにしてみます

まずは画面上の表示処理の部分になります
returnの手前までが擬似的にプログレスバーを進行している部分となります
useStateでstate変数を利用できるようにします
for文で10ずつ値を増加させています

buttonのクリックイベントの部分で擬似ダウンロード関数の処理を呼び出し、for文の処理が回ってprogress変数の値が変化してプロげレスバーが進んでいるように見えるという算段です

App.js

import React, { useState } from "react";
import './App.css';

function App() {
  const [progress, setProgress] = useState(0);

  const startDownload = () => {
    let count = 0;
    const interval = setInterval(() => {
      count += 10;
      setProgress(count);
      if (count >= 100) clearInterval(interval);
    }, 500);
  };

  return (
    <div className="App">
      <h1>ダウンロード画面</h1>
      <div
        style={{
          width: "300px",
          height: "30px",
          backgroundColor: "#ddd",
          margin: "20px auto",
          borderRadius: "5px",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            width: `${progress}%`,
            height: "100%",
            backgroundColor: "blue",
            transition: "width 0.5s",
          }}
        />
      </div>
      <button onClick={startDownload} disabled={progress > 0 && progress < 100}>
        {progress === 0 ? "ダウンロード開始" : progress === 100 ? "完了！" : "ダウンロード中..."}
      </button>
    </div>
  );
}

export default App;

つぎにCSSの部分です
今回は特に工夫なくといった形ですね、そのまま上のjsファイル内にstyleで記載しても良かったかもしれません

App.css

.App {
  text-align: center;
  padding: "50px";
}

ということで作成が完了したあとnpm startしますと、以下のような画面が表示されます

ダウンロード開始というボタンを押すとプログレスバーが進んで、100%まで行くと完了と表示されます

おわりに

いかがでしたでしょうか？
環境構築してから実際に動きのある画面を作成するまでさほど時間がかかりませんでしたね
今回はパッケージを用いずにとりあえず画面を作ってみるということをしましたが、調べてみると「React Loader Spinner」などがあるみたいです

色々と調べてより自分の作ってみたいと思えるものを実現化していければと思います

おすすめだからこれ使ってみてくれ！というものがありましたら、どんどんお願いいたします

試させていただきますmm