WEBVTT

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

2
00:00:00.853 --> 00:00:04.406
今回は、ゲットスタティックプロップスの使い方です。

3
00:00:04.406 --> 00:00:11.654
この関数は、ページを作るビルドの時点でデータを一度取得し、その結果をプロップスとしてページへ渡します。

4
00:00:11.654 --> 00:00:17.624
訪問者のリクエストのたびに取得するのではなく、公開前に内容を確定させるのが特徴です。

5
00:00:17.624 --> 00:00:22.030
記事の書籍一覧の例を通して、引数と戻り値、型の付け方、そして公開してよい情報と秘密の情報の境界まで、

6
00:00:22.030 --> 00:00:26.435
順番に押さえていきます。

7
00:00:26.435 --> 00:00:31.268
前回のゲットスタティックパスが生成対象のユーアールエルを列挙する役割だったのに対し、

8
00:00:31.268 --> 00:00:36.100
今回はその各ページの中身そのものを用意する役割です。

9
00:00:36.100 --> 00:00:37.078
まず前提です。

10
00:00:37.078 --> 00:00:42.386
ゲットスタティックプロップスは、ページズルーターで使うデータ取得の関数です。

11
00:00:42.386 --> 00:00:46.157
ページは、ページズというディレクトリーの中に置きます。

12
00:00:46.157 --> 00:00:53.141
アプリルーターのアプリへ同じファイルを移しても、データ取得やルーティングの決まりは引き継がれません。

13
00:00:53.141 --> 00:00:56.214
ルーターごとに仕組みが別だと考えてください。

14
00:00:56.214 --> 00:01:02.779
本番では、この関数はビルド時に実行され、返したプロップスからエイチティーエムエルが作られます。

15
00:01:02.779 --> 00:01:06.829
開発モードでは実行のタイミングが異なるため、生成日時が固定されるかどうかを調べるときは、

16
00:01:06.829 --> 00:01:10.880
本番ビルドで確認しましょう。

17
00:01:10.880 --> 00:01:12.759
引数と戻り値を整理します。

18
00:01:12.759 --> 00:01:18.828
引数のコンテキストには、動的ルートのパラムスや、プレビュー用のデータなどが入ります。

19
00:01:18.828 --> 00:01:25.476
記事の例は固定ページなのでパラムスは使いませんが、動的ルートではこの値で対象を切り替えます。

20
00:01:25.476 --> 00:01:29.088
成功時は、プロップスというキーでデータを返します。

21
00:01:29.088 --> 00:01:34.074
加えて、一定秒数ごとの再生成を指定するリバリデート、存在しない場合のノットファウンド、

22
00:01:34.074 --> 00:01:39.060
別の場所へ送るリダイレクトも、戻り値として選べます。

23
00:01:39.060 --> 00:01:43.684
返す形によってページの扱いが変わる点が、この関数の形の特徴です。

24
00:01:43.684 --> 00:01:48.236
動的ルートの場合は、ゲットスタティックパスが列挙した値がパラムスとして届くため、

25
00:01:48.236 --> 00:01:52.788
前回の内容と合わせて読むと流れが見えてきます。

26
00:01:52.788 --> 00:01:55.978
記事のコードの前半、データ取得の部分です。

27
00:01:55.978 --> 00:02:00.535
ファイルは、ページズ配下のカタログ・ティーエスエックスです。

28
00:02:00.535 --> 00:02:05.244
まず、書籍の配列と生成日時を含む、プロップスの型を用意します。

29
00:02:05.244 --> 00:02:10.408
ゲットスタティックプロップスには、その型を渡して戻り値を守らせます。

30
00:02:10.408 --> 00:02:15.345
中身はシンプルで、書籍を一冊だけ持つ固定の配列を作り、現在の日時をアイエスオー文字列へ変換して、

31
00:02:15.345 --> 00:02:20.282
どちらもプロップスとして返します。

32
00:02:20.282 --> 00:02:25.295
外部サービスの準備なしで、処理の流れだけを試せる形になっています。

