ReaSemi(Vol.7)【React Routerについて！】

こちらの記事は、プログラミング初学者がReact Routerについて学んだことをアウトプットのためにまとめた記事です。

こんな方向け

• React学びたて
• Reactでルーティングの方法が知りたい
• React Router初心者

React Routerとは？

React Routerは、Reactアプリで複数のページやビューを管理するためのライブラリです。これを用いることで、シングルページアプリケーション（SPA）の中でも複数のルートを実装できます。
例：ゲームのメニュー画面からスタート画面に移動するのと同じ！
覚え方：「部屋を移動するためのドア」と考えよう！

1. シングルページアプリケーション(SPA)の仕組み

SPA（シングルページアプリケーション）は、名前の通り、「1つのページ」でアプリを動かす仕組みです。でも、実際にはいろんなページに行けるみたいに見えます。その秘密は、React Routerのようなルーティングシステムにあります。

SPAの仕組み：

• 最初に1つのHTMLファイル（通常はindex.html）をブラウザにロードします。
• ページが切り替わるときに、新しいHTMLファイルをロードするのではなく、必要な部分だけをJavaScriptで動的に切り替えます。
• React Routerは、URLの変更に応じて、ページの一部（コンポーネント）を表示させます。つまり、見た目はページが変わっているけど、実際には全ページが再読み込みされているわけではないんです。

SPAの特徴：

• リロードが不要： ページ間の移動で画面全体の再読み込みが発生しないため、スムーズなユーザー体験ができます。
• 高速なパフォーマンス： 必要な部分だけを更新するので、アプリ全体が速く動きます。
• 状態を維持できる： ページ間の移動でもアプリの状態（フォームの入力内容など）が維持されやすいです。

2. 伝統的なマルチページアプリケーション(MPA)の仕組み

• MPA（マルチページアプリケーション）は、従来のウェブアプリケーションの作り方です。例えば、昔からあるニュースサイトやブログはほとんどがMPAです。

MPAの仕組み：

• ページごとに個別のHTMLファイルを用意し、リンクをクリックするたびに新しいページをサーバーから取得してブラウザに表示します。
• 各ページを表示するたびに、ブラウザはサーバーにリクエストを送って、新しいHTMLファイルを受け取ってからページ全体を再読み込みします。

MPAの特徴：

• ページごとに完全にリロードされる： クリックするたびに画面がフラッシュしてリロードが発生します。
• サーバーの負担が大きい： ページが多いほど、サーバーからたくさんのリクエストが発生し、通信も多くなります。
• SEO（検索エンジン最適化）には強い： 各ページが個別に存在するので、SEO対策がしやすいと言われています。

3. SPAとMPAの違い

特徴	SPA（シングルページ）	MPA（マルチページ）
ページ構成	1つのHTMLファイルで動的に表示	ページごとに個別のHTMLファイルが存在
リロード	ページ遷移時にリロードなしで表示がスムーズ	ページ遷移のたびにブラウザが再読み込み
パフォーマンス	クライアント側で処理が行われ、速い	サーバーから毎回リソースを取得するため、やや遅い
開発の複雑さ	状態管理が必要で、やや複雑になることがある	ページごとに独立しているためシンプル
SEO対策	対策が難しいこともあるが改善手法もある	各ページにSEOを適用しやすい

4.まとめ

• SPAは1つのページの中で動的に画面が切り替わる仕組み。React Routerを使ってリロードなしでスムーズにページを移動できます。
• MPAはリンクをクリックするたびに新しいHTMLページがロードされ、全体がリロードされます。

React Routerは、SPAでのスムーズなページ遷移を実現する強力なツールなんです！

React Routerのメリット、デメリット

メリット：

• ページの再読み込みなしで移動できる
  普通はページを移動するときに画面全体がリロードされちゃいますが、React Routerを使うとリロードなしでスムーズに画面が変わるんです！

• URLでページの状態を表せる
  例えば、URLに/aboutとか書けば、「Aboutページを見てるんだな〜」ってReactがわかるんです。

デメリット：

• 最初の設定がちょっと面倒
  React Routerを使うためには、最初に少しコードを書いて設定しないといけません。でも安心してください！一度設定しちゃえば、あとは超簡単です！

