WEBVTT

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

2
00:00:00.866 --> 00:00:03.607
今回はネクストレスポンスの使い方です。

3
00:00:03.607 --> 00:00:07.647
ネクストレスポンスは、ネクストジェイエスのサーバー側で、相手へ返す答え、

4
00:00:07.647 --> 00:00:11.687
つまりレスポンスを作るための仕組みです。

5
00:00:11.687 --> 00:00:17.459
ジェイソンの本文、ステータス、ヘッダー、クッキーを一つの例でまとめて理解します。

6
00:00:17.459 --> 00:00:23.230
題材は、画面のテーマ設定を受け取ってクッキーへ保存する、小さなエーピーアイです。

7
00:00:23.230 --> 00:00:30.012
最後にリダイレクトとの違いも整理しますので、初めての方も処理の流れを追いながら聞いてください。

8
00:00:30.012 --> 00:00:38.092
サーバーが何を返したかは、ステータスやクッキーの形で目に見えるため、通信の仕組みを学ぶ入口としても良い題材です。

9
00:00:38.092 --> 00:00:39.854
まず、使う場所を確認します。

10
00:00:39.854 --> 00:00:43.630
ネクストレスポンスは、ネクスト・スラッシュ・サーバーというモジュールから読み込み、

11
00:00:43.630 --> 00:00:47.406
アップルーターのサーバー側で使います。

12
00:00:47.406 --> 00:00:51.685
代表的な使い道は、ルートハンドラーと呼ばれるエーピーアイの処理です。

13
00:00:51.685 --> 00:00:55.839
この記事の例は、ネクストジェイエス十五以降の書き方に合わせ、タイプスクリプト五・二以降と、

14
00:00:55.839 --> 00:00:59.993
対応するノード・ジェイエスを前提にします。

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

16
00:01:06.664 --> 00:01:10.188
ブラウザー側の画面コンポーネントの中で使うものではない、という実行場所の意識が、

17
00:01:10.188 --> 00:01:13.712
エラーを減らす第一歩になります。

18
00:01:13.712 --> 00:01:18.128
基本の形は、ネクストレスポンス・ドット・ジェイソンです。

19
00:01:18.128 --> 00:01:23.963
第一引数に返したいデータを渡すと、ジェイソン形式のレスポンスが作られます。

20
00:01:23.963 --> 00:01:28.694
第二引数には、ステータスやヘッダーをまとめた設定を渡せます。

21
00:01:28.694 --> 00:01:34.213
たとえば成功なら二百、入力エラーなら四百や四百二十二といった具合です。

22
00:01:34.213 --> 00:01:39.575
そして大切なのは、作ったレスポンスを、そのままリターンすることです。

23
00:01:39.575 --> 00:01:45.726
この、作って、整えて、返す、という三つの流れが、すべての応用の土台になります。

24
00:01:45.726 --> 00:01:54.084
ジェイソンの本文は、オブジェクトを渡せば自動で文字列化され、コンテンツタイプもジェイソン用に設定されます。

25
00:01:54.084 --> 00:01:55.405
題材の全体像です。

26
00:01:55.405 --> 00:01:59.516
アプリ、エーピーアイ、テーマというフォルダーに、ルート・ティーエスというファイルを作り、

27
00:01:59.516 --> 00:02:03.627
ポストの処理を書きます。

28
00:02:03.627 --> 00:02:08.619
ブラウザーからは、テーマがダーク、というジェイソンが送られてきます。

29
00:02:08.619 --> 00:02:13.611
サーバーはまず本文を読み取り、テーマがライトかダークかを確認します。

30
00:02:13.611 --> 00:02:19.484
問題なければ、確認したテーマをジェイソンで返し、あわせてクッキーにも保存します。

31
00:02:19.484 --> 00:02:23.081
次に送られてくるリクエストで、そのクッキーを読み取れば、前回の設定を引き継げる、

32
00:02:23.081 --> 00:02:26.679
という仕組みです。