33
00:02:25.295 --> 00:02:30.307
型にゲットスタティックプロップスを使うことで、プロップスの形と違う値を返したときに、

34
00:02:30.307 --> 00:02:35.320
ビルドの前に型チェックで気付けるようになります。

35
00:02:35.320 --> 00:02:37.388
コードの後半、ページ本体です。

36
00:02:37.388 --> 00:02:42.558
カタログというコンポーネントは、インファーゲットスタティックプロップスタイプという仕組みで、

37
00:02:42.558 --> 00:02:47.728
取得関数の型をそのまま引き継いでプロップスを受け取ります。

38
00:02:47.728 --> 00:02:52.829
型を二重に書かずに済むため、取得側と表示側で食い違いが起きにくくなります。

39
00:02:52.829 --> 00:03:01.239
表示は、見出しと生成日時、そして書籍の配列をマップで回して、キーにアイディーを使いながらタイトルをリストに並べるだけです。

40
00:03:01.239 --> 00:03:05.650
取得と表示が、プロップスを境に分かれている点に注目してください。

41
00:03:05.650 --> 00:03:09.855
キーには並び順の番号ではなく、書籍ごとに安定したアイディーを使うことで、

42
00:03:09.855 --> 00:03:14.060
並び替えがあっても表示の対応がずれにくくなります。

43
00:03:14.060 --> 00:03:15.639
実行結果を確認します。

44
00:03:15.639 --> 00:03:20.949
カタログのユーアールエルを開くと、書籍のタイトルと生成日時が表示されます。

45
00:03:20.949 --> 00:03:27.192
処理の順序は、本番ビルドの時点でゲットスタティックプロップスが動き、そのプロップスからエイチティーエムエルが作られ、

46
00:03:27.192 --> 00:03:33.435
訪問者へは出来上がったページが配信される、という流れです。

47
00:03:33.435 --> 00:03:38.889
実務では、固定の配列をシーエムエスやディービーからの取得結果へ置き換えます。

48
00:03:38.889 --> 00:03:44.200
ただし置き換えるときは、取得に失敗した場合の扱いも一緒に設計してください。

49
00:03:44.200 --> 00:03:47.214
その注意は後のセクションで改めて扱います。

50
00:03:47.214 --> 00:03:51.663
生成日時はビルドのたびに変わるため、再ビルドしたかどうかを目で確かめる目印としても、

51
00:03:51.663 --> 00:03:56.112
この例は分かりやすい作りになっています。

52
00:03:56.112 --> 00:04:00.013
つまずきやすい点の一つ目は、プロップスの形です。

53
00:04:00.013 --> 00:04:06.027
プロップスは、ジェイソンとしてシリアライズできる値にしなければなりません。

54
00:04:06.027 --> 00:04:14.805
文字列、数値、真偽値、配列、素直なオブジェクトは渡せますが、日付オブジェクトをそのまま渡すことはできません。

55
00:04:14.805 --> 00:04:21.631
記事のコードが、日付をアイエスオー文字列へ変換してから返しているのは、そのためです。

56
00:04:21.631 --> 00:04:27.971
関数や、値が未定義のものも、渡す途中で落ちたり、意図しない形になったりします。

57
00:04:27.971 --> 00:04:33.822
ブラウザーへ渡す形を、取得側で明確に整えてから返す習慣を付けてください。

58
00:04:33.822 --> 00:04:43.900
迷ったときは、その値をジェイソンへ変換して元に戻したときに、情報が欠けずに残るかどうかを基準に考えると判断しやすくなります。

59
00:04:43.900 --> 00:04:45.885
二つ目は、秘密の情報の境界です。

60
00:04:45.885 --> 00:04:54.199
ゲットスタティックプロップス自体はサーバー側で動くため、環境変数からエーピーアイキーを使ってデータを取得すること自体は問題ありません。

61
00:04:54.199 --> 00:04:57.673
危険なのは、そのキーをプロップスへ入れてしまうことです。

