WEBVTT

1
00:00:00.000 --> 00:00:00.908
こんにちは。

2
00:00:00.908 --> 00:00:03.177
今回はページのプロップスです。

3
00:00:03.177 --> 00:00:08.019
アップルーターのページが受け取るプロップスは、主に二つあります。

4
00:00:08.019 --> 00:00:11.045
一つ目はパラムスで、動的ルートの値です。

5
00:00:11.045 --> 00:00:16.039
二つ目はサーチパラムスで、アドレスの疑問符の後に付く検索条件です。

6
00:00:16.039 --> 00:00:20.124
前回はレイアウトのプロップスを学びましたが、レイアウトにはなかったサーチパラムスを、

7
00:00:20.124 --> 00:00:24.209
ページでは受け取れます。

8
00:00:24.209 --> 00:00:30.867
この二つの違いと、プロミスの解決の仕方、そしてページ番号を安全に検証する実例を学びます。

9
00:00:30.867 --> 00:00:35.860
値の形を確かめてから使う、という入力検証の考え方が今回の中心です。

10
00:00:35.860 --> 00:00:36.826
まず前提です。

11
00:00:36.826 --> 00:00:43.309
この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。

12
00:00:43.309 --> 00:00:49.241
ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。

13
00:00:49.241 --> 00:00:55.863
タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。

14
00:00:55.863 --> 00:01:02.346
配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。

15
00:01:02.346 --> 00:01:09.796
ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。

16
00:01:09.796 --> 00:01:14.624
バージョンが違うと、プロップスの型の書き方が変わる点に注意が必要です。

17
00:01:14.624 --> 00:01:16.246
二つの違いを整理します。

18
00:01:16.246 --> 00:01:18.950
パラムスは、ルートの動的セグメントです。

19
00:01:18.950 --> 00:01:27.197
たとえばスラッシュ・トピック・スラッシュ・リアクトというアドレスでは、角括弧スラッグに対応するリアクトという値が入ります。

20
00:01:27.197 --> 00:01:33.146
一方サーチパラムスは、疑問符の後に続く検索条件で、ページ番号や絞り込みの条件が入ります。

21
00:01:33.146 --> 00:01:35.309
ここで大切な注意が一つあります。

22
00:01:35.309 --> 00:01:39.500
サーチパラムスは、ユーアールエルサーチパラムスではありません。

23
00:01:39.500 --> 00:01:44.908
普通のオブジェクトとして届くため、ゲットというメソッドで読む書き方はできません。

24
00:01:44.908 --> 00:01:47.747
名前が似ている別のもの、と覚えてください。

25
00:01:47.747 --> 00:01:52.884
パスの一部か、疑問符の後か、という出どころの違いが使い分けの基準になります。

26
00:01:52.884 --> 00:01:59.968
ネクストジェイエス十五以降では、パラムスもサーチパラムスも、どちらもプロミスとして受け取ります。

27
00:01:59.968 --> 00:02:04.248
プロミスは、まだ中身が確定していない約束のようなものです。

28
00:02:04.248 --> 00:02:08.528
そのため、値を読む前にアウェイトで解決する必要があります。

29
00:02:08.528 --> 00:02:14.726
ページコンポーネントを非同期関数、つまりアシンクを付けた関数にするのはそのためです。

30
00:02:14.726 --> 00:02:19.744
解決せずにそのまま表示しようとしても、期待した文字列は得られません。

31
00:02:19.744 --> 00:02:24.319
型定義でも、パラムスは文字列を持つオブジェクトのプロミス、サーチパラムスは検索条件を持つオブジェクトのプロミス、

32
00:02:24.319 --> 00:02:28.894
と書きます。

33
00:02:28.894 --> 00:02:32.584
レイアウトのパラムスと同じ約束だと思ってください。

34
00:02:32.584 --> 00:02:34.044
記事のコードです。

