音声スライド （クリックで展開／閉じる）
はじめに
- HTTP 応答の種類を数字から判断する
- リダイレクトの流れを理解する
- HTML フォームの送信内容を読み解く
この単元では、HTTP レスポンスに含まれるステータスコードを学びます。200・302・404・500 の意味を確認した後、リダイレクトの流れと、HTML フォームの action・method・name が送信内容をどう決めるかを見ていきます。
ステータスコードとは
- HTTP レスポンスに含まれる 3 桁の数字
- リクエストの処理結果をブラウザへ伝える
- 先頭の数字で結果を大きく分類できる
- 2xx：成功
- 3xx：別の URL への案内
- 4xx：リクエスト側の問題
- 5xx：サーバ側の問題
ステータスコードは、サーバがリクエストをどう処理したかを示す 3 桁の数字です。ブラウザはレスポンスの本文だけでなく、この数字も受け取ります。先頭が 2 なら成功、3 なら別の URL への案内、4 ならリクエスト側の問題、5 ならサーバ側の問題です。
4つのコードの意味
| コード | 意味 | TODO アプリでの例 |
|---|---|---|
| 200 | 処理に成功 | 一覧画面を返す |
| 302 | 別の URL へ案内 | 登録後に一覧へ案内 |
| 404 | 対象が見つからない | 存在しない ID を指定 |
| 500 | サーバ内で問題が発生 | 処理中の想定外の問題 |
200 は処理が成功したことを表します。302 は、指定された処理の後で別の URL へ移動してほしいという案内です。404 は、指定した URL や ID に対応する対象が見つからないことを表します。500 は、サーバ内の処理で想定外の問題が起きたことを表します。
リダイレクトの流れ
302 のレスポンスには、次に取得する URL が示されます。ブラウザはそれを受け取ると、示された URL へ新しい GET リクエストを送ります。つまり、サーバが画面を直接移動させるのではなく、ブラウザに次の通信を依頼します。登録後にこの流れを使う理由は、第 19 単元で扱います。
フォームを決める 3 属性
| 属性 | 決めること | 登録フォーム |
|---|---|---|
action |
送信先の URL | /todos |
method |
HTTP メソッド | post |
name |
項目を表す名前 | title |
HTML フォームでは、action が送信先の URL を決め、method が HTTP メソッドを決めます。登録フォームでは、/todos へ POST で送信します。入力欄の name は項目を識別する名前です。name が title なら、入力内容は title という名前と組にして送られます。
フォーム送信で作られる要求
送信ボタンを押すと、ブラウザはフォームの指定から HTTP リクエストを組み立てます。method から POST、action からパス /todos が決まります。name と入力内容の組は、application/x-www-form-urlencoded 形式でリクエストのボディに入ります。
送信後の受け取り方
- フォームは送信内容を決める
- サーバは URL と HTTP メソッドから処理を選ぶ
nameごとの内容をサーバ側で受け取る- 具体的な受け取り方は後の単元で学ぶ
この単元では、ブラウザが何を送るかに注目しました。サーバ側では、URL と HTTP メソッドに対応する処理が選ばれ、name ごとの入力内容が受け取られます。その具体的な書き方は、第 16 単元と第 17 単元で扱います。
まとめ
- ステータスコードは HTTP の処理結果を表す
- 200・302・404・500 の意味を区別する
- 302 を受けたブラウザは別の URL を取得する
actionは送信先、methodは送信方法nameは送信する項目の名前
ステータスコードを見れば、HTTP リクエストの処理結果を判断できます。302 のリダイレクトでは、ブラウザが案内された URL へ新しいリクエストを送ります。フォームでは action・method・name が、送信先、送信方法、送信する項目の名前を決めます。
