WEBVTT

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

2
00:00:00.916 --> 00:00:03.816
今回はネクストリクエストの使い方です。

3
00:00:03.816 --> 00:00:12.058
ネクストリクエストは、ブラウザーなどからサーバーへ届いた要望、つまりリクエストの中身を読むための仕組みです。

4
00:00:12.058 --> 00:00:21.063
ユーアールエルに入った検索条件、クッキー、そしてジェイソン形式の本文、この三つの入口から入力を取り出す方法を学びます。

5
00:00:21.063 --> 00:00:25.947
題材は、検索ワードを受け取って検証する、小さなエーピーアイです。

6
00:00:25.947 --> 00:00:33.273
前回、答えを返すネクストレスポンスを学びましたが、今回はその逆向き、届いた入力を読む側の話です。

7
00:00:33.273 --> 00:00:37.852
処理の流れを追いながら、初めての方も安心して聞いてください。

8
00:00:37.852 --> 00:00:39.327
まず正体を確認します。

9
00:00:39.327 --> 00:00:46.699
ネクストリクエストは、ウェブ標準のリクエストという仕組みを、ネクストジェイエス向けに拡張したエーピーアイです。

10
00:00:46.699 --> 00:00:52.732
代表的な使い場所は、アップルーターのルートハンドラーで、関数の第一引数として受け取ります。

11
00:00:52.732 --> 00:00:57.021
ネクスト・スラッシュ・サーバーから、型として読み込んで使います。

12
00:00:57.021 --> 00:01:03.858
この記事の例は、ネクストジェイエス十五以降の書き方に合わせ、タイプスクリプト五・二以降を前提にします。

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

14
00:01:10.962 --> 00:01:14.984
サーバー側でだけ動く仕組み、という点も押さえておきましょう。

15
00:01:14.984 --> 00:01:16.748
入力の入口は三つあります。

16
00:01:16.748 --> 00:01:23.666
一つ目は、リクエスト・ドット・ネクストユーアールエルで、ユーアールエル全体の情報や検索条件を読みます。

17
00:01:23.666 --> 00:01:29.770
二つ目は、リクエスト・ドット・クッキーズで、ブラウザーから送られてきたクッキーを読みます。

18
00:01:29.770 --> 00:01:35.332
三つ目は、リクエスト・ドット・ジェイソンで、ポストなどで送られた本文を解析します。

19
00:01:35.332 --> 00:01:41.030
本文の解析は時間がかかる処理なので、結果を待ってから使う、非同期の書き方になります。

20
00:01:41.030 --> 00:01:48.491
どの情報が、どの入口から入ってくるのか、この対応表を頭に入れておくと、コードを読むスピードがぐっと上がります。

21
00:01:48.491 --> 00:01:51.204
まずはこの三つをセットで覚えてください。

22
00:01:51.204 --> 00:01:52.703
題材の全体像です。

23
00:01:52.703 --> 00:01:57.534
アプリ、エーピーアイ、サーチデモというフォルダーに、ルート・ティーエスというファイルを作り、

24
00:01:57.534 --> 00:02:02.365
ゲットの処理を書きます。

25
00:02:02.365 --> 00:02:09.029
たとえば、検索ワードとしてリアクトがユーアールエルに付いて届いたら、サーバーはその値を取り出し、

26
00:02:09.029 --> 00:02:15.692
問題がないか検証してから、ワードと文字数をジェイソンで返します。

27
00:02:15.692 --> 00:02:24.022
これは本物の検索エンジンにつなぐ例ではなく、入力を安全に受け取る練習のための小さなエーピーアイです。

28
00:02:24.022 --> 00:02:28.603
ユーアールエルから値を読む、検証する、結果を返す、という三段階の流れを意識して、

29
00:02:28.603 --> 00:02:33.184
次のコードを見ていきましょう。

30
00:02:33.184 --> 00:02:34.674
記事のコードです。

31
00:02:34.674 --> 00:02:39.559
まず、ネクストユーアールエルのサーチパラムスにある、ゲットオールという命令で、

32
00:02:39.559 --> 00:02:44.443
キューという名前の値を全部取り出します。

33
00:02:44.443 --> 00:02:49.741
一つだけ読む命令と違い、同じ名前が二つ届いた場合も見逃しません。

34
00:02:49.741 --> 00:02:57.026
数が二つ以上なら、キューは一つだけ指定できます、というエラーとステータス四百を返します。

35
00:02:57.026 --> 00:03:01.662
次に、先頭の値を取り出し、トリムで前後の空白を除きます。

36
00:03:01.662 --> 00:03:05.967
値がない場合は空文字として扱う書き方も入っています。

37
00:03:05.967 --> 00:03:13.087
最後に、長さが八十を超えたら長すぎます、と四百を返し、通ればワードと文字数を返します。

38
00:03:13.087 --> 00:03:20.372
キャッシュコントロールのノーストアを付け、検証つきの応答として返す点も確認してください。

39
00:03:20.372 --> 00:03:22.716
二つの読み方を使い分けます。

40
00:03:22.716 --> 00:03:28.744
ゲットは、名前が一致する最初の値を一つだけ返し、無ければヌルを返します。

41
00:03:28.744 --> 00:03:32.763
ゲットオールは、一致する値を配列で全部返します。

42
00:03:32.763 --> 00:03:40.800
今回のように、重複した指定をエラーにしたい場合は、ゲットオールで数えてから判断するのが確実です。

43
00:03:40.800 --> 00:03:42.474
実行例を確認します。

44
00:03:42.474 --> 00:03:46.660
ユーアールエルにキュー・イコール・リアクトと付けて開くと、クエリにリアクト、