35
00:02:34.044 --> 00:02:41.668
ファイルは、アプリ、トピック、角括弧スラッグというフォルダーのページ・ティーエスエックスです。

36
00:02:41.668 --> 00:02:52.050
プロップスの型では、パラムスがスラッグという文字列のプロミス、サーチパラムスがページという任意項目を持つプロミスになっています。

37
00:02:52.050 --> 00:02:57.890
ページの型は、文字列か文字列の配列か、どちらもあり得ると宣言しています。

38
00:02:57.890 --> 00:03:03.892
トピックページという非同期関数が二つを受け取り、まずアウェイトでパラムスを解決してスラッグを取り出し、

39
00:03:03.892 --> 00:03:09.894
次にサーチパラムスを解決してクエリと呼びます。

40
00:03:09.894 --> 00:03:17.843
そのページ項目をローという変数に取り出し、検証してから数値へ変え、テーマとページ番号を表示します。

41
00:03:17.843 --> 00:03:24.332
スライドでは表示崩れを避けるため、波括弧の埋め込みを文字列の連結で示しています。

42
00:03:24.332 --> 00:03:28.512
検証の考え方を、純粋な関数に切り出して確認します。

43
00:03:28.512 --> 00:03:32.692
まずタイプオブで、値が文字列かどうかを確かめます。

44
00:03:32.692 --> 00:03:36.036
配列や未定義なら、既定値の一を返します。

45
00:03:36.036 --> 00:03:38.544
次に正規表現で形を確かめます。

46
00:03:38.544 --> 00:03:46.402
先頭は一から九、続く数字は最大で三桁まで、つまり一から九九九九までの四桁以内だけを許可します。

47
00:03:46.402 --> 00:03:51.418
この二つの関門を通ったときだけ、ナンバーで数値へ変換します。

48
00:03:51.418 --> 00:03:57.103
数字へ変換する前に形と上限を検証しておくと、データベースのオフセットやエーピーアイのページ数に、

49
00:03:57.103 --> 00:04:02.787
過大な値を渡すことを防ぎやすくなります。

50
00:04:02.787 --> 00:04:08.472
記事の上限九九九九は説明用で、実務ではデータ件数に合わせてください。

51
00:04:08.472 --> 00:04:09.550
実行結果です。

52
00:04:09.550 --> 00:04:14.324
スラッシュ・トピック・スラッシュ・リアクトに、疑問符ページ・イコール・二を付けると、

53
00:04:14.324 --> 00:04:19.098
テーマはリアクト、ページは二になります。

54
00:04:19.098 --> 00:04:20.946
これが正常なケースです。

55
00:04:20.946 --> 00:04:25.258
一方、ページがゼロの場合、負数の場合、重複して指定した場合、そして五桁以上の場合は、

56
00:04:25.258 --> 00:04:29.570
すべて既定値の一になります。

57
00:04:29.570 --> 00:04:39.118
記事の確認課題では、ページなし、二、ゼロ、マイナス一、エービーシー、繰り返し指定という六ケースを試すことが勧められています。

58
00:04:39.118 --> 00:04:44.662
自分で値を変えて確かめると、型だけでは防げない入力の問題が見えてきます。

59
00:04:44.662 --> 00:04:48.820
想定外の値を入れてみることが、検証の理解への近道です。

60
00:04:48.820 --> 00:04:50.481
つまずきやすい点です。

61
00:04:50.481 --> 00:04:54.105
ページは、ネクストジェイエスが呼び出す入口です。

62
00:04:54.105 --> 00:04:59.692
任意のユーザーやプロダクツといった値が、自動で注入されることはありません。

63
00:04:59.692 --> 00:05:07.544
画面に必要なデータは、サーバー側で自分で取得するか、ユーアールエルを解決して子コンポーネントへ渡します。

64
00:05:07.544 --> 00:05:13.358
親コンポーネントから自由にプロップスを渡せる通常のコンポーネントとは違い、

