WEBVTT

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

2
00:00:00.943 --> 00:00:04.401
今回は、ゲットスタティックパスの使い方です。

3
00:00:04.401 --> 00:00:11.317
動的ルートでは、ページの形は一つでも、ユーアールエルは記事や本ごとに何通りも生まれます。

4
00:00:11.317 --> 00:00:18.390
そのうち、ビルド時に作っておくユーアールエルを決めるのが、このゲットスタティックパスです。

5
00:00:18.390 --> 00:00:25.149
生成する対象を列挙し、列挙されなかったユーアールエルをどう扱うかも合わせて指定します。

6
00:00:25.149 --> 00:00:30.965
内容そのものは、もう一つの関数、ゲットスタティックプロップスが担当します。

7
00:00:30.965 --> 00:00:37.252
記事のコードを読みながら、この役割分担と、フォールバックの選び方まで押さえます。

8
00:00:37.252 --> 00:00:38.167
まず前提です。

9
00:00:38.167 --> 00:00:42.744
ゲットスタティックパスは、ページズルーターで使うデータ取得の関数です。

10
00:00:42.744 --> 00:00:47.713
ページは、ページズというディレクトリーの中の動的ルートのファイルに置きます。

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

12
00:00:54.251 --> 00:00:57.127
ルーターごとに仕組みが別だと考えてください。

13
00:00:57.127 --> 00:01:01.181
この関数は、リクエストのたびではなく、ビルド時に実行されます。

14
00:01:01.181 --> 00:01:06.803
どのユーアールエルを静的ページとして用意するかを、公開前に確定させるための仕組みです。

15
00:01:06.803 --> 00:01:13.472
対象のファイルが動的ルートであることと、プロジェクトがページズルーターであることを先に確認しましょう。

16
00:01:13.472 --> 00:01:15.143
戻り値を整理します。

17
00:01:15.143 --> 00:01:21.492
この関数は、パスとフォールバックという二つの値を持つオブジェクトを返します。

18
00:01:21.492 --> 00:01:23.831
パスは、生成対象の一覧です。

19
00:01:23.831 --> 00:01:32.184
各要素は、ユーアールエルの文字列そのものでも、パラムスという形で動的ルートの値を渡す形でも書けます。

20
00:01:32.184 --> 00:01:39.034
フォールバックは、列挙されなかったユーアールエルへアクセスが来たときの扱い方です。

21
00:01:39.034 --> 00:01:43.880
記事の例ではフォルスを返し、列挙したものだけを生成します。

22
00:01:43.880 --> 00:01:52.233
ここで大切なのは、パラムスの中の名前を、角括弧で囲んだフォルダー名やファイル名と一致させることです。

23
00:01:52.233 --> 00:01:56.076
名前がずれると、値はページへ正しく届きません。

24
00:01:56.076 --> 00:02:00.420
この二つをセットで返す点が、この関数の形の特徴です。

25
00:02:00.420 --> 00:02:03.928
記事のコードの前半、生成対象を決める部分です。

26
00:02:03.928 --> 00:02:10.334
ファイルは、ページズ配下のブックス、その中の角括弧スラッグ・ティーエスエックスです。

27
00:02:10.334 --> 00:02:16.131
まず、本のスラッグとタイトルを対応させる、ブックスという対応表を用意します。

28
00:02:16.131 --> 00:02:20.325
ゲットスタティックパスは、この対応表のキー一覧を取り出し、一つずつパラムスの形へ変換して、

29
00:02:20.325 --> 00:02:24.520
パスとして返します。

30
00:02:24.520 --> 00:02:30.621
今はキーが一つなので、生成対象はウェブベーシックスのユーアールエル一つだけです。

31
00:02:30.621 --> 00:02:36.112
フォールバックはフォルスで、列挙していないユーアールエルは生成しません。

32
00:02:36.112 --> 00:02:39.270
コードの後半、内容の取得とページ本体です。

33
00:02:39.270 --> 00:02:43.705
ゲットスタティックプロップスは、パラムスからスラッグを取り出し、文字列であることと、

34
00:02:43.705 --> 00:02:48.141
対応表に存在することを確認します。

35
00:02:48.141 --> 00:02:52.652
どちらか一方でも満たさなければ、ノットファウンドを返します。

36
00:02:52.652 --> 00:02:58.215
問題なければ、対応表からタイトルを引き、プロップスとしてページへ渡します。

37
00:02:58.215 --> 00:03:03.327
ページ本体のブックは、受け取ったタイトルを見出しに表示するだけです。

38
00:03:03.327 --> 00:03:10.244
対象を決める関数と、内容を決める関数が、スラッグを合言葉に連携している点に注目してください。

39
00:03:10.244 --> 00:03:11.842
実行結果を確認します。

40
00:03:11.842 --> 00:03:17.291
ビルドすると、ブックス・スラッシュ・ウェブベーシックスというユーアールエルが生成対象になり、

41
00:03:17.291 --> 00:03:22.739
タイトル、ウェブ制作入門が表示されるページが用意されます。

42
00:03:22.739 --> 00:03:27.389
一方、未知のブックス・スラッシュ・ミッシングは、フォールバックがフォルスのため対象外となり、

43
00:03:27.389 --> 00:03:32.038
見つからないページとして扱われます。

44
00:03:32.038 --> 00:03:36.348
処理の順序は、ビルド時にゲットスタティックパスがユーアールエルを列挙し、

45
00:03:36.348 --> 00:03:40.659
ユーアールエルごとにゲットスタティックプロップスが内容を解決して、静的ページが出来上がる、

