当記事では、Reactでの画面遷移時に値を受け渡す方法を詳しく紹介します。
SPAで画面遷移する方法はわかったけど、画面間で値を受け渡したい！！
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- URLパラメータで値を受け渡す方法
- クエリパラメータで値を受け渡す方法
画面遷移はアプリケーションのユーザビリティを高める重要な機能です。本記事ではReact Routerを使用した実装例を通じて、ルートパラメータとクエリパラメータの使い分けについてご紹介します。
Reactで画面遷移する入門知識は以下の記事を参照ください。画面遷移が必要な理由と画面遷移する方法を紹介しています。
URLパスの一部をパラメータを受け渡す二種類の方法
URLパスで値を受け渡すには、二種類の方法があります。ルートパラメータとクエリパラメータです。
それぞれについて記載していきます。
ルートパラメータ
固定長パラメータでの受け渡し
固定長パラメータとは「https://z-a-k-i/1332/A1000」のようなURLのパスの一部を値として受け渡す方法です。あらかじめどのパスをどのように扱うかを固定化しておき値を受け渡し方法です。パラメータ値をパスの一部として表現するため視認性にすぐれています。
以下の例では「1332」を組織ID、「A1000」を社員IDというふうに見立ててパラメータを受け渡す例です。
ルートパラメータを利用するには以下のようなコードを記載します。
const router = createBrowserRouter(
createRoutesFromElements(
// 「:」を付与することでURLの一部をプレースホルダ―化し、値を受け渡すことができる
<Route path="/:soshikiid/:userid/" element={<TopPage />} />
)
)// プレースホルダ―の部分に受け渡す値を埋め込む
<NavLink style={ isCurrent } end to="/1332/A1000">総務部A1000さんのページ</NavLink><br />
<NavLink style={ isCurrent } end to="/1332/A2000">総務部A2000さんのページ</NavLink><br />import {useParams} from 'react-router-dom';
export default function RouterTest(){
const params = useParams();
return <div>組織ID：{params.soshikiid} ユーザID：{params.userid}</div>
// ↑
// {params[soshikiid]}、{params[userid]}というふうに取得することも可能。
}可変長パラメータでの受け渡し
ルートパラメータには、上述のプレースホルダーを使って値を受け渡す方法のほか、受け渡す値を定義せず受け渡す方法があります。これを可変長パラメータと呼びます。可変長パラメータでは、「*」を設定することで残りのパス全てを受け渡すことができます。以下のように利用します。
const router = createBrowserRouter(
createRoutesFromElements(
// 「*」で以降のパス全てを受け渡す。
<Route path="/*" element={<TopPage />} />
)
)// プレースホルダ―の部分に受け渡す値を埋め込む
<NavLink style={ isCurrent } end to="/1332/A1000">総務部A1000さんのページ</NavLink><br />import {useParams} from 'react-router-dom';
export default function RouterTest(){
const params = useParams();
return <div>受け取った情報は{params[*]} です。</div>
}クエリパラメータ（クエリ情報での値の取得）
クエリパラメータは、クエリ情報を介して値を受け渡しする方法です。
ルートパラメータとは異なり、「:userid」などのプレースホルダーは設定せず、「?」以降の情報で受け渡された情報の名前を取得します。コードは以下のように記述します。
const router = createBrowserRouter(
createRoutesFromElements(
// 「*」で以降のパス全てを受け渡す。
<Route path="/testpage/*" element={<TopPage />} />
)
)// プレースホルダ―の部分に受け渡す値を埋め込む
<NavLink style={ isCurrent } end to="/testpage?sohikiid=1332&userid=A1000">総務部A1000さんのページ</NavLink><br />import {useSearchParams} from 'react-router-dom';
export default function RouterTest(){
// ルートパラメータとは異なり、useSeachParamsを利用する
const params = useSearchParams();
return <div>組織ID：{params.get("soshikiid")} ユーザID：{params.get("userid")}</div>
}ルートパラメータとクエリパラメータのどちらを利用すれば良いか
すでに作成されたプロジェクトの規約があればそれに従えば良いが、決まってない場合（もしくは今から決める場合）は、ルートパラメータの利用を推奨します。
世の中のサービスでは、データを提供するためのWebAPI（天気情報APIなど）が多くありますが、その提供方法がルートパラメータが多く合わせた方が良いという理由からです。
※複数のサービスからデータを取得する必要があるアプリケーションを作成する場合、同じ記述方法で各サービスからデータが取得できるようになりコードがわかりやすくなります。わかりやすくなることで開発の生産性向上が見込めるためです。
また、クエリパラメータでは受け渡すパラメータの自由度が高い反面、インタフェースの明確さが失われ、プログラム改修時の影響が見えにくくなり保守性が低下します。これらの理由からルートパラメータの利用を推奨します。
まとめ
Reactで画面遷移時に値を受け渡す方法のまとめ
本記事では、Reactで画面遷移する際のパラメータの受け渡し方法について学んだ内容を記載しました。画面遷移を行うアプリケーションでは、画面間で値を受け渡すことは必ずあります。そのため、値の受け渡し方法もいくつかの方法があり、それぞれのメリットデメリットを考慮し開発手法に取り入れていく必要があります。
今後は、Reactのテスト方法と自動テストの実施方法についてご紹介します。
皆様の参考となりましたら幸いです。
コメント