45
00:03:46.660 --> 00:03:50.846
カウントに五が返ります。

46
00:03:50.846 --> 00:03:56.205
リアクトは五文字なので、その数が文字数として返ってきたわけです。

47
00:03:56.205 --> 00:04:02.400
取る前に数える、という発想は、入力検証の基本として他の場面でも役立ちます。

48
00:04:02.400 --> 00:04:03.720
本文の読み方です。

49
00:04:03.720 --> 00:04:08.411
ポストでジェイソンが送られてきたら、アウェイト・リクエスト・ドット・ジェイソンで解析し、

50
00:04:08.411 --> 00:04:13.103
結果のオブジェクトから値を取り出します。

51
00:04:13.103 --> 00:04:17.354
フォーム送信の場合は、フォームデータという命令を使います。

52
00:04:17.354 --> 00:04:19.114
大切な注意点があります。

53
00:04:19.114 --> 00:04:24.392
本文は一度しか読めない流れとして扱い、繰り返し読めると考えないことです。

54
00:04:24.392 --> 00:04:28.497
必要な解析を一回だけ行い、その結果を使い回してください。

55
00:04:28.497 --> 00:04:37.440
ジェイソンとして読めない本文が届くこともあるため、実際のアプリでは、読み取りに失敗したときの応答も用意しておくと安心です。

56
00:04:37.440 --> 00:04:41.692
解析は一回、結果を使い回す、これが本文読み取りの鉄則です。

57
00:04:41.692 --> 00:04:43.497
クッキーの読み方です。

58
00:04:43.497 --> 00:04:50.882
リクエスト・ドット・クッキーズ・ドット・ゲットで、名前を指定して受信した値を取り出します。

59
00:04:50.882 --> 00:04:55.642
存在するかどうかだけなら、ハズという命令でも確認できます。

60
00:04:55.642 --> 00:04:57.939
ここで方向の区別が重要です。

61
00:04:57.939 --> 00:05:03.355
リクエスト側のクッキーは、あくまで受信した値を読むためのものです。

62
00:05:03.355 --> 00:05:07.786
ここを書き換えても、ブラウザーへ保存の指示は出ません。

63
00:05:07.786 --> 00:05:15.007
保存させたいときは、前回学んだように、返却するレスポンス側でセットクッキーを設定します。

64
00:05:15.007 --> 00:05:22.064
読むのはネクストリクエスト、書くのはネクストレスポンス、と方向で覚えると混同しません。

65
00:05:22.064 --> 00:05:23.537
安全面の大切な話です。

66
00:05:23.537 --> 00:05:31.033
ネクストリクエストという型が付いていても、検索条件やヘッダーの中身が、信頼できる情報に変わるわけではありません。

67
00:05:31.033 --> 00:05:35.584
ユーアールエルや本文は、利用者が自由に書き換えられる場所だからです。

68
00:05:35.584 --> 00:05:39.065
だからこそ、長さや値の範囲をサーバー側で検証します。

69
00:05:39.065 --> 00:05:45.022
あわせて、パスワードのような秘密の値をユーアールエルに入れないこと、データベースへ値を渡すときは、

70
00:05:45.022 --> 00:05:50.979
そのまま文字列をつなげず、パラメーター化という安全な渡し方を使うことも必要です。

71
00:05:50.979 --> 00:05:53.790
型は形の保証であって、信頼の保証ではない。

72
00:05:53.790 --> 00:05:55.932
この一文を覚えておいてください。

73
00:05:55.932 --> 00:05:58.425
実行環境と、自分で試す課題です。

74
00:05:58.425 --> 00:06:04.503
この例は、リクエストのたびにユーアールエルを読むサーバー処理を必要とするため、

75
00:06:04.503 --> 00:06:10.581
アウトプットにエクスポートを指定した静的ファイルだけの配信では実行できません。

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

77
00:06:16.502 --> 00:06:18.061
確認課題は四つです。

78
00:06:18.061 --> 00:06:22.736
キューがない場合、前後に空白がある場合、キューを重複させた場合、そして八十一文字を入れた場合で、

79
00:06:22.736 --> 00:06:27.411
結果を比べてみましょう。

80
00:06:27.411 --> 00:06:32.242
なお絵文字の長さは、見た目の文字数と一致しないことがあります。

81
00:06:32.242 --> 00:06:38.008
要件が文字数なのかバイト数なのかも、あわせて決めておくと実務で困りません。

82
00:06:38.008 --> 00:06:38.832
まとめです。

83
00:06:38.832 --> 00:06:43.638
ネクストリクエストの入口は、ユーアールエルを読むネクストユーアールエル、

84
00:06:43.638 --> 00:06:48.444
受信クッキーを読むクッキーズ、本文を解析するジェイソンの三つでした。

85
00:06:48.444 --> 00:06:55.173
検索条件の重複はゲットオールで数えて弾き、値がない場合や長すぎる場合に備えて検証してから使います。

86
00:06:55.173 --> 00:07:00.254
本文の解析は一回だけ行い、クッキーは読む側と返す側の方向を分けて考えます。

87
00:07:00.254 --> 00:07:06.570
そして、型が付いても入力は信頼せず、サーバー側で必ず確かめることが安全な実装につながります。

88
00:07:06.570 --> 00:07:09.454
これでネクストリクエストの基本は完了です。

89
00:07:09.454 --> 00:07:10.690
お疲れさまでした。

90
00:07:10.690 --> 00:07:15.908
次回は、ゲットとポストを一つのファイルにまとめるルートハンドラーを学びます。