SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

useRouterの使い方：App Routerの画面遷移・履歴・refreshの解説動画

再生時間 7:32動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00今回は、ユースルーターの使い方です。
  3. 0:03ボタンが押されたときなど、プログラム側から画面遷移を指示する方法を学びます。
  4. 0:09これまで学んだユースパラムス、ユースサーチパラムス、ユースパスネームがユーアールエルを読むためのフックだったのに対して、
  5. 0:16ユースルーターはユーアールエルを動かすためのフックです。
  6. 0:22履歴を追加するプッシュ、現在の履歴を置き換えるリプレース、前に戻るバック、
  7. 0:27そしてサーバー表示を取り直すリフレッシュ。
  8. 0:31この四つの役割の違いが今回のポイントです。
  9. 0:35リンクとの使い分けも合わせて押さえます。
  10. 0:38この回では、記事にある四つのボタンの例を読み解きながら、それぞれの操作が履歴にどう残るかを具体的に比べていきます。
  11. 0:46まず前提です。
  12. 0:47この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  13. 0:54ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  14. 1:00タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  15. 1:06配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  16. 1:13ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  17. 1:20ユースルーターはクライアント側で動くフックです。
  18. 1:23戻り値の考え方を整理します。
  19. 1:25ネクスト・スラッシュ・ナビゲーションのユースルーターを引数なしで呼ぶと、
  20. 1:30画面遷移を操作するためのオブジェクトが返ります。
  21. 1:34中心になる操作は四つです。
  22. 1:36プッシュは履歴を一つ追加して移動します。
  23. 1:39リプレースは現在の履歴を置き換えて移動するため、戻る操作で置き換え前の画面には戻りません。
  24. 1:46バックはブラウザーの履歴を一つ前に戻します。
  25. 1:50リフレッシュは移動せず、現在のルートのサーバー表示を取り直します。
  26. 1:55移動するのか、履歴をどう扱うのか、表示だけを更新するのか、という観点で選ぶと迷いません。
  27. 2:02なお、これらの操作はいずれもブラウザー側で動くため、呼び出す側はクライアントコンポーネントである必要があります。
  28. 2:10記事のコードの前半です。
  29. 2:12ファイルは、アプリ、ナビゲーションデモというフォルダーのページ・ティーエスエックスです。
  30. 2:18先頭にユースクライアントと書いてクライアントコンポーネントにし、ネクスト・スラッシュ・ナビゲーションからユースルーターを読み込みます。
  31. 2:28ユースルーターを呼んで得たルーターオブジェクトを定数に入れ、ボタンのクリックでメソッドを呼び出します。
  32. 2:36最初のボタンはプッシュで、行き先にクエリ付きのユーアールエルを渡しています。
  33. 2:42読み込み先がネクスト・スラッシュ・ルーターではなく、ナビゲーションである点が重要です。
  34. 2:48コードの後半、残り三つのボタンです。
  35. 2:51二つ目はリプレースで、クエリのないユーアールエルへ現在の履歴を置き換えて移動し、
  36. 2:55表示条件を解除する想定です。
  37. 3:00三つ目はバックで、引数なしで履歴を一つ前に戻します。
  38. 3:04四つ目はリフレッシュで、移動はせず、現在のルートのサーバー表示を取り直します。
  39. 3:10プッシュしたあとにバックを押せば元の画面へ戻れますが、リプレースしたあとでは戻り先が変わります。
  40. 3:18この履歴の違いこそが、プッシュとリプレースを使い分ける理由です。
  41. 3:23四つのボタンが、そのまま操作の比較になっています。
  42. 3:27実行結果と使い分けです。
  43. 3:28詳細ボタンを押すと、ユーアールエルのクエリが変わります。
  44. 3:32ただしこの例はユーアールエル操作だけを示しているため、本文の内容は同じままです。
  45. 3:38ユーアールエルと画面を連動させたい場合は、これまでに学んだユースサーチパラムスなどで値を読み、
  46. 3:42表示を切り替えてください。
  47. 3:46もう一つ大切なのが、リンクとの役割分担です。
  48. 3:49通常の画面遷移はリンクコンポーネントを使い、フォーム送信後の移動やボタン操作のように、
  49. 3:56処理と結び付いた移動のときにルーターを使うと、新しいタブで開くなど、リンクとしての操作性を保ちやすくなります。
  50. 4:03逆に、行き先が固定された案内リンクまでルーターで実装してしまうと、ブラウザー標準のリンク操作が失われがちです。
  51. 4:11プッシュとリプレースの違いを、履歴の並びで確かめます。
  52. 4:15画面エーにいるときにプッシュで画面ビーへ移ると、履歴はエー、ビーの順に積まれ、
  53. 4:19バックでエーへ戻れます。
  54. 4:24ここでビーからリプレースで画面シーへ移ると、履歴の中のビーがシーに置き換わるため、
  55. 4:29バックの行き先はエーになり、ビーには戻りません。
  56. 4:34一時的な条件付きの画面や、戻す意味のない中間画面ではリプレースを、たどってきた経路を残したい通常の移動ではプッシュを、
  57. 4:40と使い分けます。
  58. 4:46この違いは、手元で実際に操作して確かめるのが一番確実です。
  59. 4:51ページズルーターとの違いです。
  60. 4:53ページズルーターで使っていたネクスト・スラッシュ・ルーターのユースルーターとは、
  61. 4:56名前は同じでも別物です。
  62. 5:00アップルーターではネクスト・スラッシュ・ナビゲーションから読み込みます。
  63. 5:04さらに、ページズルーター側にあったクエリやパスネームといった値が、同じ形で取得できるわけではありません。
  64. 5:11アップルーターでは、動的ルートの値はユースパラムス、パスはユースパスネーム、
  65. 5:16検索条件はユースサーチパラムスと、役割ごとのフックで読みます。
  66. 5:21ユースルーターは操作専用と割り切ると、設計がぶれません。
  67. 5:24リフレッシュの注意と、移動先の検証です。
  68. 5:27リフレッシュは現在のルートのサーバー表示を取り直す操作ですが、サーバー側に保存されたデータキャッシュをすべて破棄する命令ではありません。
  69. 5:37古い表示が残る問題を、リフレッシュだけで解決しようとしないでください。
  70. 5:42もう一つは安全面です。
  71. 5:44未検証の外部入力をそのままプッシュへ渡すと、意図しない危険なユーアールエルへ遷移し得ます。
  72. 5:50移動先は、許可したパスの一覧と照合するなど、検証してから渡してください。
  73. 5:55利用者の入力をそのまま行き先にしないことが原則です。
  74. 5:59たとえば、行き先の候補をあらかじめ一覧に用意しておき、入力がその中に含まれる場合だけプッシュする、
  75. 6:04といった形が基本です。
  76. 6:08静的出力と確認課題です。
  77. 6:10ブラウザーでの処理自体は、静的サイトでも利用できます。
  78. 6:15ただし、遷移先のページは事前に生成されている必要があり、クライアントでの操作がサーバー機能や認可の代わりになるわけではありません。
  79. 6:26確認課題として、プッシュしたあとに戻る操作を試し、リプレースしたときとの履歴の違いを、
  80. 6:31自分の言葉で説明してください。
  81. 6:36別サイトから直接開いた場合、バックは自サイト内へ戻る保証がない点も確認します。
  82. 6:42開発サーバーだけでなく、本番用ビルドと公開先でも、直接開く場合とリンクから移る場合を分けて試しましょう。
  83. 6:51まとめです。
  84. 6:52ユースルーターは、アップルーターで画面遷移を操作するためのフックで、クライアントコンポーネントの中で、
  85. 6:57ネクスト・スラッシュ・ナビゲーションから使います。
  86. 7:03プッシュは履歴を追加し、リプレースは現在の履歴を置き換え、バックは前に戻り、
  87. 7:07リフレッシュはサーバー表示を取り直します。
  88. 7:11通常の遷移はリンク、処理と結び付いた移動はルーター、という分担を基本にし、
  89. 7:15移動先は検証してから渡してください。
  90. 7:19これでユースルーターは完了です。
  91. 7:21お疲れさまでした。
  92. 7:22次回はジェネレートメタデータを学びます。
  93. 7:25四つの操作の違いは、実際にボタンを押して履歴の動きを確かめてみると、短時間で身に付きます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

useRouterでボタンから画面を切り替える方法を解説します。push・replace・back・refreshの役割と、next/routerとの違いを確認します。

解説記事・サンプルコードを読む：useRouterの使い方：App Routerの画面遷移・履歴・refresh →