SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

NextResponseの使い方：JSON・Cookie・リダイレクトを返すの解説動画

再生時間 7:34動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回はネクストレスポンスの使い方です。
  3. 0:03ネクストレスポンスは、ネクストジェイエスのサーバー側で、相手へ返す答え、
  4. 0:07つまりレスポンスを作るための仕組みです。
  5. 0:11ジェイソンの本文、ステータス、ヘッダー、クッキーを一つの例でまとめて理解します。
  6. 0:17題材は、画面のテーマ設定を受け取ってクッキーへ保存する、小さなエーピーアイです。
  7. 0:23最後にリダイレクトとの違いも整理しますので、初めての方も処理の流れを追いながら聞いてください。
  8. 0:30サーバーが何を返したかは、ステータスやクッキーの形で目に見えるため、通信の仕組みを学ぶ入口としても良い題材です。
  9. 0:38まず、使う場所を確認します。
  10. 0:39ネクストレスポンスは、ネクスト・スラッシュ・サーバーというモジュールから読み込み、
  11. 0:43アップルーターのサーバー側で使います。
  12. 0:47代表的な使い道は、ルートハンドラーと呼ばれるエーピーアイの処理です。
  13. 0:51この記事の例は、ネクストジェイエス十五以降の書き方に合わせ、タイプスクリプト五・二以降と、
  14. 0:55対応するノード・ジェイエスを前提にします。
  15. 0:59ページズルーターとは配置先も実行場所も違うため、プロジェクトのルーターとバージョンを先に確認してください。
  16. 1:06ブラウザー側の画面コンポーネントの中で使うものではない、という実行場所の意識が、
  17. 1:10エラーを減らす第一歩になります。
  18. 1:13基本の形は、ネクストレスポンス・ドット・ジェイソンです。
  19. 1:18第一引数に返したいデータを渡すと、ジェイソン形式のレスポンスが作られます。
  20. 1:23第二引数には、ステータスやヘッダーをまとめた設定を渡せます。
  21. 1:28たとえば成功なら二百、入力エラーなら四百や四百二十二といった具合です。
  22. 1:34そして大切なのは、作ったレスポンスを、そのままリターンすることです。
  23. 1:39この、作って、整えて、返す、という三つの流れが、すべての応用の土台になります。
  24. 1:45ジェイソンの本文は、オブジェクトを渡せば自動で文字列化され、コンテンツタイプもジェイソン用に設定されます。
  25. 1:54題材の全体像です。
  26. 1:55アプリ、エーピーアイ、テーマというフォルダーに、ルート・ティーエスというファイルを作り、
  27. 1:59ポストの処理を書きます。
  28. 2:03ブラウザーからは、テーマがダーク、というジェイソンが送られてきます。
  29. 2:08サーバーはまず本文を読み取り、テーマがライトかダークかを確認します。
  30. 2:13問題なければ、確認したテーマをジェイソンで返し、あわせてクッキーにも保存します。
  31. 2:19次に送られてくるリクエストで、そのクッキーを読み取れば、前回の設定を引き継げる、
  32. 2:23という仕組みです。
  33. 2:26流れを先に頭に入れておくと、次からのコードが、どの段階の話なのかを見失わずに読めます。
  34. 2:32コードの前半です。
  35. 2:34リクエスト・ドット・ジェイソンで本文を読み取りますが、壊れたジェイソンが送られることもあるため、
  36. 2:38トライとキャッチで囲みます。
  37. 2:43読めなかった場合は、その場でエラーのジェイソンとステータス四百を返します。
  38. 2:48次に値の検証です。
  39. 2:49本文がオブジェクトでない、テーマが含まれていない、ライトでもダークでもない、
  40. 2:54こうした場合はステータス四百二十二を返します。
  41. 2:58型のチェックだけでは防げない入力の問題を、ここで早めに弾くのがポイントです。
  42. 3:04四百は形式そのものの問題、四百二十二は中身の値の問題、と使い分けると、受け取る側も原因を判断しやすくなります。
  43. 3:12後半です。
  44. 3:12検証を通ったら、テーマを本文にしたジェイソンレスポンスを作ります。
  45. 3:17このときヘッダーに、キャッシュコントロールのノーストアを指定し、古い応答が使い回されないようにします。
  46. 3:25続いて、レスポンスのクッキーズ・ドット・セットで、テーマという名前のクッキーを設定します。
  47. 3:32有効期間は六十掛ける六十掛ける二十四で、一日分です。
  48. 3:36最後に、このレスポンス自身をリターンします。
  49. 3:40成功の応答とクッキーが、同じ一つの応答にまとまっている点を確認してください。
  50. 3:45キャッシュコントロールは、個人の設定を含む応答を、途中の仕組みに残さないための配慮でもあります。
  51. 3:53クッキーの設定項目を、一つずつ見ます。
  52. 3:56パスはスラッシュで、サイト全体で有効なクッキーにします。
  53. 4:01エイチティーティーピーオンリーを付けると、ブラウザーのジャバスクリプトからは、
  54. 4:06この値をドキュメント・ドット・クッキーで読めなくなります。
  55. 4:12セイムサイトのラックスは、クッキーを送る場面を絞るための指定です。
  56. 4:18セキュアは、本番環境でのみ有効にし、エイチティーティーピーエスでの運用が前提です。
  57. 4:24なお、このテーマのクッキーは表示設定用であり、ログインのセッションではありません。
  58. 4:31その線引きも覚えておきましょう。
  59. 4:34設定項目は、名前の意味が分かれば怖くありません。
  60. 4:38一覧で眺めるより、一つずつ役割を言葉にできることを目指しましょう。
  61. 4:44つまずきやすい点を紹介します。
  62. 4:46クッキーを設定したあとで、新しいレスポンスを作り直して返してしまうと、せっかく設定したクッキーが失われます。
  63. 4:54ブラウザーへ届くのは、最後にリターンしたレスポンスだけだからです。
  64. 4:59対策はシンプルで、生成、変更、リターンを、同じオブジェクトで完結させることです。
  65. 5:04クッキーが保存されない、ヘッダーが付かない、といった不具合に出会ったら、
  66. 5:09まず、設定したものと返したものが同じかどうかを確認してください。
  67. 5:14原因の多くはこの取り違えです。
  68. 5:17コードの行数が増えるほど、この種の取り違えは起きやすくなります。
  69. 5:21変数名をレスポンスで統一するのも有効です。
  70. 5:24似た名前の三つを区別します。
  71. 5:27リダイレクトは、利用者を別のユーアールエルへ移動させるもので、スライドのように、
  72. 5:32ネクストレスポンス・ドット・リダイレクトに移動先を渡して使います。
  73. 5:38リライトは、主にプロキシなどで、裏側の転送先を変える仕組みです。
  74. 5:43ネクストは、後続の処理へ進めるためのもので、ルートハンドラーでジェイソンを返す場面で使うものではありません。
  75. 5:51目的が、移動か、転送か、継続かをはっきりさせてから選ぶと、混同しなくなります。
  76. 5:57三つとも、レスポンスを作る仲間ではありますが、返す先と目的がまったく違う、
  77. 6:01という整理が大切です。
  78. 6:04実行環境の注意です。
  79. 6:06この例は、リクエストのたびに本文を読み、クッキーを付けるサーバー処理を必要とします。
  80. 6:11そのため、アウトプットにエクスポートを指定して作った、アウトという静的ファイルだけを配信する環境では実行できません。
  81. 6:19ネクストジェイエスのサーバー実行環境か、別のエーピーアイを用意してください。
  82. 6:24また確認は、開発サーバーだけで終わらせず、本番用ビルドと公開先でも行います。
  83. 6:29不正な値を送った場合の応答まで試すと、思わぬ入力の問題に早く気付けます。
  84. 6:34記事を読むだけならサーバー移行は要りませんが、サンプルを動かす環境は別に用意する、
  85. 6:38という区別も付けておきましょう。
  86. 6:41最後に、自分で試す課題です。
  87. 6:44ポストでダークを送り、開発者ツールのネットワーク画面と、クッキーの保存領域で、
  88. 6:50セットクッキーが届いているか確認してください。
  89. 6:55値を消す場合は、パスなどの条件を揃えて失効させます。
  90. 7:00まとめです。
  91. 7:01ネクストレスポンスでは、ジェイソンで応答を作り、ステータスとヘッダーを整え、
  92. 7:07クッキーはそのレスポンスに設定して、同じものを返します。
  93. 7:13リダイレクトとの使い分けと、サーバー環境が必要な点も押さえました。
  94. 7:19これでネクストレスポンスの基本は完了です。
  95. 7:22お疲れさまでした。
  96. 7:24分からなくなったら、作る、整える、同じものを返す、という三つの言葉に戻ってコードを見直してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

NextResponseでレスポンスを作る方法を紹介します。JSON本文、ステータス、ヘッダー、レスポンスCookieを1つの例で理解します。

解説記事・サンプルコードを読む：NextResponseの使い方：JSON・Cookie・リダイレクトを返す →