こんにちはフロントエンド担当のH.Rです！ 4月になり新入社員が入ってくる時期だと思います。 これからフロントエンド開発に携わる方が、まず最初にぶつかりやすい壁のひとつが「API（バックエンド）との通信」です。画面にデータを表示したり、入力されたデータを保存したりするためには、必ずバックエンドとやり取りをする必要があります。 このとき、「HTTPメソッド（どういうお願いをするか）」と「ステータスコード（結果の番号）」の基本を知っておくと、「なぜかデータが取れない！」「エラーが出たけど原因がわからない！」という時に、解決の糸口がすぐに見つかるようになります。 この記事では、フロントエンド初学者の方向けに、実務で最低限知っておきたいHTTPの基礎知識をわかりやすくまとめてみました！
HTTPとは？
HTTPとは、「ブラウザ（フロントエンド）とサーバー（バックエンド）がおしゃべりするためのルール」です。
基本的なやり取りは、以下の3ステップで行われます。
- フロント：「このデータちょうだい！」（リクエストを送る）
- バック：「わかった、探してみるね」（処理をする）
- バック：「はい、どうぞ！」（結果の番号と、データを返す）
よく使う5つの「HTTPメソッド」
フロントからサーバーにお願いをするとき、「データをください」「新しく登録して」などの「目的」を伝える必要があります。これがHTTPメソッドです。 よく使うのは次の5つです。
1. GET（データをもらう）
データを読み込むためだけに使います。サーバーのデータを書き換えることはありません。
GET /users （ユーザーの一覧をちょうだい） GET /users/1 （IDが1のユーザーのデータをちょうだい）
2. POST（データを新しく作る）
入力フォームなどからデータを送り、新しく登録するときに使います。
POST /users （新しいユーザーを登録して）
3. PUT（データをまるごと上書きする）
すでにあるデータを、まるごと新しいものに置き換えるときに使います。
PUT /users/1 （IDが1のユーザーのデータを、まるっとこれに書き換えて）
4. PATCH（データの一部だけ直す）
すでにあるデータのうち、特定の部分（名前だけ、など）を変更するときに使います。
PATCH /users/1 （IDが1のユーザーの、名前の部分だけ変更して）
💡 PUTとPATCHの違い - PUT: 丸ごとお着替え（全部上書き） - PATCH: アクセサリーだけ付け替え（一部だけ変更）
5. DELETE（データを消す）
指定したデータを削除します。
DELETE /users/1 （IDが1のユーザーを消して）
結果を教えてくれる「ステータスコード」
サーバーから返事がくるとき、一緒に 3桁の数字（ステータスコード） が送られてきます。 この番号を見れば、「成功したのか」「失敗したなら誰のせいなのか」がパッとわかります。
大きく分けて、以下の5つのグループがあります。
| グループ | ざっくり言うと |
|---|---|
| 100番台 | 「いま処理中だよ」（あまり見かけません） |
| 200番台 | 「大成功！」 |
| 300番台 | 「別の場所に引っ越したよ（リダイレクト）」 |
| 400番台 | 「フロント側のミスだよ（送り方が間違ってるなど）」 |
| 500番台 | 「サーバー側のミスだよ（バックエンドが壊れたなど）」 |
実務でよく見かける番号をピックアップして解説します。
200番台（成功！）
お願いがちゃんとサーバーに届き、無事に処理されたときの番号です。
| 番号 | 意味 | 解説 |
|---|---|---|
| 200 OK | 成功 | 一番よく見ます。「データ取れたよ！」という状態。 |
| 201 Created | 作成できた | POST などで「新しいデータが無事に作られたよ」という状態。 |
| 204 No Content | 中身はないよ | DELETE などで「処理は成功したけど、返すデータは特にないよ」という状態。 |
400番台（フロント側のミス）
「お願いの仕方が間違っているから、やり直して！」 というエラーです。フロントエンドのコードや、送ったデータを見直す必要があります。
| 番号 | 意味 | 解説 |
|---|---|---|
| 400 Bad Request | 送り方が変 | 必須のデータが足りない、文字を送るべき場所に数字を送った、などのルール違反。 |
| 401 Unauthorized | 誰かわからない | 「ログインしてないよ」または「パスワード（トークン）の期限が切れてるよ」。ログイン画面に移動させることが多いです。 |
| 403 Forbidden | 見る権利がない | ログインはしてるけど、「あなたは管理者じゃないからこの画面は見られないよ」と拒否された状態。 |
| 404 Not Found | 見つからない | 指定したURLやデータが存在しない状態。フロントでは「データがありません」という表示をします。 |
| 409 Conflict | ぶつかってる | 「そのメールアドレスはもう別の人が登録してるよ！」など、データが矛盾してしまった状態。 |
| 422 Unprocessable Entity | 中身がダメ | データの形は合ってるけど、「パスワードは8文字以上にしてね」などの入力ルール（バリデーション）に引っかかった状態。 |
| 429 Too Many Requests | アクセスしすぎ | 短い時間に何度もボタンを連打したなど、リクエストを送りすぎたときに出ます。 |
500番台（サーバー側のミス）
「サーバーの中でエラーが起きて動けなくなっちゃった！」 というエラーです。バックエンドの担当者に「500エラーが出ました！」と報告することが多いです。
| 番号 | 意味 | 解説 |
|---|---|---|
| 500 Internal Server Error | サーバーが壊れた | サーバーのプログラムにバグがあるなど、内部のエラー。 |
| 502 Bad Gateway | 中継地点のエラー | サーバーまでの道のりでトラブルが起きている状態（APIサーバーが落ちているなど）。 |
| 503 Service Unavailable | お休み中 | サーバーがメンテナンス中だったり、アクセスが集中しすぎてパンクしている状態。 |
| 504 Gateway Timeout | 時間切れ | サーバーの処理が長すぎて、待ちきれずに通信を切った状態。 |
まとめ
HTTPメソッドとステータスコードは、フロントエンドとバックエンドがお互いの状況を伝え合うための「共通言語」です。
これを理解しておくと、「エラーが起きたときに、フロントエンド（自分）のコードを直すべきか、バックエンドの人に直してもらうべきか」がすぐにわかるようになり、開発がグッと楽になります。
ぜひ、開発中に行き詰まったときの辞書代わりに使ってみてください！
