Zenn
🗂

Next.jsを学ぶにあたって、最低限必要だと思ったReact.jsの知識①

2024/12/15に公開
React
個人開発
プログラミング学習
独学
記事投稿コンテスト「今年の最も大きなチャレンジ」
tech

React.jsを選んだ背景

以前のWebサイトは、主にサーバーサイドでHTMLを生成し、画面を表示するだけの静的なものが多くありました。JavaやJSPはその典型例で、リクエストごとにサーバーがHTMLを返すため、ページ遷移が頻繁に発生し、画面がリロードされるたびに一瞬真っ白になることが一般的でした。

しかし、技術の進化とともにユーザーの期待が高まって、アプリケーションのように滑らかで動的なWeb体験が求められるようになります。

  • リッチなUI/UX：ボタンを押した瞬間に反応する、アニメーションや遷移が滑らかな画面。
  • 高速な操作：ページ全体をリロードせず、一部のデータやUIだけを変更できる。
  • モバイル対応：スマートフォンやタブレットの普及により、画面サイズに応じて柔軟にデザインが変わるレスポンシブ対応。

これらを満たすためにJavaScriptは進化していき、そのうちの一つとしてReact.js、Next.jsが挙げられます。Next.jsを理解するためには、React.jsの知識も必要でした。
そこで今回は、Next.jsを学ぶにあたって、最低限必要だと思ったReact.jsの知識について簡易に書き残しておこうと思います。
次のコードは、整理したい事を詰め込んだようなサンプルコードになります。

作成画面

今回作成する画面は、ローディング画面と3秒後に表示する画面です。2画面ありますが、2つのHTMLを用意するイメージではなく、ひとつのファイル（App.js）で完結する内容です。

最初の画面では「Loading...」と表示され、3秒後にローディングが完了します。
完了後の画面では「Hello, world!」のメッセージと、ページをリロードするためのボタンが表示されます。

コードは以下になります。

Boostrapの導入（CDN）

まず public/index.htmlで画面全体の基本的な設定を入れています。今回はCDNでBoostrapを導入しました。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
 rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"/>

ボタンコンポーネント作成（propsで値の受け渡し）

次に、src/components/Button.jsで汎用的なボタンコンポーネントを作成しています。
propsで「onClick：ボタンがクリックされた時の動作を設定する関数」、「text：ボタンに表示するテキスト」、「className：BootstrapやカスタムCSSクラスの設定」の3つの情報を呼び出しています。

const Button = ({ onClick, text, className }) => {
  return (
    <button onClick={onClick} className={className}>
      {text}
    </button>
  );
};

上記をメイン画面src/App.jsで呼び出して使っています。

import Button from "./components/Button";

// ページをリロードする関数
const handleReload = () => {
    window.location.reload(); // ページをリロード
};

～（中略）～
<Button onClick={handleReload} // クリック時にリロード関数を実行
        text="Reload Page" // ボタンに表示するテキスト
        className="btn btn-success" // Bootstrapのスタイル
/>

useStateを使った状態管理（ローディング）

次に、src/App.jsでポイントとなるuseStateを確認しましょう。
以下は、ローディング状態を管理するstateでローディング中の処理とローディング完了後で表示する内容を変えています。（3秒間ローディング画面が表示されて3秒後には「Hello, world!」が表示されます。useStateはこのように、画面上での更新がスムーズになりました。

const [isLoading, setIsLoading] = useState(true);
～（中略）～
  return (
    <div className="container text-center mt-5">
    {isLoading ? (
        <>
          ～（中略）～
            <span className="fs-5 text-secondary">Loading...</span>
          </div>
        </>
      ) : (
        <div>
          <h1 className="display-4 mb-4">Hello, world!</h1>{" "}
          ～（中略）～
        </div>
      )}
    </div>
    );
}

useEffectを利用して必要な時に処理を実行させる

src/App.jsでポイントの2つ目は、useEffectの使い方です。useEffectについては、どのサイトや書籍を見ても「副作用」と表現されることが多くてすぐに理解することができなかったのですが、今のわたしの理解としては、コンポーネントがレンダリングされたときに何か画面に動きを付けるための処理だと思っています。
第2引数に空の依存配列（[]）を渡すことで、コンポーネントが最初に表示されるときだけこの処理を実行することを意味します。もし空の配列に異なる変数を入れた場合、その変数が変わった場合連動してその処理が動くようになると思います。空配列も何の設定もしてない場合、無限ループでuseEffectが動いてあまりよくなかったイメージです…（きっと正しい使い方が有るんだと思います）一旦今回のサンプルコードにおいて実装してる箇所は以下になります。

  useEffect(() => {
    // 3秒後にローディングを終了
    const timer = setTimeout(() => {
      setIsLoading(false); // ローディングを終了する
    }, 3000);

    // クリーンアップ処理（タイマーの解除）
    return () => clearTimeout(timer);
  }, []);

上記の場合は、初回レンダリング時（画面初回表示時）にsetTimeoutやclearTimeoutが動作することになります。

いかがだったでしょうか。
自分自身の復習として書きましたが、誰かの理解の向上に少しでも繋がったなら幸いです。
React.jsとして最低限学びたいことのその①は以上になります。

Discussion