• 大きなアプリでは複雑になることも
  もしページがたくさんあったら、ちょっと管理が難しくなるかも。でも、基本を押さえれば大丈夫ですよ！

もしページがたくさんあったら、ちょっと管理が難しくなるかも。でも、基本を押さえれば大丈夫ですよ！

---

• クライアントサイドルーティングの仕組み
• URLとコンポーネントの対応付け
• ルートごとの表示内容の切り替えの簡便さ

React Routerを使うと、ページ遷移が驚くほど簡単で効率的になる仕組みを作れます。その秘密を一つずつ解説します。

---

1. クライアントサイドルーティングの仕組み

クライアントサイドルーティングって何？

通常、ウェブサイトでリンクをクリックすると、サーバーにリクエストを送って新しいページが返ってきます。これがサーバーサイドルーティングです。
一方で、クライアントサイドルーティングでは、ページの遷移や表示の切り替えをサーバーではなく、ブラウザ（クライアント）側で行います。

React Routerの場合：

• ページ遷移はすべてブラウザ内で行うため、サーバーに新しいページをリクエストする必要がありません。
• URLは変わるけどページ全体はリロードされないので、ユーザーにとってはとてもスムーズな体験になります。

例えば、URLが/aboutに変わったとしても、ページ全体のリロードは起きず、画面の一部だけが切り替わります。これがReact Routerを使う最大のメリットの一つです。

2. URLとコンポーネントの対応付け

URLとページをリンクさせる仕組み

React Routerでは、URLとコンポーネント（ページ内容）を簡単に対応付けることができます。具体的には、Routeというコンポーネントを使って、どのURLにどのページ（コンポーネント）を表示するかを設定します。

例：URLに応じたページ表示

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

このように、path="/"でHomeコンポーネント、path="/about"でAboutコンポーネントを表示します。これにより、ブラウザのURLが/aboutになると、自動的にAboutページが表示される仕組みです。

ポイント：

• URLと表示するコンポーネントを簡単に対応付けられるので、ルーティングが非常にシンプル。
• 追加や修正も柔軟にでき、複雑なページ構成もスムーズに管理できます。

3. ルートごとの表示内容の切り替えの簡便さ

表示内容の切り替えが簡単にできる

React Routerを使うと、複数のページの表示を簡単に切り替えることができます。通常なら、ページをリロードするための複雑なコードが必要ですが、React Routerなら数行のコードでルート（ページ）ごとの表示切り替えが可能です。

例：ページごとの切り替え

