WEBVTT

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

2
00:00:01.004 --> 00:00:03.682
今回は、クッキーズの使い方です。

3
00:00:03.682 --> 00:00:08.367
ブラウザーがリクエストと一緒に送ってくるクッキーを、サーバー側で読み取り、

4
00:00:08.367 --> 00:00:13.053
必要な場面では更新する方法を学びます。

5
00:00:13.053 --> 00:00:19.412
クッキーは、テーマ設定のような小さな値をブラウザーに保存しておく仕組みです。

6
00:00:19.412 --> 00:00:24.433
クッキーズは、その値をサーバーで扱うためのエーピーアイです。

7
00:00:24.433 --> 00:00:31.127
読むことと書き換えることでは、使える場所が違う点が、この回の大きなポイントです。

8
00:00:31.127 --> 00:00:35.980
何が読めて、どこで更新できるのかを、順に整理していきます。

9
00:00:35.980 --> 00:00:36.954
まず前提です。

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

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

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

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

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

15
00:01:10.218 --> 00:01:14.672
前提がずれていると、同じコードでも動く場所が変わってしまいます。

16
00:01:14.672 --> 00:01:16.507
引数と戻り値を整理します。

17
00:01:16.507 --> 00:01:24.833
クッキーズ自体に引数はなく、アウェイトを付けて呼び出すと、クッキーストアと呼ばれる操作用のオブジェクトが返ってきます。

18
00:01:24.833 --> 00:01:26.668
値の読み取りはゲットです。

19
00:01:26.668 --> 00:01:33.159
名前を渡すと、名前と値を持つオブジェクトが返り、存在しなければアンディファインドが返ります。

20
00:01:33.159 --> 00:01:37.393
値だけが欲しい場合は、続けてドット・バリューで取り出します。

21
00:01:37.393 --> 00:01:42.191
ほかに、存在を確認するハズや、全件を取り出すゲットオールもあります。

22
00:01:42.191 --> 00:01:48.118
そして更新に使うセットやデリートは、後で説明するように、使える実行場所が限られます。

23
00:01:48.118 --> 00:01:53.340
まずは、ゲットがオブジェクトかアンディファインドを返す形を覚えてください。

24
00:01:53.340 --> 00:01:54.804
記事のコードです。

25
00:01:54.804 --> 00:02:01.801
ファイルは、アプリ、テーマプレビューというフォルダーのページ・ティーエスエックスです。

26
00:02:01.801 --> 00:02:07.334
最初にネクスト・スラッシュ・ヘッダーズからクッキーズを読み込みます。

27
00:02:07.334 --> 00:02:14.819
コンポーネントは非同期関数として定義し、アウェイト・クッキーズでクッキーストアを取得します。

28
00:02:14.819 --> 00:02:21.816
次にゲットでテーマを取り出し、オプショナルチェーンでバリューだけを変数ローへ入れます。

29
00:02:21.816 --> 00:02:28.324
テーマという変数には、ローがダークのときだけダーク、それ以外はライトが入ります。

30
00:02:28.324 --> 00:02:34.019
最後に、見出しと、選択中という文字とともに、その値を段落へ表示します。

31
00:02:34.019 --> 00:02:40.528
スライドでは表示崩れを避けるため、波括弧の埋め込みを文字列の連結で示しています。

32
00:02:40.528 --> 00:02:42.386
実行結果と処理の順序です。

33
00:02:42.386 --> 00:02:47.532
ブラウザーの開発者ツールで、自分のローカルサイトのテーマというクッキーをダークに設定し、

34
00:02:47.532 --> 00:02:52.678
ページを再読み込みすると、画面にはダークと表示されます。

35
00:02:52.678 --> 00:02:55.966
クッキーが未指定の場合や、ダーク以外の許可していない値が入っている場合は、

36
00:02:55.966 --> 00:02:59.253
ライトになります。

37
00:02:59.253 --> 00:03:06.114
つまりこの例は、届いた値をそのまま使うのではなく、許可した値かどうかを確認してから使っています。

38
00:03:06.114 --> 00:03:10.545
ここで大切なのは、表示設定のクッキーで動きを理解することです。

39
00:03:10.545 --> 00:03:14.691
クッキーに値が存在するだけでは、有効なセッションや、本人であることの証明にはならない、

40
00:03:14.691 --> 00:03:18.836
という境界を意識してください。

41
00:03:18.836 --> 00:03:22.756
値の判定を、純粋なロジックに切り出して確認します。

42
00:03:22.756 --> 00:03:27.225
関数リゾルブテーマは、受け取った値がダークと完全に一致する場合だけダークを返し、

43
00:03:27.225 --> 00:03:31.694
それ以外はすべてライトを返します。

44
00:03:31.694 --> 00:03:35.536
ダークはダーク、ライトはライト、アンディファインドはライト、不正な値もライト、

45
00:03:35.536 --> 00:03:39.378
空文字もライトです。

46
00:03:39.378 --> 00:03:45.180
ポイントは、未指定と不正な値を区別せず、安全な既定値へ倒していることです。

47
00:03:45.180 --> 00:03:49.571
クッキーの値は利用者が自由に書き換えられるため、届いた文字列を信頼せず、

48
00:03:49.571 --> 00:03:53.961
許可リストと照合する形が基本になります。