33
00:02:26.679 --> 00:02:32.992
流れを先に頭に入れておくと、次からのコードが、どの段階の話なのかを見失わずに読めます。

34
00:02:32.992 --> 00:02:34.288
コードの前半です。

35
00:02:34.288 --> 00:02:38.753
リクエスト・ドット・ジェイソンで本文を読み取りますが、壊れたジェイソンが送られることもあるため、

36
00:02:38.753 --> 00:02:43.217
トライとキャッチで囲みます。

37
00:02:43.217 --> 00:02:48.546
読めなかった場合は、その場でエラーのジェイソンとステータス四百を返します。

38
00:02:48.546 --> 00:02:49.842
次に値の検証です。

39
00:02:49.842 --> 00:02:54.234
本文がオブジェクトでない、テーマが含まれていない、ライトでもダークでもない、

40
00:02:54.234 --> 00:02:58.627
こうした場合はステータス四百二十二を返します。

41
00:02:58.627 --> 00:03:04.099
型のチェックだけでは防げない入力の問題を、ここで早めに弾くのがポイントです。

42
00:03:04.099 --> 00:03:12.020
四百は形式そのものの問題、四百二十二は中身の値の問題、と使い分けると、受け取る側も原因を判断しやすくなります。

43
00:03:12.020 --> 00:03:12.791
後半です。

44
00:03:12.791 --> 00:03:17.877
検証を通ったら、テーマを本文にしたジェイソンレスポンスを作ります。

45
00:03:17.877 --> 00:03:25.738
このときヘッダーに、キャッシュコントロールのノーストアを指定し、古い応答が使い回されないようにします。

46
00:03:25.738 --> 00:03:32.674
続いて、レスポンスのクッキーズ・ドット・セットで、テーマという名前のクッキーを設定します。

47
00:03:32.674 --> 00:03:36.681
有効期間は六十掛ける六十掛ける二十四で、一日分です。

48
00:03:36.681 --> 00:03:40.072
最後に、このレスポンス自身をリターンします。

49
00:03:40.072 --> 00:03:45.930
成功の応答とクッキーが、同じ一つの応答にまとまっている点を確認してください。

50
00:03:45.930 --> 00:03:53.328
キャッシュコントロールは、個人の設定を含む応答を、途中の仕組みに残さないための配慮でもあります。

51
00:03:53.328 --> 00:03:56.510
クッキーの設定項目を、一つずつ見ます。

52
00:03:56.510 --> 00:04:01.199
パスはスラッシュで、サイト全体で有効なクッキーにします。

53
00:04:01.199 --> 00:04:06.892
エイチティーティーピーオンリーを付けると、ブラウザーのジャバスクリプトからは、

54
00:04:06.892 --> 00:04:12.586
この値をドキュメント・ドット・クッキーで読めなくなります。

55
00:04:12.586 --> 00:04:18.112
セイムサイトのラックスは、クッキーを送る場面を絞るための指定です。

56
00:04:18.112 --> 00:04:24.978
セキュアは、本番環境でのみ有効にし、エイチティーティーピーエスでの運用が前提です。

57
00:04:24.978 --> 00:04:31.844
なお、このテーマのクッキーは表示設定用であり、ログインのセッションではありません。

58
00:04:31.844 --> 00:04:34.523
その線引きも覚えておきましょう。

59
00:04:34.523 --> 00:04:38.542
設定項目は、名前の意味が分かれば怖くありません。

60
00:04:38.542 --> 00:04:44.068
一覧で眺めるより、一つずつ役割を言葉にできることを目指しましょう。

61
00:04:44.068 --> 00:04:46.275
つまずきやすい点を紹介します。

62
00:04:46.275 --> 00:04:54.219
クッキーを設定したあとで、新しいレスポンスを作り直して返してしまうと、せっかく設定したクッキーが失われます。

63
00:04:54.219 --> 00:04:59.074
ブラウザーへ届くのは、最後にリターンしたレスポンスだけだからです。

64
00:04:59.074 --> 00:05:04.959
対策はシンプルで、生成、変更、リターンを、同じオブジェクトで完結させることです。

