SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

getStaticPropsの使い方：ビルド時のデータをpropsへ渡すの解説動画

再生時間 7:28動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回は、ゲットスタティックプロップスの使い方です。
  3. 0:04この関数は、ページを作るビルドの時点でデータを一度取得し、その結果をプロップスとしてページへ渡します。
  4. 0:11訪問者のリクエストのたびに取得するのではなく、公開前に内容を確定させるのが特徴です。
  5. 0:17記事の書籍一覧の例を通して、引数と戻り値、型の付け方、そして公開してよい情報と秘密の情報の境界まで、
  6. 0:22順番に押さえていきます。
  7. 0:26前回のゲットスタティックパスが生成対象のユーアールエルを列挙する役割だったのに対し、
  8. 0:31今回はその各ページの中身そのものを用意する役割です。
  9. 0:36まず前提です。
  10. 0:37ゲットスタティックプロップスは、ページズルーターで使うデータ取得の関数です。
  11. 0:42ページは、ページズというディレクトリーの中に置きます。
  12. 0:46アプリルーターのアプリへ同じファイルを移しても、データ取得やルーティングの決まりは引き継がれません。
  13. 0:53ルーターごとに仕組みが別だと考えてください。
  14. 0:56本番では、この関数はビルド時に実行され、返したプロップスからエイチティーエムエルが作られます。
  15. 1:02開発モードでは実行のタイミングが異なるため、生成日時が固定されるかどうかを調べるときは、
  16. 1:06本番ビルドで確認しましょう。
  17. 1:10引数と戻り値を整理します。
  18. 1:12引数のコンテキストには、動的ルートのパラムスや、プレビュー用のデータなどが入ります。
  19. 1:18記事の例は固定ページなのでパラムスは使いませんが、動的ルートではこの値で対象を切り替えます。
  20. 1:25成功時は、プロップスというキーでデータを返します。
  21. 1:29加えて、一定秒数ごとの再生成を指定するリバリデート、存在しない場合のノットファウンド、
  22. 1:34別の場所へ送るリダイレクトも、戻り値として選べます。
  23. 1:39返す形によってページの扱いが変わる点が、この関数の形の特徴です。
  24. 1:43動的ルートの場合は、ゲットスタティックパスが列挙した値がパラムスとして届くため、
  25. 1:48前回の内容と合わせて読むと流れが見えてきます。
  26. 1:52記事のコードの前半、データ取得の部分です。
  27. 1:55ファイルは、ページズ配下のカタログ・ティーエスエックスです。
  28. 2:00まず、書籍の配列と生成日時を含む、プロップスの型を用意します。
  29. 2:05ゲットスタティックプロップスには、その型を渡して戻り値を守らせます。
  30. 2:10中身はシンプルで、書籍を一冊だけ持つ固定の配列を作り、現在の日時をアイエスオー文字列へ変換して、
  31. 2:15どちらもプロップスとして返します。
  32. 2:20外部サービスの準備なしで、処理の流れだけを試せる形になっています。
  33. 2:25型にゲットスタティックプロップスを使うことで、プロップスの形と違う値を返したときに、
  34. 2:30ビルドの前に型チェックで気付けるようになります。
  35. 2:35コードの後半、ページ本体です。
  36. 2:37カタログというコンポーネントは、インファーゲットスタティックプロップスタイプという仕組みで、
  37. 2:42取得関数の型をそのまま引き継いでプロップスを受け取ります。
  38. 2:47型を二重に書かずに済むため、取得側と表示側で食い違いが起きにくくなります。
  39. 2:52表示は、見出しと生成日時、そして書籍の配列をマップで回して、キーにアイディーを使いながらタイトルをリストに並べるだけです。
  40. 3:01取得と表示が、プロップスを境に分かれている点に注目してください。
  41. 3:05キーには並び順の番号ではなく、書籍ごとに安定したアイディーを使うことで、
  42. 3:09並び替えがあっても表示の対応がずれにくくなります。
  43. 3:14実行結果を確認します。
  44. 3:15カタログのユーアールエルを開くと、書籍のタイトルと生成日時が表示されます。
  45. 3:20処理の順序は、本番ビルドの時点でゲットスタティックプロップスが動き、そのプロップスからエイチティーエムエルが作られ、
  46. 3:27訪問者へは出来上がったページが配信される、という流れです。
  47. 3:33実務では、固定の配列をシーエムエスやディービーからの取得結果へ置き換えます。
  48. 3:38ただし置き換えるときは、取得に失敗した場合の扱いも一緒に設計してください。
  49. 3:44その注意は後のセクションで改めて扱います。
  50. 3:47生成日時はビルドのたびに変わるため、再ビルドしたかどうかを目で確かめる目印としても、
  51. 3:51この例は分かりやすい作りになっています。
  52. 3:56つまずきやすい点の一つ目は、プロップスの形です。
  53. 4:00プロップスは、ジェイソンとしてシリアライズできる値にしなければなりません。
  54. 4:06文字列、数値、真偽値、配列、素直なオブジェクトは渡せますが、日付オブジェクトをそのまま渡すことはできません。
  55. 4:14記事のコードが、日付をアイエスオー文字列へ変換してから返しているのは、そのためです。
  56. 4:21関数や、値が未定義のものも、渡す途中で落ちたり、意図しない形になったりします。
  57. 4:27ブラウザーへ渡す形を、取得側で明確に整えてから返す習慣を付けてください。
  58. 4:33迷ったときは、その値をジェイソンへ変換して元に戻したときに、情報が欠けずに残るかどうかを基準に考えると判断しやすくなります。
  59. 4:43二つ目は、秘密の情報の境界です。
  60. 4:45ゲットスタティックプロップス自体はサーバー側で動くため、環境変数からエーピーアイキーを使ってデータを取得すること自体は問題ありません。
  61. 4:54危険なのは、そのキーをプロップスへ入れてしまうことです。
  62. 4:57プロップスに入れた値は、出来上がったページと一緒に利用者へ届き、誰でも見られる状態になります。
  63. 5:03戻り値には、画面に表示するために必要なフィールドだけを含め、取得に使ったキーや内部の管理情報は含めないでください。
  64. 5:10サーバーで読む値と、公開する値を分ける意識が大切です。
  65. 5:13画面に表示しない値を、念のためという理由でプロップスへ含める習慣は避け、
  66. 5:17必要最小限の項目だけを返すようにしてください。
  67. 5:21三つ目は、アイエスアールと静的出力の混同です。
  68. 5:24リバリデートを指定すると、対応するサーバー環境では、一定の秒数が経過したあとのアクセスをきっかけにページが再生成されます。
  69. 5:33一方、ファイルを置くだけの純粋な静的出力では、秒数が経過してもファイルが勝手に更新されることはありません。
  70. 5:41記事の例は、ビルド時に値を確定できるため、静的出力に組み込めます。
  71. 5:46ただし、シーエムエスで内容を更新した場合は、再ビルドと再配置が必要です。
  72. 5:52どちらの配信方式で公開するかを先に決めてから、リバリデートを使うかどうかを選んでください。
  73. 5:59記事の生成日時も同じで、リバリデートがない静的出力では、前にビルドした日時のまま残り続ける点を確認しておきましょう。
  74. 6:07最後の注意は、取得失敗の扱いです。
  75. 6:10失敗したときに空の配列を返して握りつぶすと、記事が消えた成果物が、正常なページとして公開されてしまいます。
  76. 6:20失敗はビルドの失敗として扱い、公開を止める設計も必要です。
  77. 6:25確認課題として、配列へ書籍を一冊追加し、ビルドの前後でページを比較してください。
  78. 6:32続いて、日付をそのまま返した誤りの形と、アイエスオー文字列へ変換した場合の違いも確かめます。
  79. 6:40確認は開発サーバーだけでなく、本番用ビルドと公開先でも行いましょう。
  80. 6:45値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力や取得の問題に、
  81. 6:50公開前へ気付きやすくなります。
  82. 6:55まとめです。
  83. 6:56ゲットスタティックプロップスは、ページズルーターで、ビルド時にデータを取得し、
  84. 6:59プロップスとしてページへ渡す関数です。
  85. 7:03コンテキストから対象を受け取り、成功時はプロップスを返し、必要に応じてリバリデートやノットファウンドなども選べます。
  86. 7:10プロップスはジェイソンで渡せる形に整え、日付は文字列へ変換すること、そして秘密のキーをプロップスへ入れないことが大切です。
  87. 7:17配信方式が静的出力なら、更新は再ビルドで反映します。
  88. 7:20これでゲットスタティックプロップスは完了です。
  89. 7:23お疲れさまでした。
  90. 7:24迷ったときは、ビルド時に確定できるかどうかで判断してください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

getStaticPropsを単独の関数として学び、ビルド時のデータ取得、propsの型、公開される情報と秘密値の境界を確認します。

解説記事・サンプルコードを読む：getStaticPropsの使い方：ビルド時のデータをpropsへ渡す →