62
00:04:57.673 --> 00:05:03.505
プロップスに入れた値は、出来上がったページと一緒に利用者へ届き、誰でも見られる状態になります。

63
00:05:03.505 --> 00:05:10.577
戻り値には、画面に表示するために必要なフィールドだけを含め、取得に使ったキーや内部の管理情報は含めないでください。

64
00:05:10.577 --> 00:05:13.927
サーバーで読む値と、公開する値を分ける意識が大切です。

65
00:05:13.927 --> 00:05:17.588
画面に表示しない値を、念のためという理由でプロップスへ含める習慣は避け、

66
00:05:17.588 --> 00:05:21.248
必要最小限の項目だけを返すようにしてください。

67
00:05:21.248 --> 00:05:24.726
三つ目は、アイエスアールと静的出力の混同です。

68
00:05:24.726 --> 00:05:33.952
リバリデートを指定すると、対応するサーバー環境では、一定の秒数が経過したあとのアクセスをきっかけにページが再生成されます。

69
00:05:33.952 --> 00:05:41.967
一方、ファイルを置くだけの純粋な静的出力では、秒数が経過してもファイルが勝手に更新されることはありません。

70
00:05:41.967 --> 00:05:46.958
記事の例は、ビルド時に値を確定できるため、静的出力に組み込めます。

71
00:05:46.958 --> 00:05:52.403
ただし、シーエムエスで内容を更新した場合は、再ビルドと再配置が必要です。

72
00:05:52.403 --> 00:05:59.208
どちらの配信方式で公開するかを先に決めてから、リバリデートを使うかどうかを選んでください。

73
00:05:59.208 --> 00:06:07.980
記事の生成日時も同じで、リバリデートがない静的出力では、前にビルドした日時のまま残り続ける点を確認しておきましょう。

74
00:06:07.980 --> 00:06:10.927
最後の注意は、取得失敗の扱いです。

75
00:06:10.927 --> 00:06:20.114
失敗したときに空の配列を返して握りつぶすと、記事が消えた成果物が、正常なページとして公開されてしまいます。

76
00:06:20.114 --> 00:06:25.140
失敗はビルドの失敗として扱い、公開を止める設計も必要です。

77
00:06:25.140 --> 00:06:32.074
確認課題として、配列へ書籍を一冊追加し、ビルドの前後でページを比較してください。

78
00:06:32.074 --> 00:06:40.048
続いて、日付をそのまま返した誤りの形と、アイエスオー文字列へ変換した場合の違いも確かめます。

79
00:06:40.048 --> 00:06:45.941
確認は開発サーバーだけでなく、本番用ビルドと公開先でも行いましょう。

80
00:06:45.941 --> 00:06:50.795
値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力や取得の問題に、

81
00:06:50.795 --> 00:06:55.648
公開前へ気付きやすくなります。

82
00:06:55.648 --> 00:06:56.366
まとめです。

83
00:06:56.366 --> 00:06:59.836
ゲットスタティックプロップスは、ページズルーターで、ビルド時にデータを取得し、

84
00:06:59.836 --> 00:07:03.306
プロップスとしてページへ渡す関数です。

85
00:07:03.306 --> 00:07:10.247
コンテキストから対象を受け取り、成功時はプロップスを返し、必要に応じてリバリデートやノットファウンドなども選べます。

86
00:07:10.247 --> 00:07:17.546
プロップスはジェイソンで渡せる形に整え、日付は文字列へ変換すること、そして秘密のキーをプロップスへ入れないことが大切です。

87
00:07:17.546 --> 00:07:20.657
配信方式が静的出力なら、更新は再ビルドで反映します。

88
00:07:20.657 --> 00:07:23.410
これでゲットスタティックプロップスは完了です。

89
00:07:23.410 --> 00:07:24.486
お疲れさまでした。

90
00:07:24.486 --> 00:07:28.196
迷ったときは、ビルド時に確定できるかどうかで判断してください。