Frontend Academy · レッスン

Fetch API：GET・POST・PUT・DELETE

fetch で GET リクエストを送り、POST と PUT リクエストで JSON ボディを送信し、DELETE エンドポイントを呼び出してリソースを削除します。

「Fetch API：GET・POST・PUT・DELETE」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Fetch API

fetch()は、HTTPリクエストに使う最新のブラウザーAPIです。Responseオブジェクトに解決されるPromiseを返します。すべての最新ブラウザーとNode.js 18以降で標準搭載されています。

基本的なGETリクエスト

最も単純なfetchの使い方は、URLを渡し、レスポンスをawaitして、JSONを解析する方法です。

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

JSONボディを使ったPOST

method、headers、bodyを使います。bodyは文字列でなければならないため、オブジェクトに対してJSON.stringify()を呼び出します。

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

完全更新にはPUTを使う

PUTはリソースを置き換えます。オブジェクト全体を送信してください。通常、指定しなかったフィールドはサーバー上でクリアされます。

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

部分更新にはPATCHを使う

PATCHは送信したフィールドだけを更新します。部分更新にはPUTではなくPATCHを使います。

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

DELETEリクエスト

DELETEには通常、ボディがありません。レスポンスとして、ボディのない204 No Contentが返されることがよくあります。

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

認証ヘッダー

保護されたエンドポイントにはAuthorizationヘッダーを付けます。

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

URLクエリパラメーター

安全にエンコードするため、URLSearchParamsでクエリ文字列を組み立てます。

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

fetchがHTTPエラーをthrowしない理由

fetchがrejectするのはネットワーク障害が発生した場合だけです。404や500のレスポンスでも、処理は正常にresolveされます。必ずres.ok（2xxの場合はtrue）またはres.statusを確認し、必要に応じて手動でthrowしてください。

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

キャンセルにはAbortControllerを使う

処理中のリクエストをキャンセルして古い結果を防ぎます。入力に応じた検索や、Reactのエフェクトのクリーンアップでは不可欠です。

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

FormDataの送信

ファイルのアップロードやマルチパートフォームには、FormDataオブジェクトをbodyとして渡します。Content-Typeは設定しないでください。ブラウザーが正しいboundaryとともに追加します。

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

理解度チェック

サーバーが404や500を返したとき、fetch()がエラーをthrowしないのはなぜですか？

Fetch APIの復習

fetch()はResponseのPromiseを返します。メソッドにはGET（デフォルト）、POST、PUT、PATCH、DELETEがあります。JSONのボディにはJSON.stringify()とContent-Typeヘッダーが必要です。fetchがrejectするのはネットワーク障害の場合だけなので、res.okを手動で確認します。クエリ文字列にはURLSearchParamsを使います。キャンセルにはAbortControllerを使います。ファイルのアップロードにはFormDataを使います（Content-Typeは設定せず、ブラウザーに任せます）。

よくある質問

「Fetch API：GET・POST・PUT・DELETE」レッスンは無料ですか？

はい。「Fetch API：GET・POST・PUT・DELETE」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Fetch API：GET・POST・PUT・DELETE」で何を学びますか？

fetch で GET リクエストを送り、POST と PUT リクエストで JSON ボディを送信し、DELETE エンドポイントを呼び出してリソースを削除します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Fetch API：GET・POST・PUT・DELETE」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る