WEBVTT

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

2
00:00:00.944 --> 00:00:05.189
今回は、ジェネレートスタティックパラムスの使い方です。

3
00:00:05.189 --> 00:00:12.580
商品ページや記事ページのように、ユーアールエルの一部だけが変わるページを動的ルートと呼びます。

4
00:00:12.580 --> 00:00:21.072
アクセスがあるたびにページを作るのではなく、あらかじめ用意できるページはビルド時に作っておきたいところです。

5
00:00:21.072 --> 00:00:28.148
そのために、どの値のページを作るのかを列挙するのが、ジェネレートスタティックパラムスです。

6
00:00:28.148 --> 00:00:35.382
速く表示できる静的なページと、値ごとに内容が変わる動的なページ、その両立が今回のテーマです。

7
00:00:35.382 --> 00:00:44.188
今回は、記事のコードを読みながら、列挙した値とページ本体のつながり、そして列挙しなかった値の扱いまで押さえます。

8
00:00:44.188 --> 00:00:45.166
まず前提です。

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

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

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

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

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

14
00:01:18.567 --> 00:01:22.760
この関数は、ビルド時に動的ルートの値を決める役割を持ちます。

15
00:01:22.760 --> 00:01:24.048
戻り値を整理します。

16
00:01:24.048 --> 00:01:29.202
ジェネレートスタティックパラムスが返すのは、パラメーターオブジェクトの配列です。

17
00:01:29.202 --> 00:01:33.389
たとえば、アプリ、プロダクツ、角括弧スラッグというフォルダーのページなら、

18
00:01:33.389 --> 00:01:37.576
スラッグという文字列を持つオブジェクトの配列を返します。

19
00:01:37.576 --> 00:01:42.730
ここで大切なのは、ページズルーターのゲットスタティックパスとは形が違うことです。

20
00:01:42.730 --> 00:01:46.466
パスとフォールバックをまとめたオブジェクトではありません。

21
00:01:46.466 --> 00:01:50.976
配列の中の一つひとつが、そのまま一ページ分の動的ルートの値になります。

22
00:01:50.976 --> 00:01:55.356
フォルダー名とオブジェクトのキーを一致させることが、基本の約束です。

23
00:01:55.356 --> 00:02:00.510
キーの名前をフォルダー名とそろえていないと、その値は正しいページに対応しません。

24
00:02:00.510 --> 00:02:05.148
戻り値を作るときは、フォルダー構成と並べて確認する習慣を付けてください。

25
00:02:05.148 --> 00:02:07.903
記事のコードの前半、列挙の部分です。

26
00:02:07.903 --> 00:02:15.250
ファイルは、アプリ、プロダクツ、角括弧スラッグというフォルダーのページ・ティーエスエックスです。

27
00:02:15.250 --> 00:02:22.750
まず、プロダクツという対応表に、ノートブックにはノート、ペンシルには鉛筆という名前が入っています。

28
00:02:22.750 --> 00:02:28.261
ジェネレートスタティックパラムスでは、この対応表のキーをすべて取り出し、

29
00:02:28.261 --> 00:02:33.771
一つひとつをスラッグというキーを持つオブジェクトに変換して返しています。

30
00:02:33.771 --> 00:02:40.046
データのキーが、そのまま生成するページのユーアールエルの値になる、という作りです。

31
00:02:40.046 --> 00:02:43.720
データを増やせば、列挙される値も一緒に増えます。

32
00:02:43.720 --> 00:02:45.666
コードの後半、ページ本体です。

33
00:02:45.666 --> 00:02:49.169
まず、ダイナミックパラムスをフォルスと宣言しています。

34
00:02:49.169 --> 00:02:52.542
これにより、列挙しなかった値は受け付けなくなります。

35
00:02:52.542 --> 00:02:59.159
ページ本体のプロダクトは非同期関数で、パラムスはスラッグという文字列を持つプロミスとして受け取ります。

36
00:02:59.159 --> 00:03:02.467
最初にパラムスをアウェイトしてスラッグを取り出し、対応表からその名前を引いて、

37
00:03:02.467 --> 00:03:05.776
見出しとして表示します。

38
00:03:05.776 --> 00:03:09.927
ネクストジェイエス十五以降はこのアウェイトする書き方が前提です。

39
00:03:09.927 --> 00:03:14.468
十四以前の同期パラムスの例を、そのまま最新構成へ移植しないでください。

40
00:03:14.468 --> 00:03:15.970
実行結果を確認します。

41
00:03:15.970 --> 00:03:21.297
ビルド時には、まずジェネレートスタティックパラムスが対応表のキーを列挙します。

42
00:03:21.297 --> 00:03:29.083
その結果、プロダクツ・スラッシュ・ノートブックと、プロダクツ・スラッシュ・ペンシルの二ページが生成対象になります。

43
00:03:29.083 --> 00:03:33.044
それぞれのページでは、スラッグに応じた名前が表示されます。

44
00:03:33.044 --> 00:03:41.239
一方、ダイナミックパラムスがフォルスなので、対応表にない値、たとえばペンのような未列挙のユーアールエルは受け付けません。

45
00:03:41.239 --> 00:03:44.722
列挙した分だけを作り、それ以外は作らない、という境界がはっきりしているのが、

46
00:03:44.722 --> 00:03:48.205
この組み合わせの特徴です。

47
00:03:48.205 --> 00:03:51.483
生成対象の一覧は、データそのものから決まります。

