HTTPとAPI基礎 / 約20分

HTTPメソッドとステータスコード: Webの共通語

なぜこれを学ぶか

ブラウザでURLを開く、フォームを送信する、APIを叩く——これらすべてはHTTPというプロトコルで動いています。HTTPの語彙を知ることは、Web開発の全領域に直結します。

HTTP（HyperText Transfer Protocol） はWeb通信の標準プロトコルです。クライアント（ブラウザ・アプリ）がリクエストを送り、サーバーがレスポンスを返します。

HTTPメソッド はリクエストの「意図」を示します: GET=読み取り（副作用なし）、POST=新規作成、PUT=全体更新、PATCH=部分更新、DELETE=削除。GETは何度実行しても同じ（冪等）ですが、POSTは重複実行に注意が必要です。

ステータスコード はレスポンスの「結果」を示す3桁の数字です: 2xx=成功（200 OK、201 Created）、3xx=リダイレクト、4xx=クライアントエラー（400 Bad Request、401 Unauthorized、403 Forbidden、404 Not Found）、5xx=サーバーエラー（500 Internal Server Error）。

REST（REpresentational State Transfer） はAPIの設計スタイルです。URLがリソースを表し（/users/123）、HTTPメソッドが操作を示す（GET=取得、POST=作成）という原則です。

JSON（JavaScript Object Notation） は最もよく使われるデータ形式です。{"key": "value"} の形式で、文字列はダブルクォートのみ、末尾カンマは不可、数値・真偽値・null も扱えます。

重要ポイント

GET=読む、POST=作る、PUT=更新、DELETE=消す
4xx=クライアントの問題、5xx=サーバーの問題
RESTはURLがリソース、メソッドが操作を表す設計スタイル

理解度チェック

選ぶと即座に解説が表示されます。

ユーザー情報を部分的に更新する（名前だけ変える）APIエンドポイントに使うべきメソッドは？

ヒントを見る

「全体を置き換える」か「一部だけ変える」か、HTTPメソッドにはその違いを表すものがあります。

コーディング演習実際に書く

HTTPレスポンスを解析する関数を作成してください。ステータスコードと本文（JSON文字列 or 空文字）を受け取り、`{ ok, status, category, data }` を返します。`ok`=200-299、`category`は"success"/"redirect"/"clientError"/"serverError"のいずれか、`data`はJSON.parseした結果（失敗時はnull）。

function parseHttpResponse(status, body)

模範解答（読んで理解したら、自力で書き直してみましょう）

function parseHttpResponse(status, body) {
  const ok = status >= 200 && status < 300
  const hundred = Math.floor(status / 100)
  const catMap = { 2: 'success', 3: 'redirect', 4: 'clientError', 5: 'serverError' }
  const category = catMap[hundred] || 'unknown'
  let data = null
  try { data = JSON.parse(body) } catch (e) { data = null }
  return { ok, status, category, data }
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン