SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

useParamsの使い方：動的ルートの値をClient Componentで読むの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00今回は、ユースパラムスの使い方です。
  3. 0:03ブログの記事ページや商品ページのように、ユーアールエルが記事ごとに変わる画面を動的ルートと呼びます。
  4. 0:11その変わる部分の値を、クライアントコンポーネントの中で直接読み取る方法を学びます。
  5. 0:18ユースパラムスは、ネクスト・ナビゲーションから読み込むフックです。
  6. 0:23親から何段もプロップスで受け渡さなくても、値を必要とする部品の中でその場で読める点が特長です。
  7. 0:31単一の値と複数階層の値で型が変わる点や、検索条件との使い分けを、順に整理していきます。
  8. 0:38このあと、記事のコードをそのままの形で確認し、最後に値の形の判定まで実例で確かめます。
  9. 0:44まず前提です。
  10. 0:45この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  11. 0:52ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  12. 0:58タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  13. 1:04配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  14. 1:10ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  15. 1:18ユースパラムスはクライアント側のフックなので、使うファイルはクライアントコンポーネントとして用意します。
  16. 1:25引数と戻り値を整理します。
  17. 1:27ユースパラムスには、通常の引数として値を渡すのではなく、山かっこで型引数を書き、
  18. 1:32想定する形をタイプスクリプトに伝えます。
  19. 1:38たとえばスラッグが文字列一つの場合は、その形を型として書きます。
  20. 1:43戻り値は、動的ルートの値が名前ごとに収まったオブジェクトです。
  21. 1:49ここで大切なのは、型引数はあくまで想定を記述するもので、実行時の入力検証ではないことです。
  22. 1:57実際のユーアールエルが想定と違っても、型を書いただけでは弾けません。
  23. 2:03通常の角かっこスラッグは文字列、ドット三つを付けたキャッチオールは文字列の配列になる、
  24. 2:08という対応をまず押さえてください。
  25. 2:13キー名はフォルダー名と一致させる必要があり、名前が食い違うと値は未定義になります。
  26. 2:20記事のコードです。
  27. 2:22ファイルは、アプリ、パラムデモ、角かっこスラッグというフォルダーのページ・ティーエスエックスです。
  28. 2:28先頭にユースクライアントと書いてクライアントコンポーネントにし、ネクスト・スラッシュ・ナビゲーションからユースパラムスを読み込みます。
  29. 2:38コンポーネントの中では、スラッグが文字列であるという型を付けてユースパラムスを呼び、
  30. 2:42パラムス・スラッグとして取り出して画面に表示します。
  31. 2:47角かっこで囲まれたフォルダー名が、そのままパラムスのキー名になります。
  32. 2:52フォルダー名とキーの名前が対応する点が、動的ルートの基本です。
  33. 2:56実行結果と処理の順序です。
  34. 2:58スラッシュ、パラムデモ、スラッシュ、リアクトを開くと、画面にはリアクトと表示されます。
  35. 3:05ここにクエスチョンマーク、スラッグイコールネクストという検索条件を追加しても、
  36. 3:09パスのスラッグはリアクトのままです。
  37. 3:14パスの中の値と、クエスチョン以降の検索条件は、別の情報源だからです。
  38. 3:19使いどころとしては、動的な値をページの子へ何段も受け渡す代わりに、クライアントコンポーネントで直接読む場面があります。
  39. 3:28ただし、汎用の部品をルートから独立させたい場合は、普通のプロップスを渡す設計のほうが再利用しやすくなります。
  40. 3:36直接読む便利さと、部品の独立性は、用途で使い分けてください。
  41. 3:41単一セグメントとキャッチオールの型の違いです。
  42. 3:44通常の角かっこスラッグは、ユーアールエルの一階層だけを受け取るため、値は文字列です。
  43. 3:51ドット三つを付けたキャッチオールは、複数階層をまとめて受け取るため、値は文字列の配列になります。
  44. 3:57さらに二重の角かっこで囲んだ省略可能なキャッチオールでは、値が指定されない場合もあるため、
  45. 4:02未定義の可能性まで型に含めて考えます。
  46. 4:07フォルダーの書き方と型が一対一で対応しているので、ルートの定義を見れば、
  47. 4:10受け取る値の形が分かります。
  48. 4:14逆に、型だけ変えてフォルダーを変え忘れると、想定と実際が食い違うので注意してください。
  49. 4:20値の形を判定する考え方です。
  50. 4:23画面のコードは、受け取った値を表示用に整える部分だけを切り出したものです。
  51. 4:29配列なら要素をスラッシュでつなぎ、未指定ならその旨を示し、それ以外は文字列として扱います。
  52. 4:37リアクトなら文字列リアクト、エーとビーの配列なら配列エースラッシュビー、
  53. 4:42未指定なら未指定と判定されます。
  54. 4:46キャッチオールを使う画面では、値をそのまま文字列として扱う前に、まず形を確認する手順を入れてください。
  55. 4:55形の判定を先に済ませることで、配列を文字列だと思い込んだ表示崩れを防げます。
  56. 5:02つまずきやすい使い分けです。
  57. 5:04パラムスは検索条件ではありません。
  58. 5:07ユーアールエルのクエスチョン以降に付く、キーイコール値の形の検索条件は、
  59. 5:11ユースサーチパラムスで読みます。
  60. 5:16たとえば記事の識別子はパスの中に置き、並び順やページ番号は検索条件に置く、
  61. 5:23といった具合に、ユーアールエルのどの部分が情報源なのかを、画面仕様と合わせて先に決めてください。
  62. 5:30情報源を取り違えると、値を変更しても画面が変わらない、といった分かりにくい不具合になります。
  63. 5:38パスの値はユースパラムス、検索条件はユースサーチパラムス、と読み取る場所で覚えましょう。
  64. 5:45セキュリティと検証の注意点です。
  65. 5:48型引数を書いただけでは、不正な値を防げません。
  66. 5:51スラッグから商品などのデータを取得する前に、その形式や存在を必ず検証してください。
  67. 5:58存在しない値の扱いは、ページのサーバー側やエーピーアイ側で適切に行い、画面側で見えなくするだけのアクセス制御にしないことも大切です。
  68. 6:08クライアントで読める値は、利用者が自由に書き換えられる入力だと考えるのが基本です。
  69. 6:14表示の分岐と、守るべき判定は分けて設計し、重要な確認はサーバー側に置いてください。
  70. 6:21想定外の値が来たときに、エラー画面や存在しない画面へ正しくつなげることも、
  71. 6:24検証の一部です。
  72. 6:28値を受け取ってから表示するまでの流れの中で、どこで確認するのかを決めておきましょう。
  73. 6:34静的出力との関係と確認課題です。
  74. 6:37記事のコード単体は、動的ユーアールエルをサーバーで受け付ける例です。
  75. 6:43静的出力では、サーバーコンポーネントのページでジェネレートスタティックパラムスを定義し、
  76. 6:48生成対象を列挙する必要があります。
  77. 6:54そのうえで、フックを使う部分を別のクライアントコンポーネントへ切り出して配置します。
  78. 7:01確認課題として、キャッチオールへ変更した別のルートを作り、型を文字列の配列にして二階層以上のユーアールエルを表示し、
  79. 7:08省略可能な形では未指定のケースも試してください。
  80. 7:16開発サーバーだけでなく、本番用ビルドと公開先でも確認しましょう。
  81. 7:21まとめです。
  82. 7:22ユースパラムスは、動的ルートの値をクライアントコンポーネントで直接読むためのフックです。
  83. 7:29通常の角かっこでは文字列、キャッチオールでは文字列の配列、省略可能なキャッチオールでは未定義の可能性まで含めて型を考えます。
  84. 7:39検索条件はユースサーチパラムスで読み、情報源を分けること、型引数は検証ではないので形式と存在の確認を別に行うことを押さえてください。
  85. 7:49静的出力では生成対象の列挙と部品の切り出しが必要です。
  86. 7:53これでユースパラムスは完了です。
  87. 7:56お疲れさまでした。
  88. 7:57次回はユースサーチパラムスを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

useParamsで動的ルートのslugを取得します。単一セグメントとcatch-allの型の違い、クエリ文字列との使い分けを説明します。

解説記事・サンプルコードを読む：useParamsの使い方：動的ルートの値をClient Componentで読む →