１課の技術書　Reactでの画面遷移編

こんにちは。mituです。

１回目のブログを公開したときは冬でしたが、
最近は暖かくなり夏が近づいてきたように感じます。

さて、前回のブログではreactを使用してアプリを作成できる環境を構築しました。
今回はアプリで複数の画面に移動する際に必要になってくる、画面遷移の機能を実装していきます!

画面遷移の機能は『react-router-dom』を使用して実装していきます。
尚、実際の動きが分かりやすいように説明ではcodesoundbox(※1)を使用します。
(※1) codesoundboxとは環境構築不要でブラウザ上のエディタにコードを記載し実行すると即座に実行結果が確認できるプラットフォームです。

『react-router-dom』の説明をする前にReactの仕組みについて簡潔に話していきます。
Reactでは「SPA」という仕組みを用いています。
「SPA」とはSingle Page Applicationの略称で、HTMLページは1つで
画面の書き換えはJavaScriptで行う仕組みのことです。

▼「 『react-router-dom』とは？ 」

『react-router-dom』とはreactのroutingライブラリのひとつです。
routingを和訳すると経路選択や経路制御という意味があります。
Webページ上で画面遷移して各ページを表示している際にURLを見てみると
ページごとにURLが異なることが分かるかと思います。
従来のWebページの画面遷移の仕組みでは、サーバからHTMLページをブラウザ側に返し、画面を再度リロードすることにより新しいページが表示されるようになっています。

『react-router-dom』を簡単に言うと一致するURLの際にコンポーネント(※2)を表示することにより、ページをリロードをすることなく画面遷移を実現することができるライブラリの1つです。
(※2) コンポーネントとは部品のことで、分かりやすいものを挙げると、ボタンやテキストボックスなどがあります。

▼「 注意点 」

以降で出てくる<BrowserRouter>、<Routes>、<Route>、<Link>は、各ファイルで
『react-router』からimportしているのですが、元々は序盤で説明した『react-router-dom』からimportしていました。
しかし、『react-router』のバージョン7が2024年11月22日にリリースされたことにより、『react-router』の中に『react-router-dom』が内包されるようになったためimport
するところが『react-router』に変わりました。

▼「 『react-router-dom』での画面遷移 」

アプリのディレクトリ構成については以下の形にしています。
背景色やテキストの文字、要素の配置位置などwebページの見た目に関するものを
設定する「css」ファイルもありますが、今回のブログでは省略します。

(※4) 今回は説明にcodesoundboxを使用している為アプリのディレクトリのトップがNODEBOXとなっていますが、自分でアプリのプロジェクトを作成した際はアプリの
プロジェクト名がディレクトリ構成のトップになります。

次に説明していく手順で一緒に作成される方は前回のブログで行った
環境構築後に『react-router』を事前にインストールしておいてください!
問題なくインストールできていれば「package.json」ファイル内の”dependencies”の中に『react-router』のインストールしたバージョンが下記のように表示されます。
“dependencies”: { “react-router”: “7.5.2”  }

では、各ファイルごとに主要な部分を確認しながら、実装した画面について
みていきましょう!
具体的には主に２点の処理を入れたページを作成していきます!
1. “金管楽器リスト”をクリックし、リストを記載したページを表示する
2. リストが記載されたページ内にある”戻る”をクリックした際に、
トップページに戻るように設定

今回は下記の2つのページを作成していきます!

1. トップページ

2. “金管楽器リスト”をクリックした後の画面

index.js
webページに実際に表示する画面を作成する際のエントリーポイント

①<Routing>コンポーネントがブラウザ上のHTMLのページに表示されるよう記述しました。
②<Routing>コンポーネントを<BrowserRouter>で包むことにより、ルーティング機能を使えるように設定しました。

App.jsx
トップページで表示されるもの

①今回は“Top“や“金管楽器リスト“をクリックした際に表示されるリンク（URL）を設定しました。
<Link>で設定したリンクと一致したときに表示するコンポーネントをルーティング設定で紐づけることにより画面遷移を実現できます。
<Link>の部分はHTMLだと<a>タグの部分に該当します。
また、ルーティング設定は次の「Routing.jsx」ファイルで実装していきます。

上記のタグを記載すると下記のページができます。

“金管楽器リスト“というリンクをクリックした際に、下記の画像のようにURLが変わって
いることが分かるかと思います。

Routing.jsx
一致したURLの際にどのコンポーネントを表示するかをルーティング設定として定義
している

①トップページにアクセスした際に、画面が表示されるよう<App>コンポーネントをimportしました。
尚、基本的に<App>コンポーネントは基本的に「index.js」でimportすることが多いかと
思いますが、今回はルーティング設定と処理の関係で本ファイルにimportしています。
②設定したパスに一致した際に指定したコンポーネントを表示するよう<Route>で
ルーティングの設定を行いました。
ちなみに<Routes>の中で<Route>を使用するルールがあります。
③”金管楽器リスト“というリンクをクリックした際に表示したい<List>コンポーネントが
別ファイルにあるためimportを行いました。

下記はトップページの画面で、”金管楽器リスト“をクリックする前の画面です。

下記は”金管楽器リスト“をクリック後に表示された画面になります。
次項で示す<List>コンポーネントの中身が表示されていることとURLが/から/listに代わっていることが下記の画像から確認できるかと思います。

List.jsx
「金管楽器リスト」というリンクをクリックした際に表示されるリストコンポーネント

・“金管楽器リスト“というリンクをクリックした際に表示されるコンポーネントとして、
リストを作成しました。
①トップページに戻るリンクを記述しました。
以下は「Routing.jsx」ファイルの画像内の②を参照
トップページに戻る際に表示するコンポーネントは「Routing.jsx」のところに
<Route path=”/” element={<App />} />と記載されている通り<App>コンポーネントに
なります。

上記のようにリストの要素と”戻る”を押下時のリンクを設定すると下記の画面に
なります。

下記は「戻る」のリンクをクリック後に表示された画面になります。
<App>コンポーネントの中身が表示されていることとURLが/listから/に代わっていることが下記の画像から確認できるかと思います。

『react-router-dom』で画面遷移する方法についてイメージつきましたでしょうか。
次回は今回作成した楽器リストの中に新たにページを入れていく入れ子構造の画面遷移について作成していこうと思います。
それでは、次回の技術書でまたお会いしましょう。

最後まで読んでいただきありがとうございました。