function App() {
  return (
    <div>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

このコードでは、<Link>を使ってページ間を移動でき、ルートごとに表示内容が切り替わります。

React Routerが勝手にいい感じにページを変えてくれるので、開発者は複雑なことを気にせず、使いやすいウェブアプリを作ることができます。

ポイント：

• クリック一つでページが切り替わる。ページ全体がリロードされないので、動作が速くてストレスがありません。
• Routeごとに表示内容を自由に変更できるため、簡単に複数のページを実装できます。

4.まとめ

• クライアントサイドルーティングにより、ページ遷移が高速でスムーズに。
• URLとコンポーネントの対応付けが簡単で、コードの可読性も高く維持できる。
• ルートごとの表示切り替えがシンプルに実現でき、複数ページの管理が楽に。

React Routerを使えば、ユーザーに快適な体験を提供しつつ、開発者もストレスなくウェブアプリを作ることができます！

Viteを使った環境構築 & React Router デモンストレーション手順

1. Viteでプロジェクトを作る

最初にViteでReactアプリを作ります。

Viteについては初めての方は、こちらをご覧ください🐣
https://zenn.dev/reasemi/articles/6869cebde469aa

VSCodeでデモアプリを作成するのにどこか好きな場所を開いてください。
そしてターミナルを起動させます。(「ctrl + @」でも起動します。)

npm create vite@latest

• Project nameを聞かれるので、vite-projectのままでよければそのままEnterをします。
• フレームワークは、Reactを選びました。
• variantは、JavaScriptを選びました。

cd vite-project

npm install

これで準備はバッチリ！

2. React Routerをインストール

次に、React Routerをインストールします。

npm install react-router-dom

これでルーティングの準備完了！

※package.jsonの"dependencies"に、

  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1"
  },

このように表記されているか確認をしてみてください😊

3. 基本の構造を作る

次に、ReactアプリのメインコンポーネントであるApp.jsxにルーティングを設定します。React Routerが提供するRoutes、Route、Link、BrowserRouterをインポートし、ルーティングを実装していきます。

App.jsxのコード解説

import { Routes, Route, Link, BrowserRouter } from "react-router-dom";
//Routes、Route、Link、BrowserRouterをインポートし、ルーティング
import Home from "./pages/Home"; // ホームページのコンポーネント
import About from "./pages/About"; // Aboutページのコンポーネント

function App() {
  return (
    <BrowserRouter>
    {/* BrowserRouterで囲みます */}
      <div>
        <h1>React Router Vite デモ</h1>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* ルーティングの設定 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

ページコンポーネントの作成

次に、HomeとAboutという2つのコンポーネント（ページ）を作成します。

Home.jsx

src/pages/Home.jsxを作成し、以下のようにホームページのコンポーネントを書きます。

cd src

mkdir pages

macの方

touch pages/Home.jsx

Windowsの方

ni pages/Home.jsx

Homeページのコンポーネントに書きます。

function Home() {
  return (
    <div>
      <h2>ホームページ</h2>
      <p>ここはホームページです！</p>
    </div>
  );
}

export default Home;

About.jsx

次に、src/pages/About.jsxを作成し、Aboutページのコンポーネントを書きます。

macの方

touch pages/About.jsx

Windowsの方

ni pages/About.jsx

Aboutページのコンポーネントに書きます。

function About() {
  return (
    <div>
      <h2>Aboutページ</h2>
      <p>このページではReact Routerの説明をしています。</p>
    </div>
  );
}

export default About;

ルーティングの解説

• <Link to="/">ホーム</Link>
  この部分は、リンクを作成して、ユーザーがクリックしたときに指定されたURL（"/"）に移動するためのものです。この例では、ホームページに移動します。

• <Route path="/" element={<Home />} />
  この部分は、URLが"/"（ホームページ）にアクセスされたときにHomeコンポーネントを表示するという意味です。

• <Route path="/about" element={<About />} />
  こちらは、URLが"/about"のときにAboutコンポーネントを表示するためのルート設定です。

動作確認

ここまで設定したら、npm run devで開発サーバーを起動し、ブラウザで確認してみましょう。

npm run dev

• アプリを開いたら、ホームとAboutのリンクが表示されているはずです。
• ホームをクリックするとHomeコンポーネントが表示され、AboutをクリックするとAboutコンポーネントに切り替わります。

これで、React Routerを使ってページの移動ができることが確認できます！

※最後に「ctrl + c」で終了することをお忘れなく！

---

4. まとめ

今回はReact Routerを使って、ページをスムーズに移動する方法を学びました！どうでしたか？みんな、もうプロ級ですね！

• React Routerでウェブアプリがもっと便利に！
  リロードなしでページを切り替えることができるのは、本当に便利！スムーズに動くアプリが作れます。

• Viteを使えばスピードも速い！
  開発のスピードが速くなるので、時間も節約できちゃいます。

5. もっと学びたい方

公式ドキュメントはこちらです。
https://reactrouter.com/en/main

こちらで丁寧な手順で解説されているので参考になります。
https://reffect.co.jp/react/react-router-6

React Router v6.4から新たなルーティングの設定方法であるData APIsが登場したとのことです。

それはまた今度のお話で…

最後に

実は、りあゼミ開催前日にテーマ募集をして存在を初めて知ったReact Router。
ちょうど授業でNode.jsのルーティングを学んだばかりだったのでとてもタイムリーだ！と思い、記事にまとめてみなさんに共有をさせてもらいました。
一夜漬け状態でゼミに臨み、そして遅刻申し訳ございませんでした…🙇🏻‍♀️
直前に自分で試してみたときはエラーで進まなかったのですが、ゼミでアドバイスをもらったおかげで自分の知識の甘い部分を再確認できて、なんとかクリアすることができました✨
途中話しながら何を言っているのかわからなくなってしまってお聞き苦しいところもあったかと思います…
しかし説明をしながら整理することができたので、自分が一番の勉強になったと思います！
みなさまありがとうございました🥲

引き続きテーマ募集してます！
お次の立候補も募集してます！！笑