65
00:05:04.959 --> 00:05:09.962
クッキーが保存されない、ヘッダーが付かない、といった不具合に出会ったら、

66
00:05:09.962 --> 00:05:14.964
まず、設定したものと返したものが同じかどうかを確認してください。

67
00:05:14.964 --> 00:05:17.171
原因の多くはこの取り違えです。

68
00:05:17.171 --> 00:05:21.878
コードの行数が増えるほど、この種の取り違えは起きやすくなります。

69
00:05:21.878 --> 00:05:24.968
変数名をレスポンスで統一するのも有効です。

70
00:05:24.968 --> 00:05:27.121
似た名前の三つを区別します。

71
00:05:27.121 --> 00:05:32.735
リダイレクトは、利用者を別のユーアールエルへ移動させるもので、スライドのように、

72
00:05:32.735 --> 00:05:38.349
ネクストレスポンス・ドット・リダイレクトに移動先を渡して使います。

73
00:05:38.349 --> 00:05:43.270
リライトは、主にプロキシなどで、裏側の転送先を変える仕組みです。

74
00:05:43.270 --> 00:05:51.575
ネクストは、後続の処理へ進めるためのもので、ルートハンドラーでジェイソンを返す場面で使うものではありません。

75
00:05:51.575 --> 00:05:57.574
目的が、移動か、転送か、継続かをはっきりさせてから選ぶと、混同しなくなります。

76
00:05:57.574 --> 00:06:01.265
三つとも、レスポンスを作る仲間ではありますが、返す先と目的がまったく違う、

77
00:06:01.265 --> 00:06:04.956
という整理が大切です。

78
00:06:04.956 --> 00:06:06.283
実行環境の注意です。

79
00:06:06.283 --> 00:06:11.854
この例は、リクエストのたびに本文を読み、クッキーを付けるサーバー処理を必要とします。

80
00:06:11.854 --> 00:06:19.548
そのため、アウトプットにエクスポートを指定して作った、アウトという静的ファイルだけを配信する環境では実行できません。

81
00:06:19.548 --> 00:06:24.589
ネクストジェイエスのサーバー実行環境か、別のエーピーアイを用意してください。

82
00:06:24.589 --> 00:06:29.629
また確認は、開発サーバーだけで終わらせず、本番用ビルドと公開先でも行います。

83
00:06:29.629 --> 00:06:34.405
不正な値を送った場合の応答まで試すと、思わぬ入力の問題に早く気付けます。

84
00:06:34.405 --> 00:06:38.185
記事を読むだけならサーバー移行は要りませんが、サンプルを動かす環境は別に用意する、

85
00:06:38.185 --> 00:06:41.966
という区別も付けておきましょう。

86
00:06:41.966 --> 00:06:44.484
最後に、自分で試す課題です。

87
00:06:44.484 --> 00:06:50.061
ポストでダークを送り、開発者ツールのネットワーク画面と、クッキーの保存領域で、

88
00:06:50.061 --> 00:06:55.638
セットクッキーが届いているか確認してください。

89
00:06:55.638 --> 00:07:00.315
値を消す場合は、パスなどの条件を揃えて失効させます。

90
00:07:00.315 --> 00:07:01.394
まとめです。

91
00:07:01.394 --> 00:07:07.330
ネクストレスポンスでは、ジェイソンで応答を作り、ステータスとヘッダーを整え、

92
00:07:07.330 --> 00:07:13.267
クッキーはそのレスポンスに設定して、同じものを返します。

93
00:07:13.267 --> 00:07:19.203
リダイレクトとの使い分けと、サーバー環境が必要な点も押さえました。

94
00:07:19.203 --> 00:07:22.981
これでネクストレスポンスの基本は完了です。

95
00:07:22.981 --> 00:07:24.600
お疲れさまでした。

96
00:07:24.600 --> 00:07:33.954
分からなくなったら、作る、整える、同じものを返す、という三つの言葉に戻ってコードを見直してみてください。