VIDEO LESSON

NextRequestの使い方：URL・Cookie・本文から入力を取り出すの解説動画

再生時間 7:16動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00今回はネクストリクエストの使い方です。
0:03ネクストリクエストは、ブラウザーなどからサーバーへ届いた要望、つまりリクエストの中身を読むための仕組みです。
0:12ユーアールエルに入った検索条件、クッキー、そしてジェイソン形式の本文、この三つの入口から入力を取り出す方法を学びます。
0:21題材は、検索ワードを受け取って検証する、小さなエーピーアイです。
0:25前回、答えを返すネクストレスポンスを学びましたが、今回はその逆向き、届いた入力を読む側の話です。
0:33処理の流れを追いながら、初めての方も安心して聞いてください。
0:37まず正体を確認します。
0:39ネクストリクエストは、ウェブ標準のリクエストという仕組みを、ネクストジェイエス向けに拡張したエーピーアイです。
0:46代表的な使い場所は、アップルーターのルートハンドラーで、関数の第一引数として受け取ります。
0:52ネクスト・スラッシュ・サーバーから、型として読み込んで使います。
0:57この記事の例は、ネクストジェイエス十五以降の書き方に合わせ、タイプスクリプト五・二以降を前提にします。
1:03ページズルーターとは配置先も実行場所も違うため、プロジェクトのルーターとバージョンを先に確認してください。
1:10サーバー側でだけ動く仕組み、という点も押さえておきましょう。
1:14入力の入口は三つあります。
1:16一つ目は、リクエスト・ドット・ネクストユーアールエルで、ユーアールエル全体の情報や検索条件を読みます。
1:23二つ目は、リクエスト・ドット・クッキーズで、ブラウザーから送られてきたクッキーを読みます。
1:29三つ目は、リクエスト・ドット・ジェイソンで、ポストなどで送られた本文を解析します。
1:35本文の解析は時間がかかる処理なので、結果を待ってから使う、非同期の書き方になります。
1:41どの情報が、どの入口から入ってくるのか、この対応表を頭に入れておくと、コードを読むスピードがぐっと上がります。
1:48まずはこの三つをセットで覚えてください。
1:51題材の全体像です。
1:52アプリ、エーピーアイ、サーチデモというフォルダーに、ルート・ティーエスというファイルを作り、
1:57ゲットの処理を書きます。
2:02たとえば、検索ワードとしてリアクトがユーアールエルに付いて届いたら、サーバーはその値を取り出し、
2:09問題がないか検証してから、ワードと文字数をジェイソンで返します。
2:15これは本物の検索エンジンにつなぐ例ではなく、入力を安全に受け取る練習のための小さなエーピーアイです。
2:24ユーアールエルから値を読む、検証する、結果を返す、という三段階の流れを意識して、
2:28次のコードを見ていきましょう。
2:33記事のコードです。
2:34まず、ネクストユーアールエルのサーチパラムスにある、ゲットオールという命令で、
2:39キューという名前の値を全部取り出します。
2:44一つだけ読む命令と違い、同じ名前が二つ届いた場合も見逃しません。
2:49数が二つ以上なら、キューは一つだけ指定できます、というエラーとステータス四百を返します。
2:57次に、先頭の値を取り出し、トリムで前後の空白を除きます。
3:01値がない場合は空文字として扱う書き方も入っています。
3:05最後に、長さが八十を超えたら長すぎます、と四百を返し、通ればワードと文字数を返します。
3:13キャッシュコントロールのノーストアを付け、検証つきの応答として返す点も確認してください。
3:20二つの読み方を使い分けます。
3:22ゲットは、名前が一致する最初の値を一つだけ返し、無ければヌルを返します。
3:28ゲットオールは、一致する値を配列で全部返します。
3:32今回のように、重複した指定をエラーにしたい場合は、ゲットオールで数えてから判断するのが確実です。
3:40実行例を確認します。
3:42ユーアールエルにキュー・イコール・リアクトと付けて開くと、クエリにリアクト、
3:46カウントに五が返ります。
3:50リアクトは五文字なので、その数が文字数として返ってきたわけです。
3:56取る前に数える、という発想は、入力検証の基本として他の場面でも役立ちます。
4:02本文の読み方です。
4:03ポストでジェイソンが送られてきたら、アウェイト・リクエスト・ドット・ジェイソンで解析し、
4:08結果のオブジェクトから値を取り出します。
4:13フォーム送信の場合は、フォームデータという命令を使います。
4:17大切な注意点があります。
4:19本文は一度しか読めない流れとして扱い、繰り返し読めると考えないことです。
4:24必要な解析を一回だけ行い、その結果を使い回してください。
4:28ジェイソンとして読めない本文が届くこともあるため、実際のアプリでは、読み取りに失敗したときの応答も用意しておくと安心です。
4:37解析は一回、結果を使い回す、これが本文読み取りの鉄則です。
4:41クッキーの読み方です。
4:43リクエスト・ドット・クッキーズ・ドット・ゲットで、名前を指定して受信した値を取り出します。
4:50存在するかどうかだけなら、ハズという命令でも確認できます。
4:55ここで方向の区別が重要です。
4:57リクエスト側のクッキーは、あくまで受信した値を読むためのものです。
5:03ここを書き換えても、ブラウザーへ保存の指示は出ません。
5:07保存させたいときは、前回学んだように、返却するレスポンス側でセットクッキーを設定します。
5:15読むのはネクストリクエスト、書くのはネクストレスポンス、と方向で覚えると混同しません。
5:22安全面の大切な話です。
5:23ネクストリクエストという型が付いていても、検索条件やヘッダーの中身が、信頼できる情報に変わるわけではありません。
5:31ユーアールエルや本文は、利用者が自由に書き換えられる場所だからです。
5:35だからこそ、長さや値の範囲をサーバー側で検証します。
5:39あわせて、パスワードのような秘密の値をユーアールエルに入れないこと、データベースへ値を渡すときは、
5:45そのまま文字列をつなげず、パラメーター化という安全な渡し方を使うことも必要です。
5:50型は形の保証であって、信頼の保証ではない。
5:53この一文を覚えておいてください。
5:55実行環境と、自分で試す課題です。
5:58この例は、リクエストのたびにユーアールエルを読むサーバー処理を必要とするため、
6:04アウトプットにエクスポートを指定した静的ファイルだけの配信では実行できません。
6:10ネクストジェイエスのサーバー実行環境か、別のエーピーアイを用意してください。
6:16確認課題は四つです。
6:18キューがない場合、前後に空白がある場合、キューを重複させた場合、そして八十一文字を入れた場合で、
6:22結果を比べてみましょう。
6:27なお絵文字の長さは、見た目の文字数と一致しないことがあります。
6:32要件が文字数なのかバイト数なのかも、あわせて決めておくと実務で困りません。
6:38まとめです。
6:38ネクストリクエストの入口は、ユーアールエルを読むネクストユーアールエル、
6:43受信クッキーを読むクッキーズ、本文を解析するジェイソンの三つでした。
6:48検索条件の重複はゲットオールで数えて弾き、値がない場合や長すぎる場合に備えて検証してから使います。
6:55本文の解析は一回だけ行い、クッキーは読む側と返す側の方向を分けて考えます。
7:00そして、型が付いても入力は信頼せず、サーバー側で必ず確かめることが安全な実装につながります。
7:06これでネクストリクエストの基本は完了です。
7:09お疲れさまでした。
7:10次回は、ゲットとポストを一つのファイルにまとめるルートハンドラーを学びます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

NextRequestはWeb標準のRequestを拡張するAPIです。nextUrlで検索条件を読み、CookieとJSON本文の扱い、入力検証の境界を学びます。

解説記事・サンプルコードを読む：NextRequestの使い方：URL・Cookie・本文から入力を取り出す →