VIDEO LESSON

getStaticPathsの使い方：動的URLの生成対象を列挙するの解説動画

再生時間 7:28動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00今回は、ゲットスタティックパスの使い方です。
0:04動的ルートでは、ページの形は一つでも、ユーアールエルは記事や本ごとに何通りも生まれます。
0:11そのうち、ビルド時に作っておくユーアールエルを決めるのが、このゲットスタティックパスです。
0:18生成する対象を列挙し、列挙されなかったユーアールエルをどう扱うかも合わせて指定します。
0:25内容そのものは、もう一つの関数、ゲットスタティックプロップスが担当します。
0:30記事のコードを読みながら、この役割分担と、フォールバックの選び方まで押さえます。
0:37まず前提です。
0:38ゲットスタティックパスは、ページズルーターで使うデータ取得の関数です。
0:42ページは、ページズというディレクトリーの中の動的ルートのファイルに置きます。
0:47アプリルーターのアプリへ同じファイルを移しても、データ取得やルーティングの決まりは引き継がれません。
0:54ルーターごとに仕組みが別だと考えてください。
0:57この関数は、リクエストのたびではなく、ビルド時に実行されます。
1:01どのユーアールエルを静的ページとして用意するかを、公開前に確定させるための仕組みです。
1:06対象のファイルが動的ルートであることと、プロジェクトがページズルーターであることを先に確認しましょう。
1:13戻り値を整理します。
1:15この関数は、パスとフォールバックという二つの値を持つオブジェクトを返します。
1:21パスは、生成対象の一覧です。
1:23各要素は、ユーアールエルの文字列そのものでも、パラムスという形で動的ルートの値を渡す形でも書けます。
1:32フォールバックは、列挙されなかったユーアールエルへアクセスが来たときの扱い方です。
1:39記事の例ではフォルスを返し、列挙したものだけを生成します。
1:43ここで大切なのは、パラムスの中の名前を、角括弧で囲んだフォルダー名やファイル名と一致させることです。
1:52名前がずれると、値はページへ正しく届きません。
1:56この二つをセットで返す点が、この関数の形の特徴です。
2:00記事のコードの前半、生成対象を決める部分です。
2:03ファイルは、ページズ配下のブックス、その中の角括弧スラッグ・ティーエスエックスです。
2:10まず、本のスラッグとタイトルを対応させる、ブックスという対応表を用意します。
2:16ゲットスタティックパスは、この対応表のキー一覧を取り出し、一つずつパラムスの形へ変換して、
2:20パスとして返します。
2:24今はキーが一つなので、生成対象はウェブベーシックスのユーアールエル一つだけです。
2:30フォールバックはフォルスで、列挙していないユーアールエルは生成しません。
2:36コードの後半、内容の取得とページ本体です。
2:39ゲットスタティックプロップスは、パラムスからスラッグを取り出し、文字列であることと、
2:43対応表に存在することを確認します。
2:48どちらか一方でも満たさなければ、ノットファウンドを返します。
2:52問題なければ、対応表からタイトルを引き、プロップスとしてページへ渡します。
2:58ページ本体のブックは、受け取ったタイトルを見出しに表示するだけです。
3:03対象を決める関数と、内容を決める関数が、スラッグを合言葉に連携している点に注目してください。
3:10実行結果を確認します。
3:11ビルドすると、ブックス・スラッシュ・ウェブベーシックスというユーアールエルが生成対象になり、
3:17タイトル、ウェブ制作入門が表示されるページが用意されます。
3:22一方、未知のブックス・スラッシュ・ミッシングは、フォールバックがフォルスのため対象外となり、
3:27見つからないページとして扱われます。
3:32処理の順序は、ビルド時にゲットスタティックパスがユーアールエルを列挙し、
3:36ユーアールエルごとにゲットスタティックプロップスが内容を解決して、静的ページが出来上がる、
3:40という流れです。
3:44列挙と内容取得は、別の工程だと意識してください。
3:48役割分担をもう少し掘り下げます。
3:50ゲットスタティックパスが返すのは、あくまで生成するユーアールエルの一覧であり、
3:55本のタイトルのような本文データではありません。
4:00本文は、同じスラッグを使ってゲットスタティックプロップスが解決します。
4:05そのため、パス側だけを更新して内容側を忘れると、ユーアールエルは増えたのに中身が解決できない、
4:10という食い違いが起こります。
4:14実務でシーエムエスを使う場合は、内部の管理用アイディーと、公開用のスラッグが別物になることもあります。
4:22その設計では、二つを結ぶ対応表も用意し、列挙と取得の両方で同じ対応を使うことが大切です。
4:29列挙と取得を一つの対応表から作ると、片方だけ直す事故を減らせます。
4:33つまずきやすい点の一つ目は、フォールバックの選択です。
4:38フォルスは、列挙したユーアールエルだけを生成し、それ以外は対象外とする、
4:42最も単純な方式です。
4:45トゥルーは、未列挙のユーアールエルでも初回は仮の状態を表示し、その裏でページを生成します。
4:53そのため、ページ側でフォールバック状態の表示を用意する必要があります。
4:58ブロッキングは、初回の生成が終わるまで待ってからページを返します。
5:04ただし、トゥルーとブロッキングは、どちらもアクセス時にサーバー側で生成する仕組みが必要であり、
5:10静的ファイルだけを配信する、純粋な静的出力の選択肢ではありません。
5:17ページ数が多いかどうかと、配信方式の両方を見て選んでください。
5:22二つ目は、値の形の取り違えです。
5:24角括弧スラッグという単一の動的ルートでは、値は文字列です。
5:28一方、角括弧ドット三つスラッグというキャッチオールの形では、値は文字列の配列になります。
5:35記事のコードが文字列かどうかを確認しているのは、この取り違えを防ぐためです。
5:40合わせて、ユーアールエルに含める文字、大文字と小文字の扱い、重複するスラッグがないかも確認してください。
5:48なお、記事のコードで使うオブジェクト・ハズオウンは、イーエス二千二十二対応の実行環境と型ライブラリーを前提とします。
5:56古い環境では動かないことがある点に注意してください。
6:00静的出力との関係と、確認課題です。
6:03記事の例は、ビルド時に値が確定するため、静的出力に組み込めます。
6:08ただし、シーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。
6:14公開済みのページが自動で差し替わるわけではありません。
6:18確認課題として、二冊目のスラッグを対応表へ追加し、二つのユーアールエルをどちらも直接開いてください。
6:26そのうえで、パス側、つまり列挙の側だけを更新して内容側を忘れた場合に、生成結果がどうなるかも確かめます。
6:34確認は、開発サーバーだけでなく、本番用ビルドと公開先でも行いましょう。
6:39直接開く確認は、リンクからの遷移では隠れてしまう問題を見つける助けになります。
6:46まとめです。
6:46ゲットスタティックパスは、ページズルーターの動的ルートで、ビルド時に生成するユーアールエルを列挙する関数です。
6:54パスで対象を決め、列挙されなかったユーアールエルの扱いをフォールバックで選びます。
7:00本文データは返さず、内容は同じスラッグでゲットスタティックプロップスが解決します。
7:06フォールバックのトゥルーとブロッキングはサーバー側の生成が必要で、純粋な静的出力では選べない点にも注意してください。
7:15迷ったときは、どのユーアールエルを先に作るのかを基準に考えてください。
7:20これでゲットスタティックパスは完了です。
7:23お疲れさまでした。
7:24次回はゲットスタティックプロップスを学びます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

getStaticPathsで生成するURLを決め、getStaticPropsで各ページの内容を取得する役割分担を学びます。fallbackの違いと静的出力の制約も整理します。