これまで独学でReactを学んできた中で、「React Routerをいつ導入すべきか」迷っているうちにタイミングを逃してきました。
今回はReact Routerを導入するために、コードサンプルを作成してメリット・デメリットを整理しながら、使い方を学びます。
背景
現在私が開発しているアプリ「GymCal」では、以下のようにselectEventという状態変数で1~6の状態に対応して表示内容を切り替えています
- 1 → 床（fx）
- 2 → あん馬（ph）
- 3 → 吊り輪（sr）
- 4 → 跳馬（vt）
- 5 → 平行棒（pb）
- 6 → 鉄棒（hb）
useStateの特徴
useStateは小規模な状態管理において非常にシンプルで便利です。たとえば、一つのコンポーネント内でユーザーのアクションによってコンテンツを切り替えるだけなら、useStateで十分に対応できます。
const [selectEvent, setSelectEvent] = useState(1);useStateの強み
- 導入が簡単で、初心者でも扱いやすい。
- ページ遷移なしで、状態が瞬時に変わる。
- 小規模な状態管理には最適。
ただし、次のような要件が出てくると、useStateだけではコードが複雑になりがちです
1. 複数の状態を管理する必要がある
例：selectEventに加えて、入力フォームの状態やフィルター条件などを同時に管理する。
2. 画面遷移やURLごとに異なる表示が必要
例：selectEventごとのページに固有のURLが欲しい。
3. ページの再読込や直接アクセスに対応したい
例：ブラウザで/fxにアクセスして床のページが表示されるようにする。
このような状況では、useStateで全てを管理するのは次第に負担が大きくなります。
React Routerの導入
React Routerを導入すると、URLを状態として活用できるため、アプリケーションの拡張性が飛躍的に高まります。
- selectEventごとに固有のURL（/fx、/phなど）を持てる。
- ページの再読込や直接アクセスに対応できる。
- SEOにも対応でき、検索エンジンからの流入が見込める。
- ブラウザの「戻る」「進む」で状態遷移ができるようになる。
サンプルコード
「GymCal」を簡略化したサンプルコードで解説します。
useStateだけで管理する実装例
以下のコードでは、selectEventの状態をuseStateで管理し、イベントごとに表示内容を切り替えています。
メリット
- シンプルな状態管理で、初心者でもわかりやすい。
- ページ遷移なしで瞬時に表示が切り替わる。
デメリット
- URLが固定され、ユーザーが個別のイベントにブックマーク・共有できない。
- ブラウザの「戻る」「進む」が無効。
- SEOに対応できない。
React Routerを使った実装例
次に、React Routerを使い、URLパラメータで状態を管理する方法を紹介します。
メリット
- URLごとにイベントページを分けるため、ブックマーク・共有が可能。
- SEO対応が可能で、検索エンジンからの流入を期待できる。
- ブラウザの「戻る」「進む」で状態遷移ができる。
デメリット
- 実装が少し複雑になり、useNavigateやuseParamsの理解が必要。
- 状態管理がURLとuseStateの両方で必要。
まとめ
useStateだけでもシンプルなアプリケーションなら十分対応できますが、複数の状態を扱ったり、URL遷移が必要な場合にはReact Routerが有効です。React Routerを使うことで、URLと状態の一貫性を保ちながら、拡張性の高いアプリケーションを構築できます。
私もまだまだ学びの途中ですが、React Routerの導入によって、ユーザーにとって便利なUI/UXを提供できるようになると実感しています。今後も引き続き、Reactの実践的な技術を学んでいきます。
コメント