49
00:03:53.961 --> 00:03:59.136
この判定を値ごとに分けて確かめておくと、読み取り処理が安定します。

50
00:03:59.136 --> 00:04:00.862
ここからは更新の話です。

51
00:04:00.862 --> 00:04:06.256
サーバーコンポーネントは、リクエストのクッキーを読むことはできますが、ページを描画する最中に、

52
00:04:06.256 --> 00:04:11.650
セットでレスポンスのクッキーを変更することはできません。

53
00:04:11.650 --> 00:04:15.965
更新は、サーバーアクションかルートハンドラーの中で行います。

54
00:04:15.965 --> 00:04:19.417
画面のコードは、そのサーバーアクションの例です。

55
00:04:19.417 --> 00:04:23.085
アウェイト・クッキーズでストアを取得し、セットでテーマにダークを保存し、

56
00:04:23.085 --> 00:04:26.753
デリートでテーマを削除します。

57
00:04:26.753 --> 00:04:30.493
削除は、期限切れのクッキーを返すことで実現されます。

58
00:04:30.493 --> 00:04:34.448
また、ストリーミングが始まった後にヘッダーを変更することもできないため、

59
00:04:34.448 --> 00:04:38.404
更新のタイミングにも注意してください。

60
00:04:38.404 --> 00:04:40.001
機密値の扱いです。

61
00:04:40.001 --> 00:04:48.165
セッションクッキーの値を、そのままジェイエスエックスへ表示するサンプルにはしないでください。

62
00:04:48.165 --> 00:04:53.489
画面やログへ出すと、認証情報が第三者へ漏れる恐れがあります。

63
00:04:53.489 --> 00:05:02.717
認証用途でクッキーを使う場合は、値の存在だけを信じるのではなく、署名やセッションの照合が前提になります。

64
00:05:02.717 --> 00:05:10.260
あわせて、ジャバスクリプトから読めなくするエイチティーティーピーオンリー、

65
00:05:10.260 --> 00:05:17.802
暗号化通信でのみ送るセキュア、送信範囲を絞るセームサイト、さらに有効期限と失効の設計が必要です。

66
00:05:17.802 --> 00:05:25.256
クッキーは便利な保存先ですが、認証の根拠はサーバー側の照合にある、と覚えてください。

67
00:05:25.256 --> 00:05:26.907
静的出力との関係です。

68
00:05:26.907 --> 00:05:33.962
この例は、アクセスのたびに届くクッキーを読むため、リクエストごとのサーバー処理を必要とします。

69
00:05:33.962 --> 00:05:42.517
そのため、アウトプットにエクスポートを指定して生成したアウトフォルダーを配信するだけのサーバーでは実行できません。

70
00:05:42.517 --> 00:05:48.071
ビルド時点で値が決まらない情報は、静的なファイルには含められないためです。

71
00:05:48.071 --> 00:05:55.426
実際に使う場合は、ネクストジェイエスのサーバー実行環境を用意するか、別のエーピーアイで代替します。

72
00:05:55.426 --> 00:06:03.081
公開方法を決める前に、クッキーの読み取りが本当に必要か、必要ならどの環境で動かすかを確認してください。

73
00:06:03.081 --> 00:06:07.884
配信方式と機能の相性は、設計の早い段階で確かめることが重要です。

74
00:06:07.884 --> 00:06:09.171
確認課題です。

75
00:06:09.171 --> 00:06:17.992
テーマの値を、ダーク、ライト、未指定、不正な値の四パターンで試し、表示結果を比べてみてください。

76
00:06:17.992 --> 00:06:23.874
ダークだけがダークと表示され、残りはすべてライトになるはずです。

77
00:06:23.874 --> 00:06:33.798
そのうえで、クッキーの値は利用者が変えられるため、管理者権限の判定に直接使えない理由を説明してみてください。

78
00:06:33.798 --> 00:06:39.128
値が存在することと、正当な権限を持つことは別物だからです。

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

80
00:06:45.009 --> 00:06:52.912
ユーアールエルを直接開く場合と、画面内のリンクから遷移する場合も分けて試すと確実です。

81
00:06:52.912 --> 00:06:53.704
まとめです。

82
00:06:53.704 --> 00:06:59.119
クッキーズは、アウェイトを付けて呼び出し、ゲットで名前を指定して値を取り出します。

83
00:06:59.119 --> 00:07:03.344
戻り値は、名前と値を持つオブジェクトか、アンディファインドです。

84
00:07:03.344 --> 00:07:07.504
読むことはサーバーコンポーネントでもできますが、セットやデリートによる更新は、

85
00:07:07.504 --> 00:07:11.664
サーバーアクションかルートハンドラーで行います。

86
00:07:11.664 --> 00:07:17.342
届いた値は許可リストで確認し、セッションクッキーを画面やログへ出さないことも大切です。

87
00:07:17.342 --> 00:07:22.888
そして、この機能はリクエストごとのサーバー処理が必要で、静的出力だけでは使えません。

88
00:07:22.888 --> 00:07:26.850
四パターンの表示結果を説明できれば、この回の目標は達成です。

89
00:07:26.850 --> 00:07:28.699
これでクッキーズは完了です。

90
00:07:28.699 --> 00:07:29.887
お疲れさまでした。

91
00:07:29.887 --> 00:07:32.132
次回はノットファウンドを学びます。