【JavaScript入門】fetchでPOSTする方法｜JSON送信・ヘッダー設定・レスポンス処理を初心者向けに解説

fetch API を使った POST リクエストは、API 連携で最もよく使われる基本テクニックのひとつです。
この記事では、JSON の送信方法から FormData・URLSearchParams の使い分け、さらに HTTPエラーやネットワークエラーの扱いまで、実務で役立つ POST の書き方を分かりやすく解説します。

fetch で POST リクエストを送る基本構文

fetch API は、第二引数にオプションを渡すことで
POST / PUT / DELETE などのメソッド を指定できます。

fetch("https://example.com/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ message: "Hello" })
});

POST では headers と body をセットで指定するのが基本です。

JSON を送信する場合の書き方

API 連携では JSON を送るケースが最も多いです。

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Hello",
    body: "fetch POST example",
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => console.log(data));

ポイント

• Content-Type: application/json を指定する
• body は JSON.stringify で文字列化する
• レスポンスは res.json() で取得する

async / await を使うとさらに読みやすい

async function createPost() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      title: "Hello",
      body: "async/await example",
      userId: 1
    })
  });

  const data = await res.json();
  console.log(data);
}

createPost();

async / await を使うと、
同期処理のように読みやすいコード になります。

HTTPエラーの扱いに注意（重要）

fetch は 404 や 500 でも例外にならない ため、
自分でステータスをチェックする必要があります。

const res = await fetch(url, options);

if (!res.ok) {
  throw new Error("HTTPエラー: " + res.status);
}

ネットワークエラーのみ catch に入る点が
XHR と大きく異なります。

フォームデータを送信する場合（multipart/form-data）

ファイルアップロードなどでは FormData を使います。

const formData = new FormData();
formData.append("file", fileInput.files[0]);

fetch("/upload", {
  method: "POST",
  body: formData
});

FormData を使う場合は Content-Type を自動設定 させるため、
headers を指定しないのがポイントです。

URLエンコード形式で送信する場合（application/x-www-form-urlencoded）

fetch("/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: new URLSearchParams({
    username: "shin",
    password: "1234"
  })
});

ログインフォームなどでよく使われる形式です。

実務でよく使う POST パターンまとめ

• JSON送信 → application/json + JSON.stringify
• ファイル送信 → FormData（headers なし）
• フォーム送信 → x-www-form-urlencoded

用途に応じて適切な形式を選ぶことが重要です。

まとめ

fetch API の POST は、
headers + body を指定するだけで簡単に実装できます。

• JSON送信が最も一般的
• async / await で読みやすくなる
• HTTPエラーは例外にならないので注意
• 用途に応じて FormData や URLSearchParams を使い分ける

API 連携の基礎として、fetch の POST は必ず押さえておきたい知識です。