SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

Route Handlersの使い方：GET・POSTとJSONの入力検証の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00今回はルートハンドラーズの使い方です。
  3. 0:03ルートハンドラーズは、画面を表示する代わりに、エイチティーティーピーの要望を受けて答えを返す、
  4. 0:08サーバー側の仕組みです。
  5. 0:13ゲットでエーピーアイの説明を返し、ポストでジェイソンを受け取って検証する流れを学びます。
  6. 0:20題材は、送られたメッセージをそのまま返す、小さなエコーエーピーアイです。
  7. 0:26前回まで入力を読む側と答えを返す側を別々に学びましたが、今回はその二つを一つのファイルにまとめる回です。
  8. 0:34処理の順番に注目しながら聞いてください。
  9. 0:37まず置き場所を確認します。
  10. 0:39ルートハンドラーは、アップルーターのアプリ、エーピーアイというフォルダーの下に、
  11. 0:43ルート・ティーエスというファイルを作って書きます。
  12. 0:47ファイルの中では、ゲットやポストといった、エイチティーティーピーのメソッド名と同じ名前の関数をエクスポートします。
  13. 0:55この記事の例は、ネクストジェイエス十五以降の書き方に合わせ、タイプスクリプト五・二以降を前提にします。
  14. 1:02ページズルーターのエーピーアイルートとは、配置先も書き方も違うため、プロジェクトのルーターとバージョンを先に確認してください。
  15. 1:10フォルダーの階層がそのままアドレスになるため、置き場所を間違えるとアクセスしても見つかりません。
  16. 1:17ファイル名とフォルダー名は、写し間違いがないか最初に確かめましょう。
  17. 1:21基本の形です。
  18. 1:22関数は、届いた要望を表すリクエストを受け取り、答えを表すレスポンスを返します。
  19. 1:28ウェブ標準の仕組みをそのまま使う書き方で、ページズルーターで使った、リクエストとレスポンスを別々の引数で受け取るデフォルトハンドラーとは形が異なります。
  20. 1:39本文を読む処理は時間がかかるため、関数は非同期で書き、結果を待ってから次の判定へ進みます。
  21. 1:46受け取る、検証する、返す。
  22. 1:48この三段階が、ルートハンドラーの共通の骨組みです。
  23. 1:52まずはこの形をしっかり覚えてください。
  24. 1:54画面を表示するページのファイルとは役割が分かれていて、このファイルはデータのやり取りだけを担当します。
  25. 2:02題材の全体像です。
  26. 2:03エーピーアイ、エコーというアドレスにゲットでアクセスすると、エーピーアイの説明が返ります。
  27. 2:11ポストでメッセージを送ると、サーバーは内容を検証し、問題がなければ、前後の空白を取り除いたメッセージを返します。
  28. 2:20保存処理はなく、送受信を通じてステータスと本文の役割を確認する練習用のエーピーアイです。
  29. 2:28失敗の返し方は三種類に分けます。
  30. 2:30送り方の形式が違う場合は四百十五、ジェイソンとして読めない場合は四百、値はあるが条件を満たさない場合は四百二十二です。
  31. 2:40記事のコード、前半です。
  32. 2:42ゲットは引数なしで、サービス名と受け付け形式をジェイソンで返します。
  33. 2:47ポストは、まずリクエストのヘッダーからコンテンツタイプを取り出し、セミコロンより前だけを切り取って小文字にそろえます。
  34. 2:56これがアプリケーション・スラッシュ・ジェイソンでなければ、ジェイソンで送信してください、
  35. 3:01というエラーと四百十五を返します。
  36. 3:05そのあと、本文をジェイソンとして読みます。
  37. 3:08読み取りは失敗する前提で囲み、失敗したら形式が不正です、と四百を返す点が大切です。
  38. 3:14文字の余分な空白を取り除く処理や、大文字と小文字をそろえる処理を挟んでいるのは、
  39. 3:19書き方のばらつきで判定がぶれないようにするためです。
  40. 3:24コードの後半、入力検証です。
  41. 3:26読み取った本文がオブジェクトであること、ヌルでないこと、メッセージという項目があることを順に確かめます。
  42. 3:34さらに、メッセージが文字列で、空白だけを取り除いた長さが一以上、元の長さが二百以下であることも確認します。
  43. 3:43一つでも外れたら、メッセージは一から二百文字です、というエラーと四百二十二を返します。
  44. 3:49すべて通れば、空白を取り除いたメッセージを返し、キャッシュコントロールのノーストアを付けて、
  45. 3:54検証つきの応答にします。
  46. 3:59動作はカールで試せます。
  47. 4:00ローカルホスト三千番のエーピーアイ、エコーへ、コンテンツタイプをアプリケーション・スラッシュ・ジェイソンと指定し、
  48. 4:06メッセージに、こんにちは、と入れてポストします。
  49. 4:11成功するとエイチティーティーピー二百とメッセージが返ります。
  50. 4:15アイというオプションを付けると、ステータスやヘッダーも一緒に見えます。
  51. 4:20確認課題として、正常なメッセージ、空文字、不正なジェイソン、別のコンテンツタイプの四パターンを送り、
  52. 4:27それぞれのステータスが二百、四百二十二、四百、四百十五になることを自分の目で確かめてみてください。
  53. 4:34開発サーバーだけでなく、本番用に組み立てた状態や、公開先でも同じ確認をしておくと、
  54. 4:38環境差による失敗に早く気づけます。
  55. 4:42三つのエラーを使い分ける考え方です。
  56. 4:45四百十五は、ジェイソン以外の形式で送られてきた、という形式そのものの不一致です。
  57. 4:51四百は、ジェイソンと名乗っているのに本文が壊れていて読み取れない場合です。
  58. 4:57四百二十二は、本文は読めたものの、必須項目がない、型が違う、長さが範囲外といった、
  59. 5:01値の条件を満たさない場合です。
  60. 5:05どこで失敗したかを分けて返すと、送る側は直すべき場所がすぐに分かります。
  61. 5:11エラーの本文には、内部の詳しいエラー情報や秘密の値を出さないことも、あわせて守ってください。
  62. 5:18実行環境の注意です。
  63. 5:20ネクストジェイエス十五以降、ゲットのルートハンドラーは既定ではキャッシュされません。
  64. 5:25ただし設定やデータ取得側のキャッシュは別に存在するため、個別ユーザーの情報を共有キャッシュへ入れないよう注意してください。
  65. 5:33また、この例はリクエストごとのサーバー処理を必要とするため、アウトプットにエクスポートを指定した静的ファイルだけの配信では実行できません。
  66. 5:43ネクストジェイエスのサーバー実行環境か、別のエーピーアイを用意する必要があります。
  67. 5:48動く場所を先に決めることが大事です。
  68. 5:51成功応答にノーストアを付けていたのも、検証した結果を古いキャッシュで使い回さないための配慮です。
  69. 5:57つまずきやすい点です。
  70. 5:59この例のレスポンス・ドット・ジェイソンをタイプスクリプトで使うには、対応する型定義が必要です。
  71. 6:06古い構成では、ネクストレスポンス・ドット・ジェイソンを代わりに使う方法があります。
  72. 6:12使っている依存のバージョンを、そのまま最新サンプルの環境と思い込まないでください。
  73. 6:18実務へ進むときは、今回の検証に加えて、受信サイズの制限、連続アクセスを抑えるレート制限、
  74. 6:22認証と認可を追加します。
  75. 6:26クッキー認証で更新するエーピーアイなら、シーエスアールエフ対策も一緒に設計してください。
  76. 6:32エラーの出し分けはできていても、制限や認証がなければ、大きな本文や大量のリクエストを受け続けてしまうためです。
  77. 6:41まとめです。
  78. 6:42ルートハンドラーは、アプリ、エーピーアイ配下のルート・ティーエスに、メソッド名の関数をエクスポートして作ります。
  79. 6:51ポストの処理では、コンテンツタイプの形式確認、ジェイソンの解析、値の検証の順に進め、
  80. 6:57失敗した場所に応じて四百十五、四百、四百二十二を使い分けます。
  81. 7:04成功時は空白を取り除いた値を、キャッシュしない設定で返します。
  82. 7:09順番に確かめてから返す、この流れが安全なエーピーアイの基本です。
  83. 7:14これでルートハンドラーズの基本は完了です。
  84. 7:18お疲れさまでした。
  85. 7:20次回はレイアウトのプロップスを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

app/api配下のroute.tsでHTTP APIを作成します。GETとPOST、JSON解析の失敗、入力検証、400・415・422の応答を実例で確認します。

解説記事・サンプルコードを読む：Route Handlersの使い方：GET・POSTとJSONの入力検証 →