48
00:03:51.483 --> 00:03:58.176
対応表のキーとユーアールエルが一対一で対応しているかを見比べると、処理の順序が追いやすくなります。

49
00:03:58.176 --> 00:04:03.110
ページズルーターのゲットスタティックパスとの違いを整理します。

50
00:04:03.110 --> 00:04:04.542
役割は似ています。

51
00:04:04.542 --> 00:04:10.590
どちらも、動的ルートでどのユーアールエルを事前に作るのかを決める仕組みです。

52
00:04:10.590 --> 00:04:12.978
ただし、戻り値の形が違います。

53
00:04:12.978 --> 00:04:20.617
ゲットスタティックパスは、パスの一覧とフォールバックという設定をまとめたオブジェクトを返します。

54
00:04:20.617 --> 00:04:26.984
一方、アップルーターのジェネレートスタティックパラムスは、パラメーターの配列を直接返し、

55
00:04:26.984 --> 00:04:33.350
未列挙の値をどう扱うかは、ダイナミックパラムスという別の宣言で決めます。

56
00:04:33.350 --> 00:04:38.284
プロジェクトのルーターに合わせて、書き方を切り替えてください。

57
00:04:38.284 --> 00:04:42.148
つまずきやすい点の一つ目は、データの取得上限です。

58
00:04:42.148 --> 00:04:47.867
実務では、商品や記事のデータをシーエムエスから取得することが多くなります。

59
00:04:47.867 --> 00:04:53.895
ところが、一覧エーピーアイには一度に取得できる件数の上限がある場合があります。

60
00:04:53.895 --> 00:04:58.300
最初の百件だけを取得してパラメーターを返してしまうと、ビルド自体は成功しても、

61
00:04:58.300 --> 00:05:02.705
百一件目以降のページが作られません。

62
00:05:02.705 --> 00:05:08.269
対策は、全件をページ分割で取得し終えてから、パラメーターを返すことです。

63
00:05:08.269 --> 00:05:13.988
列挙の取りこぼしは、そのまま未生成のページになる、と覚えておいてください。

64
00:05:13.988 --> 00:05:19.707
件数が少ないうちは気付かなくても、データが増えた途端に不足が表面化します。

65
00:05:19.707 --> 00:05:24.344
運用が始まる前に、上限を超える件数でも試しておくと安心です。

66
00:05:24.344 --> 00:05:27.076
二つ目は、更新のタイミングです。

67
00:05:27.076 --> 00:05:35.103
ここで列挙するユーアールエルは、ビルド対象のスナップショット、つまりビルドした時点の一覧です。

68
00:05:35.103 --> 00:05:44.666
純粋な静的サイトでは、シーエムエスに商品を追加しても、そのユーアールエルがその場で生成されるわけではありません。

69
00:05:44.666 --> 00:05:50.302
今回の例は、ビルド時に値を確定できるため、静的出力に組み込めます。

70
00:05:50.302 --> 00:05:57.303
その代わり、シーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。

71
00:05:57.303 --> 00:06:04.476
公開後に新しいページが見当たらないときは、まず再ビルドが行われたかを確認しましょう。

72
00:06:04.476 --> 00:06:05.730
確認課題です。

73
00:06:05.730 --> 00:06:15.221
まず、三つ目の商品を対応表に追加して再ビルドし、ユーアールエルとページ内容が増えることを確認してください。

74
00:06:15.221 --> 00:06:21.309
あわせて、未列挙のユーアールエルが四百四として扱われるかも調べます。

75
00:06:21.309 --> 00:06:27.219
確認は、開発サーバーだけでなく、本番用ビルドと公開先でも行います。

76
00:06:27.219 --> 00:06:33.845
ユーアールエルを直接開く場合と、画面内のリンクから移る場合、値がない場合と不正な値の場合を分けて試すと、

77
00:06:33.845 --> 00:06:40.471
型だけでは防げない入力の問題が見つかります。

78
00:06:40.471 --> 00:06:46.559
小さな追加で、列挙、生成、拒否の三つの動きをまとめて確かめられます。

79
00:06:46.559 --> 00:06:51.932
三つの動きのうち一つでも期待と違えば、列挙の場所か、再ビルドの有無か、宣言の値か、

80
00:06:51.932 --> 00:06:57.304
原因を切り分けて記録しておきましょう。

81
00:06:57.304 --> 00:06:58.104
まとめです。

82
00:06:58.104 --> 00:07:02.304
ジェネレートスタティックパラムスは、アップルーターで動的ルートの値を列挙し、

83
00:07:02.304 --> 00:07:06.504
そのページをビルド時に静的生成するための関数です。

84
00:07:06.504 --> 00:07:11.970
戻り値はパラメーターオブジェクトの配列で、パスとフォールバックの形ではありません。

85
00:07:11.970 --> 00:07:19.570
ページ本体ではパラムスをアウェイトして値を使い、ダイナミックパラムスをフォルスにすれば未列挙の値を受け付けません。

86
00:07:19.570 --> 00:07:27.303
シーエムエスから取得するときは全件を取り切ること、そして追加や変更のあとは再ビルドが必要なことを忘れないでください。

87
00:07:27.303 --> 00:07:30.636
これでジェネレートスタティックパラムスは完了です。

88
00:07:30.636 --> 00:07:31.836
お疲れさまでした。

89
00:07:31.836 --> 00:07:35.036
次回はゲットサーバーサイドプロップスを学びます。