65
00:05:13.358 --> 00:05:19.172
ページが受け取れるのはフレームワークが決めたパラムスとサーチパラムスが中心です。

66
00:05:19.172 --> 00:05:23.702
ここを取り違えると、なぜ値が届かないのか分からなくなります。

67
00:05:23.702 --> 00:05:28.232
入口の役割を意識して、取得と表示の順序を組み立ててください。

68
00:05:28.232 --> 00:05:30.344
繰り返し指定への備えです。

69
00:05:30.344 --> 00:05:35.216
疑問符ページ・イコール・一、アンド、ページ・イコール・二のように、同じ条件を二回書いたアドレスでは、

70
00:05:35.216 --> 00:05:40.089
値が配列になります。

71
00:05:40.089 --> 00:05:46.586
記事の型で、ページが文字列か文字列の配列か、と両方を書いていたのはこのためです。

72
00:05:46.586 --> 00:05:53.409
型アサーションで文字列と決めつけてしまうと、配列が来たときに想定外の動きになります。

73
00:05:53.409 --> 00:05:56.657
大切なのは、方針を先に定義することです。

74
00:05:56.657 --> 00:06:02.180
先頭の値を採用するのか、不正として拒否するのか、既定値へ落とすのか。

75
00:06:02.180 --> 00:06:09.002
記事の例は既定値の一へ落とす方針で、検証関数も配列なら一を返すように作られています。

76
00:06:09.002 --> 00:06:12.900
方針が決まっていれば、実装もテストもぶれません。

77
00:06:12.900 --> 00:06:14.259
実務への応用です。

78
00:06:14.259 --> 00:06:18.183
この例はリクエストごとのサーバー処理を必要とします。

79
00:06:18.183 --> 00:06:25.128
アウトプット・エクスポートで生成した静的ファイルを配信するだけのサーバーでは実行できません。

80
00:06:25.128 --> 00:06:30.864
ネクストジェイエスのサーバー実行環境か、別のエーピーアイを用意してください。

81
00:06:30.864 --> 00:06:32.826
もう一つ、認可の注意です。

82
00:06:32.826 --> 00:06:37.657
アドレスの値を、そのままアクセス許可の判断に使ってはいけません。

83
00:06:37.657 --> 00:06:44.601
誰でもアドレスを書き換えられるため、アクセス可能なテーマかどうかはサーバーで別途判断します。

84
00:06:44.601 --> 00:06:49.885
確認は開発サーバーだけでなく、本番用ビルドと公開先でも行い、アドレスを直接開く場合と、

85
00:06:49.885 --> 00:06:55.168
画面内のリンクから遷移する場合を分けて試してください。

86
00:06:55.168 --> 00:06:55.992
まとめです。

87
00:06:55.992 --> 00:07:00.454
パラムスは動的ルートの値でパスの部分、サーチパラムスはアドレスの疑問符の後の検索条件で、

88
00:07:00.454 --> 00:07:04.917
ユーアールエルサーチパラムスとは別物です。

89
00:07:04.917 --> 00:07:10.821
ネクストジェイエス十五以降はどちらもプロミスなので、アウェイトで解決してから読みます。

90
00:07:10.821 --> 00:07:17.550
検索条件は配列になる場合があるため、文字列かどうかと形と上限を検証し、不正なら既定値へ落とします。

91
00:07:17.550 --> 00:07:22.630
ページへ任意のプロップスは自動では入らず、認可はサーバーで別途判断します。

92
00:07:22.630 --> 00:07:27.436
六ケースを自分で試して説明できるようになれば、この回の目標は達成です。

93
00:07:27.436 --> 00:07:29.908
これでページのプロップスは完了です。

94
00:07:29.908 --> 00:07:31.143
お疲れさまでした。

95
00:07:31.143 --> 00:07:34.988
次回はサーバーとクライアントの間のプロップスを学びます。