React Routerをはじめよう

なぜこの記事を書いたのか

React自体を触りはじめて、 「ページを増やすにはどうしたらいいの？」「URLごとに表示を変えたい」 という壁にぶつかった方も多いはず。私自身もそうでした。

React Router は昔からある定番のライブラリですが、最近のアップデートで使い方がずいぶんモダンになりました。
この記事では、私がつまずいたポイントや、「こうすれば楽に実装できる！」と感じた便利な機能を中心にまとめていますので、ぜひ参考にしてみてください。

最近のAIコーディングと学習のモチベーション

最近では、AIエージェントを活用したコーディングが主流になっているため、細かい仕様や文化を知らなくても誰もがスピーディにアプリを実装できる世界観に変わってきていますが、フレームワークの全体像や仕組みを知っている状態でコード生成に臨むのと、そうでないのとでは、生成物に対する姿勢が全く異なります。

例えばあなたがレストランのオーナーだとして、料理長がAIだと例えてみます。自分の全く知らない原材料・調理工程でAIがカレーをつくってくれたとします。美味しいうえに見た目も素晴らしいときていますが、中身は謎に包まれたままです。これをこのままお客さまに出せるでしょうか？AIコーディングでのアプリ作成も同じではないかと私は考えています。なぞのアプリをそのままお客さまに納品できるでしょうか、ということです。

料理の例えに戻ると、材料や基本的なレシピ、工程、完成品のイメージをAIに的確に指示し、AIは調理を爆速で仕上げてくれる。これなら安心して料理を提供できそうですよね。出来上がってきたものが想定外だった、あるいは、調理の途中で失敗したとしても、はじめに方針を与えたのはオーナーの自分ですから、失敗原因の把握と解決もスムーズになります。アプリ作成でいえば以下のイメージです。

材料＝言語（typescript, python, javaなど）
レシピ＝フレームワーク（Next.js, React router, djangoなど）
工程＝こなしていくタスク（設計〜コーディング〜テストなど）
完成品＝アプリ

アプリ作りでも材料・レシピ・工程の基本知識は押さえておき、「AIをつかう」という姿勢を持ちたい、と私は考えています。

React Routerとは

Reactアプリケーションに「いい感じのページ遷移」を追加してくれる定番ライブラリです。

ルーティングのお仕事

普通、Webサイトにはトップページや問い合わせページなど、いくつかのURLがありますよね。
URLに合わせて、表示する部品（コンポーネント）をパッと切り替えてくれるのが「ルーティング」の役割です。

導入するメリット

Reactはもともと「部品」を作るのが得意なライブラリですが、標準ではURLの切り替え機能を持っていません。
React Routerを使うと、ブラウザの「戻る・進む」ボタンがスムーズに使えるようになったり、複雑なURLの管理がとっても簡単になります。

ページ遷移が爆速になる仕組み (SPA)

React Router を使うと、いわゆる「SPA（シングルページアプリケーション）」という仕組みになります。

これまで：ページ全体を読み直す

リンクをクリックするたびに、画面が真っ白になって全体の読み込みを待つ必要がありました。

これから：必要なパーツだけ差し替える

React Router を使ったページ遷移では、 「今いる場所のデータやパーツだけ」 をサッと入れ替えます。
画面がカクカクせず、スマホアプリのようなヌルヌルとした操作感になるのが特徴です。

最近の進化 (Remixとの統合)

React Router は最近、人気のフレームワークである Remix と統合されるなど、大きな進化を遂げました。

「単なるリンクの切り替え」だけでなく、「データを読み込む（loader）」や「フォームを送信する（action）」といった面倒な処理も、ライブラリにお任せできるようになっています。

一見難しそうに聞こえるかもしれませんが、使いこなせればコードが劇的にスッキリします。
このシリーズでは、基本から実際に役立つ便利な機能までを、順番に紹介していきます！

更新履歴

2025-01-04 : AIエージェントコーディングと本件学習のモチベーションについて追加しました。