１課の技術書　Reactでのネストページ編

こんにちは。mituです。

10月になり暦上では秋になりましたが、暑さがまだ続いていますね。
暑さが収まったら紅葉等見に行くのも良いかもしれませんね。

さて、前回のブログではreactを使用して画面遷移できるようなページを作成しました!
今回は前回作成したページからネストしたページを作成してみようと思います!
前回に引き続き、codesoundboxを用いて説明していきます。

▼ ネストとは？

実際にページを作成していく前にネストとはどんなものなのかについて、説明していきます!

ネストとは入れ子構造のことで、親ルートの下に子ルートがあり、階層構造になっているページのことを指します。
イメージしやすいように3つのページを模した画像を使って説明してみます。

① トップページ

トップページに都道府県リストのリンクがあるとします。
トップページのURLは『/』として話を進めます。
ちなみに『/』はルートディレクトリになります。

② 各県のリスト

トップページにある「都道府県リスト」というリンクをクリックすると以下②の画像のように各県のリストが表示されます。
ここのページを表すパスを『prefecture』とした時、
トップページのURLは『/』のため、このページのURLは『/prefecture』となります。
ちなみに「prefecture」を和訳すると県という意味になります。

③ ②でクリックした県の有名な食べ物をテキストとして表示するページ

②の画像の中では県のリストが３つありますが、一つ抜粋して愛知県を例に見ていきます。
上記画像内にある愛知県のリストをクリックすると、以下の画像のようにテキストが表示されるイメージです。
下記画像のテキストは②の「愛知県」というリンクをクリックしたときに表示されるページを想定しています。
ここのページを表すパスを『Aichi』としたとき、各県のリストのURLは『/prefecture』のため、このページのURLは『/prefecture/Aichi』となります。

ネストしたページについてイメージいただけたでしょうか。
では、実装した画面を使って説明していくので、URLの部分にも注目してみてください!
尚、今回は画面の挙動について焦点を当てているので、レイアウトは整えておりません。

▼ 今回のディレクトリ構造

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

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

▼ ネストページの作成

次に説明していく手順で一緒に作成される方は前回のブログで行った画面遷移のページを作成してから進んでいただくと実装がスムーズになるかと思います。

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

今回は下記②、③の部分をそれぞれリストの個数分作成していきます!
説明としては下記画像にあるトランペットの画像が表示される箇所と楽器リストの中にあるトランペットという文字をリンク化するところを行おうと思います。
残り4つのリストは同じように画像とリンクが表示されるか試してみてください!

① トップページ

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

③ 各楽器(例えば、トランペット)のリンクをクリックした後の画面

1. “金管楽器リスト”をクリックし表示された各楽器リストをリンク化

List.jsx

各楽器リストのリンクをクリックした際にURL欄で表示されるURLを設定しています。
前回のブログで<Link>について触れたためざっとお伝えすると、<Link>の部分はHTMLだと<a>タグの部分に該当します。

①でreact-routerからインポートしている「Outlet」はネストするページを作成するときに使うものになります。
「Outlet」は子ルートの内容を表示するために、親ルートに書いておく必要があります。
今回各楽器リストをクリックして、それぞれの楽器のページを表示したいので、親ページである各楽器のリスト一覧ページに記載しました。

Routing.jsx

ここのファイルでは、URLが一致した際にどのコンポーネントを表示するかをルーティング設定として定義しています。

今回は “金管楽器リスト”をクリックした後の画面で表示されている楽器リストを親ルートとしたいので、<Route>の中の赤枠の部分でindexを記載しています。

①下記赤枠の形で親ルートにindexを付け、親ルートの中で子ルートを内包することにより、ネストしたページの画面遷移をすることができます。
２枚目の画像でURLを見てみると『/list/trumpet』というURLになっていて、
リスト一覧の配下にページがあることが確認できます。
②①の「TrumpetImg」コンポーネントを楽器リスト内にある「トランペット」のリンクをクリックしたときに画面に表示する設定を①でしていますが、「Routing.jsx」とは別の場所にあるので、②のようにimportして本ファイルで使えるようにしてあげます。

2. 各楽器それぞれのリンクをクリックしたときに画像を表示

Trumpet.jsx

楽器リストの中にあるそれぞれの楽器のリンクをクリックしたときに、画像が表示されるよう設定しています。(ここではトランペットを例に説明します。)

srcフォルダ配下のフォルダ内に画像を配置しているため、画像をimportして本ファイルで使えるようにします。
本筋とは話がそれますが、publicフォルダ内に画像を配置した場合は、書き方がまた変わるので、気になる人は調べて見てください!

①今回は、トランペットの画像を表示したいので、画像ファイルを参照できるようにする必要があります。
画像情報を格納しているのが、赤枠で囲われている「Trumpet」という変数(※2)になります。
画像を格納している場所を参照するのに<img>タグの中のsrc属性の中に設定します。
今回は変数として「Trumpet」を設定しているので、<img src={Trumpet}>のように設定していただければOKです!
(※2)変数とはデータを入れる箱のようなものを指します。

ネストされたページを作成する方法についてイメージつきましたでしょうか。
今回のブログを参考に是非作成してみていただけたら嬉しいです!
それでは、次回の技術書でまたお会いしましょう。

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