SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

Pageのprops：params・searchParamsの違いと入力検証の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00今回はページのプロップスです。
  3. 0:03アップルーターのページが受け取るプロップスは、主に二つあります。
  4. 0:08一つ目はパラムスで、動的ルートの値です。
  5. 0:11二つ目はサーチパラムスで、アドレスの疑問符の後に付く検索条件です。
  6. 0:16前回はレイアウトのプロップスを学びましたが、レイアウトにはなかったサーチパラムスを、
  7. 0:20ページでは受け取れます。
  8. 0:24この二つの違いと、プロミスの解決の仕方、そしてページ番号を安全に検証する実例を学びます。
  9. 0:30値の形を確かめてから使う、という入力検証の考え方が今回の中心です。
  10. 0:35まず前提です。
  11. 0:36この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  12. 0:43ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  13. 0:49タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  14. 0:55配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  15. 1:02ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  16. 1:09バージョンが違うと、プロップスの型の書き方が変わる点に注意が必要です。
  17. 1:14二つの違いを整理します。
  18. 1:16パラムスは、ルートの動的セグメントです。
  19. 1:18たとえばスラッシュ・トピック・スラッシュ・リアクトというアドレスでは、角括弧スラッグに対応するリアクトという値が入ります。
  20. 1:27一方サーチパラムスは、疑問符の後に続く検索条件で、ページ番号や絞り込みの条件が入ります。
  21. 1:33ここで大切な注意が一つあります。
  22. 1:35サーチパラムスは、ユーアールエルサーチパラムスではありません。
  23. 1:39普通のオブジェクトとして届くため、ゲットというメソッドで読む書き方はできません。
  24. 1:44名前が似ている別のもの、と覚えてください。
  25. 1:47パスの一部か、疑問符の後か、という出どころの違いが使い分けの基準になります。
  26. 1:52ネクストジェイエス十五以降では、パラムスもサーチパラムスも、どちらもプロミスとして受け取ります。
  27. 1:59プロミスは、まだ中身が確定していない約束のようなものです。
  28. 2:04そのため、値を読む前にアウェイトで解決する必要があります。
  29. 2:08ページコンポーネントを非同期関数、つまりアシンクを付けた関数にするのはそのためです。
  30. 2:14解決せずにそのまま表示しようとしても、期待した文字列は得られません。
  31. 2:19型定義でも、パラムスは文字列を持つオブジェクトのプロミス、サーチパラムスは検索条件を持つオブジェクトのプロミス、
  32. 2:24と書きます。
  33. 2:28レイアウトのパラムスと同じ約束だと思ってください。
  34. 2:32記事のコードです。
  35. 2:34ファイルは、アプリ、トピック、角括弧スラッグというフォルダーのページ・ティーエスエックスです。
  36. 2:41プロップスの型では、パラムスがスラッグという文字列のプロミス、サーチパラムスがページという任意項目を持つプロミスになっています。
  37. 2:52ページの型は、文字列か文字列の配列か、どちらもあり得ると宣言しています。
  38. 2:57トピックページという非同期関数が二つを受け取り、まずアウェイトでパラムスを解決してスラッグを取り出し、
  39. 3:03次にサーチパラムスを解決してクエリと呼びます。
  40. 3:09そのページ項目をローという変数に取り出し、検証してから数値へ変え、テーマとページ番号を表示します。
  41. 3:17スライドでは表示崩れを避けるため、波括弧の埋め込みを文字列の連結で示しています。
  42. 3:24検証の考え方を、純粋な関数に切り出して確認します。
  43. 3:28まずタイプオブで、値が文字列かどうかを確かめます。
  44. 3:32配列や未定義なら、既定値の一を返します。
  45. 3:36次に正規表現で形を確かめます。
  46. 3:38先頭は一から九、続く数字は最大で三桁まで、つまり一から九九九九までの四桁以内だけを許可します。
  47. 3:46この二つの関門を通ったときだけ、ナンバーで数値へ変換します。
  48. 3:51数字へ変換する前に形と上限を検証しておくと、データベースのオフセットやエーピーアイのページ数に、
  49. 3:57過大な値を渡すことを防ぎやすくなります。
  50. 4:02記事の上限九九九九は説明用で、実務ではデータ件数に合わせてください。
  51. 4:08実行結果です。
  52. 4:09スラッシュ・トピック・スラッシュ・リアクトに、疑問符ページ・イコール・二を付けると、
  53. 4:14テーマはリアクト、ページは二になります。
  54. 4:19これが正常なケースです。
  55. 4:20一方、ページがゼロの場合、負数の場合、重複して指定した場合、そして五桁以上の場合は、
  56. 4:25すべて既定値の一になります。
  57. 4:29記事の確認課題では、ページなし、二、ゼロ、マイナス一、エービーシー、繰り返し指定という六ケースを試すことが勧められています。
  58. 4:39自分で値を変えて確かめると、型だけでは防げない入力の問題が見えてきます。
  59. 4:44想定外の値を入れてみることが、検証の理解への近道です。
  60. 4:48つまずきやすい点です。
  61. 4:50ページは、ネクストジェイエスが呼び出す入口です。
  62. 4:54任意のユーザーやプロダクツといった値が、自動で注入されることはありません。
  63. 4:59画面に必要なデータは、サーバー側で自分で取得するか、ユーアールエルを解決して子コンポーネントへ渡します。
  64. 5:07親コンポーネントから自由にプロップスを渡せる通常のコンポーネントとは違い、
  65. 5:13ページが受け取れるのはフレームワークが決めたパラムスとサーチパラムスが中心です。
  66. 5:19ここを取り違えると、なぜ値が届かないのか分からなくなります。
  67. 5:23入口の役割を意識して、取得と表示の順序を組み立ててください。
  68. 5:28繰り返し指定への備えです。
  69. 5:30疑問符ページ・イコール・一、アンド、ページ・イコール・二のように、同じ条件を二回書いたアドレスでは、
  70. 5:35値が配列になります。
  71. 5:40記事の型で、ページが文字列か文字列の配列か、と両方を書いていたのはこのためです。
  72. 5:46型アサーションで文字列と決めつけてしまうと、配列が来たときに想定外の動きになります。
  73. 5:53大切なのは、方針を先に定義することです。
  74. 5:56先頭の値を採用するのか、不正として拒否するのか、既定値へ落とすのか。
  75. 6:02記事の例は既定値の一へ落とす方針で、検証関数も配列なら一を返すように作られています。
  76. 6:09方針が決まっていれば、実装もテストもぶれません。
  77. 6:12実務への応用です。
  78. 6:14この例はリクエストごとのサーバー処理を必要とします。
  79. 6:18アウトプット・エクスポートで生成した静的ファイルを配信するだけのサーバーでは実行できません。
  80. 6:25ネクストジェイエスのサーバー実行環境か、別のエーピーアイを用意してください。
  81. 6:30もう一つ、認可の注意です。
  82. 6:32アドレスの値を、そのままアクセス許可の判断に使ってはいけません。
  83. 6:37誰でもアドレスを書き換えられるため、アクセス可能なテーマかどうかはサーバーで別途判断します。
  84. 6:44確認は開発サーバーだけでなく、本番用ビルドと公開先でも行い、アドレスを直接開く場合と、
  85. 6:49画面内のリンクから遷移する場合を分けて試してください。
  86. 6:55まとめです。
  87. 6:55パラムスは動的ルートの値でパスの部分、サーチパラムスはアドレスの疑問符の後の検索条件で、
  88. 7:00ユーアールエルサーチパラムスとは別物です。
  89. 7:04ネクストジェイエス十五以降はどちらもプロミスなので、アウェイトで解決してから読みます。
  90. 7:10検索条件は配列になる場合があるため、文字列かどうかと形と上限を検証し、不正なら既定値へ落とします。
  91. 7:17ページへ任意のプロップスは自動では入らず、認可はサーバーで別途判断します。
  92. 7:22六ケースを自分で試して説明できるようになれば、この回の目標は達成です。
  93. 7:27これでページのプロップスは完了です。
  94. 7:29お疲れさまでした。
  95. 7:31次回はサーバーとクライアントの間のプロップスを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

App RouterのPageが受け取るparamsとsearchParamsを個別に整理します。Promiseの解決、配列になり得る検索条件、ページ番号の検証を実例で学びます。

解説記事・サンプルコードを読む：Pageのprops：params・searchParamsの違いと入力検証 →