WEBVTT

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

2
00:00:00.861 --> 00:00:03.157
今回は、ヘッダーズの使い方です。

3
00:00:03.157 --> 00:00:09.614
ブラウザーがサーバーへ送ってくるリクエストヘッダーを、サーバー側で読み取る方法を学びます。

4
00:00:09.614 --> 00:00:15.354
ヘッダーには、言語設定やブラウザーの情報など、アクセス時の情報が含まれています。

5
00:00:15.354 --> 00:00:20.377
ヘッダーズは、その情報を読み取るための読み取り専用のエーピーアイです。

6
00:00:20.377 --> 00:00:24.682
返すレスポンスのヘッダーを設定する仕組みとは役割が違います。

7
00:00:24.682 --> 00:00:28.700
また、送られてきた値を無条件に信頼しないことも大切です。

8
00:00:28.700 --> 00:00:33.148
何が読めて、どう扱うべきか、この二点を中心に整理していきます。

9
00:00:33.148 --> 00:00:34.122
まず前提です。

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

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

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

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

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

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

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

17
00:01:13.709 --> 00:01:15.865
ヘッダーズは引数を取りません。

18
00:01:15.865 --> 00:01:22.191
アウェイトを付けて呼び出すと、読み取り専用のヘッダーズ形式のオブジェクトが返ってきます。

19
00:01:22.191 --> 00:01:27.654
そのオブジェクトのゲットメソッドにヘッダー名を渡すと、値が文字列で返ります。

20
00:01:27.654 --> 00:01:30.530
値が送られていなければ、ヌルが返ります。

21
00:01:30.530 --> 00:01:35.849
つまり、値がある場合とない場合の両方を想定してコードを書く必要があります。

22
00:01:35.849 --> 00:01:42.319
読み取り専用なので、このオブジェクトを通してリクエストの内容を書き換えることはできません。

23
00:01:42.319 --> 00:01:45.985
呼び出し元が送る情報を、そのまま本人確認や所在地の証明として扱わないことも、

24
00:01:45.985 --> 00:01:49.651
記事が強調している点です。

25
00:01:49.651 --> 00:01:53.820
まずはゲットで一つの値を安全に取り出す形を覚えてください。

26
00:01:53.820 --> 00:01:55.203
記事のコードです。

27
00:01:55.203 --> 00:02:01.505
ファイルは、アプリ、ヘッダーデモというフォルダーのページ・ティーエスエックスです。

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

29
00:02:06.730 --> 00:02:13.647
コンポーネントは非同期関数として定義し、アウェイト・ヘッダーズで受信ヘッダーを取得します。

30
00:02:13.647 --> 00:02:18.719
次にゲットでアクセプト・ランゲージを取り出し、変数ローへ入れます。

31
00:02:18.719 --> 00:02:25.174
値がある場合は先頭八十字までに切り取り、値がなければ指定なしという文字列を使います。

32
00:02:25.174 --> 00:02:27.325
これがランゲージヒントです。

33
00:02:27.325 --> 00:02:33.012
最後に、見出しと言語ヘッダーという文字とともに、その値を段落へ表示します。

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

35
00:02:39.160 --> 00:02:41.001
実行結果と処理の順序です。

36
00:02:41.001 --> 00:02:48.081
ブラウザーからアクセスすると、そのブラウザーの言語設定に応じたアクセプト・ランゲージが表示されます。

37
00:02:48.081 --> 00:02:52.329
たとえば日本語環境であれば、日本語を優先する内容が届きます。

38
00:02:52.329 --> 00:02:56.718
ただしこれは、ユーザーが希望する言語を示すヒントにすぎません。

39
00:02:56.718 --> 00:03:01.532
本人であることや、所在地を証明する情報ではない点に注意してください。

40
00:03:01.532 --> 00:03:08.612
記事の例では、値の長さを八十字までに制限し、通常のジェイエスエックスのテキストとして表示しています。

41
00:03:08.612 --> 00:03:13.851
ヘッダーの内容を、そのままエイチティーエムエルへ挿入する使い方は避けます。

42
00:03:13.851 --> 00:03:19.940
外部から来た値を、長さと表示方法の両面で安全に扱うことが、この例の大切なポイントです。

43
00:03:19.940 --> 00:03:24.554
値の整え方を、純粋なロジックに切り出して確認します。

44
00:03:24.554 --> 00:03:29.967
関数トゥーヒントは、受け取ったローの値があればスライスで先頭八十字までに切り取り、

45
00:03:29.967 --> 00:03:35.380
ヌルや未定義の場合は指定なしを返します。

46
00:03:35.380 --> 00:03:38.219
短い値であればそのまま返ります。

47
00:03:38.219 --> 00:03:42.656
百文字の長い値であれば、先頭八十字だけが残ります。

48
00:03:42.656 --> 00:03:51.352
ここで注意したいのは、空文字はヌルではないため、フォールバックは働かず空文字がそのまま返る点です。

