【ITニュース解説】How to use useNavigate to transition from a button in React

Webサイトやアプリケーションを操作していると、様々なページを行き来することが当たり前だ。例えば、商品の一覧ページから特定の商品詳細ページへ移動したり、ログインフォームからマイページへ進んだりする。ReactのようなJavaScriptのフレームワークを使って構築されたアプリケーション、特にシングルページアプリケーション（SPA）では、ブラウザのアドレスバーに表示されるURLが変わっても、実はページ全体が再読み込みされるわけではない。アプリケーションの一部が動的に書き換えられることで、見た目上は別のページに移動したかのように見えるのだ。この「URLと表示内容の連動」や「スムーズなページ切り替え」を実現するための仕組みが「ルーティング」と呼ばれる。

react-router-domは、Reactアプリケーションでこのルーティング機能を提供するためのデファクトスタンダード（事実上の標準）となっているライブラリだ。その中でも、今回解説するuseNavigateは、プログラムのコードの中から能動的にユーザーを別のページへ「案内する」ための非常に重要な機能である。ユーザーがボタンを押した時、フォームを送信した後、あるいは何らかの処理が完了した時など、特定のイベントが発生した際にプログラムの命令としてページを切り替えたい場面で大いに活躍する。

useNavigateを利用するための最初のステップは、その機能を使うための準備を行うことだ。これは、react-router-domライブラリからuseNavigateという「フック」を取り出し、それを使って「ページ遷移を実行するための関数」を手に入れる作業に相当する。具体的には、まずimport { useNavigate } from "react-router-dom";というコードを、useNavigateを使いたいReactコンポーネントファイルの冒頭に記述する。これは、外部のライブラリから特定の機能、ここではuseNavigateという機能や関数を自分のファイルに読み込む、という明確な指示だ。次に、コンポーネントの内部、例えば関数コンポーネントの直下でconst navigate = useNavigate();と記述する。このuseNavigate()という関数を呼び出すことで、実際にはページ遷移のロジックをカプセル化した特別な関数が返される。その返された関数をnavigateという名前の変数に格納しているのだ。今後、このnavigateという変数を通じて、実際にページ遷移の命令を実行することになる。あたかも、カーナビの目的地設定機能を呼び出す準備をしているようなものだとイメージすると分かりやすいだろう。

最も基本的なnavigate関数の使い方は、特定の固定されたURLパスへユーザーを遷移させる場合だ。例えば、ユーザーがアプリケーション内の「新規登録」ボタンを押したら、常に/cards/registerというパスのページに移動させたい、といったケースがこれにあたる。この場合、先ほど取得したnavigate関数に対して、遷移したいページのURLパスを文字列として引数に渡すだけでよい。具体的な例としてnavigate("/cards/register");というコードを見てみよう。これは「現在表示しているページから、/cards/registerというパスに対応するページへ移動しなさい」という明確な指示となる。この指示が実行されると、Reactアプリケーションは内部的にそのパスに合致するコンポーネントを表示するように切り替わり、同時にブラウザのアドレスバーのURLも/cards/registerに更新される。これは、ユーザーがWebサイトのナビゲーションメニューから特定の項目をクリックするのと同様の体験を、プログラムの命令として実現する手段だと理解できる。

useNavigateのより強力な使い方は、URLパスの中に動的な情報、つまりユーザーが入力した値やアプリケーションの状態に応じた情報を埋め込んで、それに応じたページへ遷移させる場面で発揮される。例えば、ユーザーがIDを入力して検索ボタンを押した際、その入力されたIDに応じたプロフィールページ（例えば/users/123や/users/abcといった形）へ移動させたいといったシナリオが考えられる。この場合、JavaScriptの「テンプレートリテラル」という機能が非常に役立つ。テンプレートリテラルはバッククォート（``）で文字列を囲むことで、その文字列の中に変数や式を埋め込むことができる便利な記法だ。具体的には、const onSubmit = (data: any) => { navigate(/cards/${data.userId}); };のようなコードになる。ここでdata.userIdは、フォームから受け取ったユーザーIDなどの値を示している。もしdata.userIdが例えば"hello"という値であれば、navigate(/cards/${data.userId});という記述は内部的にnavigate("/cards/hello");として解釈され、結果として/cards/helloというURLパスのページへ遷移することになる。このように、ユーザーの入力やアプリケーションの内部状態に応じて、柔軟に遷移先のパスを組み立てられるため、非常にインタラクティブで動的なアプリケーションを構築する上で不可欠なテクニックとなる。

まとめると、useNavigateは、Reactアプリケーションにおけるページ遷移をプログラムのコードから制御するための非常に強力なフックだ。まずuseNavigate()を呼び出してnavigate関数を取得し、そのnavigate関数に遷移したいURLパスを引数として渡すことで、固定されたページへの移動や、入力値などの動的な情報を使ってパスを構築し、それに応じたページへの移動を実現できる。これにより、ボタンクリックやフォーム送信といったユーザーのアクションや、アプリケーション内部の特定のイベントに紐付けて、ユーザー体験を損なうことなく、アプリケーション内をスムーズに移動させることが可能になる。シングルページアプリケーションの利点を最大限に引き出し、ユーザーに快適な操作性を提供する上で、useNavigateはシステムエンジニアを目指す者が必ずマスターすべき基本的ながら非常に重要なツールである。