SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

cookiesの使い方：サーバーでCookieを読み取り・更新するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:01今回は、クッキーズの使い方です。
  3. 0:03ブラウザーがリクエストと一緒に送ってくるクッキーを、サーバー側で読み取り、
  4. 0:08必要な場面では更新する方法を学びます。
  5. 0:13クッキーは、テーマ設定のような小さな値をブラウザーに保存しておく仕組みです。
  6. 0:19クッキーズは、その値をサーバーで扱うためのエーピーアイです。
  7. 0:24読むことと書き換えることでは、使える場所が違う点が、この回の大きなポイントです。
  8. 0:31何が読めて、どこで更新できるのかを、順に整理していきます。
  9. 0:35まず前提です。
  10. 0:36この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  11. 0:43ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  12. 0:49タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  13. 0:56配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  14. 1:02ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  15. 1:10前提がずれていると、同じコードでも動く場所が変わってしまいます。
  16. 1:14引数と戻り値を整理します。
  17. 1:16クッキーズ自体に引数はなく、アウェイトを付けて呼び出すと、クッキーストアと呼ばれる操作用のオブジェクトが返ってきます。
  18. 1:24値の読み取りはゲットです。
  19. 1:26名前を渡すと、名前と値を持つオブジェクトが返り、存在しなければアンディファインドが返ります。
  20. 1:33値だけが欲しい場合は、続けてドット・バリューで取り出します。
  21. 1:37ほかに、存在を確認するハズや、全件を取り出すゲットオールもあります。
  22. 1:42そして更新に使うセットやデリートは、後で説明するように、使える実行場所が限られます。
  23. 1:48まずは、ゲットがオブジェクトかアンディファインドを返す形を覚えてください。
  24. 1:53記事のコードです。
  25. 1:54ファイルは、アプリ、テーマプレビューというフォルダーのページ・ティーエスエックスです。
  26. 2:01最初にネクスト・スラッシュ・ヘッダーズからクッキーズを読み込みます。
  27. 2:07コンポーネントは非同期関数として定義し、アウェイト・クッキーズでクッキーストアを取得します。
  28. 2:14次にゲットでテーマを取り出し、オプショナルチェーンでバリューだけを変数ローへ入れます。
  29. 2:21テーマという変数には、ローがダークのときだけダーク、それ以外はライトが入ります。
  30. 2:28最後に、見出しと、選択中という文字とともに、その値を段落へ表示します。
  31. 2:34スライドでは表示崩れを避けるため、波括弧の埋め込みを文字列の連結で示しています。
  32. 2:40実行結果と処理の順序です。
  33. 2:42ブラウザーの開発者ツールで、自分のローカルサイトのテーマというクッキーをダークに設定し、
  34. 2:47ページを再読み込みすると、画面にはダークと表示されます。
  35. 2:52クッキーが未指定の場合や、ダーク以外の許可していない値が入っている場合は、
  36. 2:55ライトになります。
  37. 2:59つまりこの例は、届いた値をそのまま使うのではなく、許可した値かどうかを確認してから使っています。
  38. 3:06ここで大切なのは、表示設定のクッキーで動きを理解することです。
  39. 3:10クッキーに値が存在するだけでは、有効なセッションや、本人であることの証明にはならない、
  40. 3:14という境界を意識してください。
  41. 3:18値の判定を、純粋なロジックに切り出して確認します。
  42. 3:22関数リゾルブテーマは、受け取った値がダークと完全に一致する場合だけダークを返し、
  43. 3:27それ以外はすべてライトを返します。
  44. 3:31ダークはダーク、ライトはライト、アンディファインドはライト、不正な値もライト、
  45. 3:35空文字もライトです。
  46. 3:39ポイントは、未指定と不正な値を区別せず、安全な既定値へ倒していることです。
  47. 3:45クッキーの値は利用者が自由に書き換えられるため、届いた文字列を信頼せず、
  48. 3:49許可リストと照合する形が基本になります。
  49. 3:53この判定を値ごとに分けて確かめておくと、読み取り処理が安定します。
  50. 3:59ここからは更新の話です。
  51. 4:00サーバーコンポーネントは、リクエストのクッキーを読むことはできますが、ページを描画する最中に、
  52. 4:06セットでレスポンスのクッキーを変更することはできません。
  53. 4:11更新は、サーバーアクションかルートハンドラーの中で行います。
  54. 4:15画面のコードは、そのサーバーアクションの例です。
  55. 4:19アウェイト・クッキーズでストアを取得し、セットでテーマにダークを保存し、
  56. 4:23デリートでテーマを削除します。
  57. 4:26削除は、期限切れのクッキーを返すことで実現されます。
  58. 4:30また、ストリーミングが始まった後にヘッダーを変更することもできないため、
  59. 4:34更新のタイミングにも注意してください。
  60. 4:38機密値の扱いです。
  61. 4:40セッションクッキーの値を、そのままジェイエスエックスへ表示するサンプルにはしないでください。
  62. 4:48画面やログへ出すと、認証情報が第三者へ漏れる恐れがあります。
  63. 4:53認証用途でクッキーを使う場合は、値の存在だけを信じるのではなく、署名やセッションの照合が前提になります。
  64. 5:02あわせて、ジャバスクリプトから読めなくするエイチティーティーピーオンリー、
  65. 5:10暗号化通信でのみ送るセキュア、送信範囲を絞るセームサイト、さらに有効期限と失効の設計が必要です。
  66. 5:17クッキーは便利な保存先ですが、認証の根拠はサーバー側の照合にある、と覚えてください。
  67. 5:25静的出力との関係です。
  68. 5:26この例は、アクセスのたびに届くクッキーを読むため、リクエストごとのサーバー処理を必要とします。
  69. 5:33そのため、アウトプットにエクスポートを指定して生成したアウトフォルダーを配信するだけのサーバーでは実行できません。
  70. 5:42ビルド時点で値が決まらない情報は、静的なファイルには含められないためです。
  71. 5:48実際に使う場合は、ネクストジェイエスのサーバー実行環境を用意するか、別のエーピーアイで代替します。
  72. 5:55公開方法を決める前に、クッキーの読み取りが本当に必要か、必要ならどの環境で動かすかを確認してください。
  73. 6:03配信方式と機能の相性は、設計の早い段階で確かめることが重要です。
  74. 6:07確認課題です。
  75. 6:09テーマの値を、ダーク、ライト、未指定、不正な値の四パターンで試し、表示結果を比べてみてください。
  76. 6:17ダークだけがダークと表示され、残りはすべてライトになるはずです。
  77. 6:23そのうえで、クッキーの値は利用者が変えられるため、管理者権限の判定に直接使えない理由を説明してみてください。
  78. 6:33値が存在することと、正当な権限を持つことは別物だからです。
  79. 6:39確認は開発サーバーだけでなく、本番用ビルドと公開先でも行います。
  80. 6:45ユーアールエルを直接開く場合と、画面内のリンクから遷移する場合も分けて試すと確実です。
  81. 6:52まとめです。
  82. 6:53クッキーズは、アウェイトを付けて呼び出し、ゲットで名前を指定して値を取り出します。
  83. 6:59戻り値は、名前と値を持つオブジェクトか、アンディファインドです。
  84. 7:03読むことはサーバーコンポーネントでもできますが、セットやデリートによる更新は、
  85. 7:07サーバーアクションかルートハンドラーで行います。
  86. 7:11届いた値は許可リストで確認し、セッションクッキーを画面やログへ出さないことも大切です。
  87. 7:17そして、この機能はリクエストごとのサーバー処理が必要で、静的出力だけでは使えません。
  88. 7:22四パターンの表示結果を説明できれば、この回の目標は達成です。
  89. 7:26これでクッキーズは完了です。
  90. 7:28お疲れさまでした。
  91. 7:29次回はノットファウンドを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

cookiesでリクエストのCookieを読む方法を解説します。非同期API、Server Componentと更新処理の違い、セッション値を扱う際の境界を確認します。

解説記事・サンプルコードを読む：cookiesの使い方：サーバーでCookieを読み取り・更新する →