49
00:03:51.352 --> 00:03:58.983
オプショナルチェーンとヌル合体演算子の組み合わせは、欠落への対処としてよく使う形です。

50
00:03:58.983 --> 00:04:06.792
どの場合にどの結果になるかを、値ごとに分けて確かめておくと、ヘッダーの扱いが安定します。

51
00:04:06.792 --> 00:04:08.811
つまずきやすい使い分けです。

52
00:04:08.811 --> 00:04:13.425
ヘッダーズが返すのは、あくまで受信したリクエストのヘッダーです。

53
00:04:13.425 --> 00:04:18.759
ブラウザーへ返すレスポンスのヘッダーを設定するエーピーアイではありません。

54
00:04:18.759 --> 00:04:23.013
たとえばキャッシュコントロールのような返却側の指定は、ルートハンドラーのレスポンスや、

55
00:04:23.013 --> 00:04:27.266
適切なサーバー設定側で行います。

56
00:04:27.266 --> 00:04:31.376
名前が似ているため混同しやすいですが、入ってくる情報を読むのか、出ていく情報に付けるのか、

57
00:04:31.376 --> 00:04:35.485
方向で区別してください。

58
00:04:35.485 --> 00:04:42.118
読み取りたいときはヘッダーズ、返したい値を付けたいときはレスポンス側、と覚えると迷いません。

59
00:04:42.118 --> 00:04:47.020
この区別は、クッキーズなど近いエーピーアイを学ぶときにも役立ちます。

60
00:04:47.020 --> 00:04:49.746
転送ヘッダーと認証情報の注意です。

61
00:04:49.746 --> 00:04:58.564
エックス・フォワーデッド・フォーやホストといった値は、一見すると接続元やアクセス先を示しているように見えます。

62
00:04:58.564 --> 00:05:06.260
しかし、それらを信頼できるかどうかは、前段のプロキシが何を上書きし、何を検証するかに依存します。

63
00:05:06.260 --> 00:05:11.230
構成によっては、利用者が値を偽って送ることもできてしまいます。

64
00:05:11.230 --> 00:05:16.521
そのため、認証やアクセス制御の根拠として安易に使わないでください。

65
00:05:16.521 --> 00:05:24.858
もう一つ、受信したオーソリゼーションやクッキーを、外部のユーアールエルへ丸ごと転送しないことも大切です。

66
00:05:24.858 --> 00:05:30.469
認証情報が意図しない相手へ渡ると、なりすましにつながる恐れがあります。

67
00:05:30.469 --> 00:05:35.600
ヘッダーは便利な情報源ですが、信頼の境界を意識して扱いましょう。

68
00:05:35.600 --> 00:05:37.274
静的出力との関係です。

69
00:05:37.274 --> 00:05:45.340
この例は、アクセスのたびに変わるリクエストヘッダーを読むため、リクエストごとのサーバー処理を必要とします。

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

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

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

73
00:06:07.102 --> 00:06:14.102
公開方法を決める前に、ヘッダーが本当に必要か、必要ならどの環境で動かすかを確認してください。

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

75
00:06:18.972 --> 00:06:20.016
確認課題です。

76
00:06:20.016 --> 00:06:26.727
カールのエイチオプションでアクセプト・ランゲージを変更し、表示結果を比較してみてください。

77
00:06:26.727 --> 00:06:32.991
たとえば英語を指定した場合と日本語を指定した場合で、表示がどう変わるかを確認します。

78
00:06:32.991 --> 00:06:37.614
値が欠落した場合と、とても長い値を送った場合も試してください。

79
00:06:37.614 --> 00:06:42.833
欠落では指定なしが表示され、長い値では先頭八十字までに収まるはずです。

80
00:06:42.833 --> 00:06:46.860
あわせて、表示用途と認証用途の違いも整理してください。

81
00:06:46.860 --> 00:06:52.527
ヘッダーは表示のヒントには使えても、認証の根拠にはならない、という区別です。

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

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

84
00:07:03.712 --> 00:07:04.527
まとめです。

85
00:07:04.527 --> 00:07:10.098
ヘッダーズは、アウェイトを付けて呼び出し、ゲットで名前を指定して値を取り出します。

86
00:07:10.098 --> 00:07:14.175
戻り値は文字列かヌルで、オブジェクト自体は読み取り専用です。

87
00:07:14.175 --> 00:07:21.512
返すレスポンスのヘッダーを設定する仕組みではないため、キャッシュコントロールなどはレスポンス側で指定します。

88
00:07:21.512 --> 00:07:27.899
転送ヘッダーを信頼できるかは前段の構成次第であり、認証情報を外部へ丸ごと転送してはいけません。

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

90
00:07:33.606 --> 00:07:39.584
カールで値を変えて結果を比べ、欠落と長い値の動きを説明できれば、この回の目標は達成です。

91
00:07:39.584 --> 00:07:41.487
これでヘッダーズは完了です。

92
00:07:41.487 --> 00:07:42.710
お疲れさまでした。

93
00:07:42.710 --> 00:07:44.612
次回はクッキーズを学びます。