46
00:03:40.659 --> 00:03:44.969
という流れです。

47
00:03:44.969 --> 00:03:48.456
列挙と内容取得は、別の工程だと意識してください。

48
00:03:48.456 --> 00:03:50.868
役割分担をもう少し掘り下げます。

49
00:03:50.868 --> 00:03:55.542
ゲットスタティックパスが返すのは、あくまで生成するユーアールエルの一覧であり、

50
00:03:55.542 --> 00:04:00.216
本のタイトルのような本文データではありません。

51
00:04:00.216 --> 00:04:05.493
本文は、同じスラッグを使ってゲットスタティックプロップスが解決します。

52
00:04:05.493 --> 00:04:10.091
そのため、パス側だけを更新して内容側を忘れると、ユーアールエルは増えたのに中身が解決できない、

53
00:04:10.091 --> 00:04:14.690
という食い違いが起こります。

54
00:04:14.690 --> 00:04:22.379
実務でシーエムエスを使う場合は、内部の管理用アイディーと、公開用のスラッグが別物になることもあります。

55
00:04:22.379 --> 00:04:29.013
その設計では、二つを結ぶ対応表も用意し、列挙と取得の両方で同じ対応を使うことが大切です。

56
00:04:29.013 --> 00:04:33.988
列挙と取得を一つの対応表から作ると、片方だけ直す事故を減らせます。

57
00:04:33.988 --> 00:04:38.365
つまずきやすい点の一つ目は、フォールバックの選択です。

58
00:04:38.365 --> 00:04:42.094
フォルスは、列挙したユーアールエルだけを生成し、それ以外は対象外とする、

59
00:04:42.094 --> 00:04:45.822
最も単純な方式です。

60
00:04:45.822 --> 00:04:53.118
トゥルーは、未列挙のユーアールエルでも初回は仮の状態を表示し、その裏でページを生成します。

61
00:04:53.118 --> 00:04:58.792
そのため、ページ側でフォールバック状態の表示を用意する必要があります。

62
00:04:58.792 --> 00:05:04.141
ブロッキングは、初回の生成が終わるまで待ってからページを返します。

63
00:05:04.141 --> 00:05:10.626
ただし、トゥルーとブロッキングは、どちらもアクセス時にサーバー側で生成する仕組みが必要であり、

64
00:05:10.626 --> 00:05:17.110
静的ファイルだけを配信する、純粋な静的出力の選択肢ではありません。

65
00:05:17.110 --> 00:05:22.136
ページ数が多いかどうかと、配信方式の両方を見て選んでください。

66
00:05:22.136 --> 00:05:24.461
二つ目は、値の形の取り違えです。

67
00:05:24.461 --> 00:05:28.674
角括弧スラッグという単一の動的ルートでは、値は文字列です。

68
00:05:28.674 --> 00:05:35.067
一方、角括弧ドット三つスラッグというキャッチオールの形では、値は文字列の配列になります。

69
00:05:35.067 --> 00:05:40.588
記事のコードが文字列かどうかを確認しているのは、この取り違えを防ぐためです。

70
00:05:40.588 --> 00:05:48.143
合わせて、ユーアールエルに含める文字、大文字と小文字の扱い、重複するスラッグがないかも確認してください。

71
00:05:48.143 --> 00:05:56.570
なお、記事のコードで使うオブジェクト・ハズオウンは、イーエス二千二十二対応の実行環境と型ライブラリーを前提とします。

72
00:05:56.570 --> 00:06:00.348
古い環境では動かないことがある点に注意してください。

73
00:06:00.348 --> 00:06:03.015
静的出力との関係と、確認課題です。

74
00:06:03.015 --> 00:06:08.035
記事の例は、ビルド時に値が確定するため、静的出力に組み込めます。

75
00:06:08.035 --> 00:06:14.153
ただし、シーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。

76
00:06:14.153 --> 00:06:18.389
公開済みのページが自動で差し替わるわけではありません。

77
00:06:18.389 --> 00:06:26.233
確認課題として、二冊目のスラッグを対応表へ追加し、二つのユーアールエルをどちらも直接開いてください。

78
00:06:26.233 --> 00:06:34.391
そのうえで、パス側、つまり列挙の側だけを更新して内容側を忘れた場合に、生成結果がどうなるかも確かめます。

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

80
00:06:39.882 --> 00:06:46.000
直接開く確認は、リンクからの遷移では隠れてしまう問題を見つける助けになります。

81
00:06:46.000 --> 00:06:46.876
まとめです。

82
00:06:46.876 --> 00:06:54.907
ゲットスタティックパスは、ページズルーターの動的ルートで、ビルド時に生成するユーアールエルを列挙する関数です。

83
00:06:54.907 --> 00:07:00.893
パスで対象を決め、列挙されなかったユーアールエルの扱いをフォールバックで選びます。

84
00:07:00.893 --> 00:07:06.880
本文データは返さず、内容は同じスラッグでゲットスタティックプロップスが解決します。

85
00:07:06.880 --> 00:07:15.349
フォールバックのトゥルーとブロッキングはサーバー側の生成が必要で、純粋な静的出力では選べない点にも注意してください。

86
00:07:15.349 --> 00:07:20.459
迷ったときは、どのユーアールエルを先に作るのかを基準に考えてください。

87
00:07:20.459 --> 00:07:23.380
これでゲットスタティックパスは完了です。

88
00:07:23.380 --> 00:07:24.694
お疲れさまでした。

89
00:07:24.694 --> 00:07:28.052
次回はゲットスタティックプロップスを学びます。