VIDEO LESSON

Next.jsのAPI Routes入門：GET・POST・入力検証とエラー応答の解説動画

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

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

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

0:00こんにちは。
0:00今回は、ネクストジェイエスのエーピーアイルーツ入門です。
0:05ページズルーターで、ゲットとポストの処理、入力検証とエラー応答を、タイプスクリプトの例で学びます。
0:12エーピーアイルーツは、エスアールシー配下のページズフォルダーにある、エーピーアイフォルダーへファイルを置くことで作れる、
0:18サーバー側の受け付け窓口です。
0:24画面ではなく、ジェイソンのようなデータを返します。
0:27追加のフレームワークは不要ですが、動かすにはネクストジェイエスを実行できるサーバー環境が必要で、
0:32静的出力では使えません。
0:36この前提から順に確認していきます。
0:39まず置き場所と役割です。
0:41エスアールシー、ページズ、エーピーアイの中にファイルを作ると、そのファイル名がそのままユーアールエルの末尾になります。
0:50たとえばハロー・ティーエスなら、スラッシュエーピーアイ、スラッシュハローです。
0:57ページはエイチティーエムエルの画面を返しますが、エーピーアイルーツは、リクエストを受けて処理し、
1:02ジェイソンなどのレスポンスを返す点が違います。
1:08なお、アプリルーターのルートティーエスで定義するルートハンドラーズとは、
1:12配置場所も書き方も異なる別の仕組みです。
1:17混同しないように、今回はページズルーターの方式に絞って進めます。
1:22ゲット専用の例です。
1:23ファイルはハロー・ティーエスで、インポートしているのはリクエストとレスポンスの型です。
1:30レスポンスデーターは、成功時のメッセージか、エラー時のエラーの、どちらかの形に限定しています。
1:37ハンドラー関数は、リクエストをレック、レスポンスをレスとして受け取ります。
1:42メソッドがゲットでなければ四百五を返し、ゲットなら二百でメッセージを返します。
1:48ファイルを作っただけではゲット専用にはならず、メソッドの確認を自分で書く点が、
1:52この例の最初のポイントです。
1:56型は開発時に形を確認するためのもので、届いた入力を自動で検証してくれるわけではありません。
2:02メソッド確認の考え方を整理します。
2:05ファイルを置いただけでは、そのエーピーアイが受け付けるメソッドは制限されません。
2:10そこでハンドラーの先頭でレック・メソッドを確認し、対応しないメソッドには四百五、
2:15メソッドノットアロウドを返します。
2:19あわせてアロウヘッダーで、使えるメソッドを相手に伝えます。
2:23ステータスコードは、結果の種類を相手のプログラムが判別するための合図です。
2:28成功は二百、メソッド違いは四百五というように、意味に合った番号を選ぶことで、
2:33呼び出し側は本文を読まなくても大まかな結果を判断できます。
2:38番号と本文の両方をそろえることが、扱いやすいエーピーアイの基本です。
2:43次はポストの入力検証です。
2:45グリーティング・ティーエスでは、名前を受け取って挨拶を返します。
2:50検証はリードネームという小さな関数に切り出しています。
2:54まず、値がオブジェクトで、ヌルではなく、ネームというキーを含むかを確認します。
3:01次に、ネームが文字列かどうかを見て、前後の空白を取り除き、長さが一文字から五十文字の範囲にある場合だけ、
3:06その文字列を返します。
3:11条件を満たさなければヌルを返し、呼び出し側でエラーにします。
3:16ポイントは、レック・ボディの型がエニーであることです。
3:20そのまま文字列だと思って使わず、いったんアンノウンとして、実行時に一つずつ確認します。
3:27ハンドラー本体の前半です。
3:29最初にメソッドを確認し、ポストでなければアロウヘッダーを付けて四百五を返します。
3:35次に、コンテンツタイプヘッダーを確認します。
3:38セミコロンで区切った先頭部分を取り出し、小文字にそろえて、アプリケーション・ジェイソンと一致するかを見ます。
3:45メディアタイプが違えば、四百十五、アンサポーテッドメディアタイプを返します。
3:51文字コードなどの付加情報が付いていても、先頭部分だけを見ることで正しく判定できます。
3:57形式の確認を本文の確認より先に行うことで、検証の順序が明確になり、エラーの原因も切り分けやすくなります。
4:04後半では、レック・ボディをアンノウンとして受け取り、リードネームで検証します。
4:10ヌルが返れば、名前は一文字から五十文字の文字列にしてください、というエラーとともに四百を返します。
4:17問題がなければ、キャッシュコントロールにノーストアを付け、二百で挨拶文を返します。
4:23また、このファイルではボディパーサーのサイズ上限を十キロバイトに設定しています。
4:29なお、ジェイソンの構文が壊れている場合や上限を超えた場合は、ハンドラーが呼ばれる前に、
4:34ボディパーサー側で拒否されることもあります。
4:39文字数はジャバスクリプトのレングスで数えるため、絵文字の数え方には注意が必要です。
4:45動作確認はカールで行います。
4:47開発サーバーを起動した状態で、別のターミナルから実行します。
4:51まずハローへゲットすると二百、同じ場所へポストすると四百五になることを確認します。
4:56次にグリーティングへ、正しいジェイソンで名前を送ると二百で挨拶が返り、名前が数値の場合は四百になります。
5:03正常なケースだけでなく、メソッド違い、型違い、空文字といった失敗のケースも試すことが大切です。
5:09期待するステータスと、実際に返ったステータスを並べて確認すると、検証の抜けに気付けます。
5:15確認は公開後ではなく、開発中の一通りの作業として済ませておきましょう。
5:20ブラウザーからは、グリーティングページのフォームから呼び出します。
5:25スライドは、その送信処理の中心部分です。
5:28フェッチでポストし、本文はジェイソン・ストリンギファイで文字列にします。
5:33レスポンス・オッケーが偽なら、ステータス付きのエラーを投げます。
5:38受け取ったデータも最初はアンノウンとして扱い、メッセージが文字列であることを確認してから表示します。
5:46送信中はペンディングという状態でボタンを無効化し、二重操作を抑え、最後はファイナリーで解除します。
5:54サーバー側だけでなく、呼び出し側でも成功と失敗の両方に備えることが、実践では欠かせません。
6:01公開時に考えることです。
6:02エーピーアイのユーアールエルは外部から呼び出せます。
6:06画面にボタンがないことや、タイプスクリプトの型は、アクセス制限にはなりません。
6:12保存や更新を行うなら、処理の内容に応じて、認証、権限確認、シーエスアールエフ対策、
6:16レート制限などを設計します。
6:20また、コードはサーバーで実行されますが、レスポンスに含めた情報は利用者に届くため、
6:24秘密のキーや内部のエラー詳細は返しません。
6:29さらに、メモリー上の配列への保存だけでは、再起動や複数サーバーへの分散に対応できません。
6:35永続化が必要ならデータベースを使います。
6:38配信形態も、静的出力では動かない点を含めて選びます。
6:42最後に、公開前の確認をまとめます。
6:45一つ目、型定義と入力検証は別物です。
6:47タイプスクリプトで型を用意しても、外部からその形のデータだけが届くわけではありません。
6:54二つ目、メソッド、本文の形式、必要な値を実行時に検証し、失敗時のステータスも確かめます。
7:00三つ目、配信環境です。
7:02ページズルーターのエーピーアイルーツには、リクエスト時に実行できる環境が必要で、
7:06静的な出力フォルダーを置くだけでは動きません。
7:11まとめです。
7:12置き場所でユーアールエルが決まる、メソッドと入力を実行時に検証する、結果に合ったステータスを返す。
7:19この三点を押さえれば、エーピーアイルーツの基本は完成です。

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

この動画で学べること

Next.jsのAPI RoutesをTypeScriptで実装。GET・POSTの処理、HTTPメソッドとJSON入力の検証、エラー応答、静的出力との違いを学べます。

解説記事・サンプルコードを読む：Next.jsのAPI Routes入門：GET・POST・入力検証とエラー応答 →