JavaScript | 非同期処理：fetch / API 通信 – fetch の基本

JavaScript JavaScript
スポンサーリンク

fetch ってそもそも何者か

fetch は、
JavaScript から「ネット越しにデータを取りに行く（サーバーと通信する）」ための関数 です。

  • 天気 API から今日の天気をもらう
  • 自分のサーバーにフォームの内容を送る
  • 外部サービスから JSON データを取得する

みたいな「HTTP 通信」を、ブラウザの JavaScript から行うための標準の道具が fetch です。

大前提として、fetch は 非同期処理 です。
つまり、「すぐには結果が返ってこない」ので、Promise / async / await とセットで扱うこと がほぼ必須になります。

ここが重要です。
fetch は「ただの関数」ではなく、
「呼んだ瞬間には終わらない、あとで結果が返ってくる非同期の関数」。
この感覚を頭に置いたうえで、基本の使い方を見ていきましょう。

fetch のいちばん基本のかたち（GETリクエスト）

まずは「API から JSON を取ってくる」定番パターン

よくあるパターンから入りましょう。
「ある URL から JSON データを取ってきて表示する」コードです。

async function loadUsers() {
  const response = await fetch("https://example.com/api/users");

  const data = await response.json();

  console.log(data);
}
JavaScript

これだけ見ると「ふーん」で終わるので、
1 行ずつ分解して何をしているのか見ていきます。

1行目：async function で「中を非同期モード」にする

async function loadUsers() {
JavaScript

fetch は Promise を返す非同期関数なので、
await を使えるように、関数に async を付けておく のが基本です。

async を付けると、その関数の中では await が使えます。
今回だと、fetch(...) と response.json() を「同期っぽく待つ」ために使います。

2行目：fetch で「リクエストを飛ばし、レスポンスを待つ」

const response = await fetch("https://example.com/api/users");
JavaScript

ここでやっていることは、

  • fetch("URL") で、「この URL に GET リクエストを送ってね」とブラウザに依頼する
  • その結果（レスポンス）が返ってくるまで await で待つ
  • 結果は response というオブジェクトに入る

という流れです。

ポイントは、fetch の戻り値は「すぐにデータそのもの」ではなく、Response オブジェクト だということです。
この時点では、まだ「中身（JSON）」は取り出していません。

3行目：response.json() で JSON 本体を取り出す

const data = await response.json();
JavaScript

response の中には、「ヘッダー」「ステータスコード」「ボディ（本体のデータ）」などが入っています。
response.json() は、その中の「ボディの中身を JSON としてパースしてくれるメソッド」です。

これも非同期（Promise を返す）なので、await で待ちます。
やっとここで、data に「実際の JavaScript のオブジェクト」として扱える値が入ります。

4行目：好きなように使う

console.log(data);
JavaScript

この data が、API からもらった JSON データです。
オブジェクトの配列かもしれないし、単なるオブジェクトかもしれません。
あとは普通の JavaScript の変数として、画面に表示したり、計算に使ったりできます。

ここが重要です。
fetch の基本パターンは、ほぼこの 3 ステップです。

  1. const response = await fetch(url);
  2. const data = await response.json();
  3. data を使う

「fetch → Response → JSON の中身」という 2 段階になっていることを、しっかりイメージしてください。

エラー処理の基本：response.ok をちゃんと見る

fetch 自体は「HTTP エラーでも reject しない」

初心者が最初にハマりやすいポイントがここです。

const response = await fetch("https://example.com/api/users");
JavaScript

この fetch は、HTTP ステータスが 404 や 500 でも、基本的には「成功」として resolve されます。
（ネットワークが完全に繋がらないなどの場合だけ reject される）

つまり、

  • URL が間違っていて 404
  • サーバー側でエラーが起きて 500

といったときも、fetch 自体はエラーにならず、response が返ってきてしまいます。

なので、自分で response.ok や response.status を見て判定する必要があります。

よくある「ちゃんと書く版」

async function loadUsers() {
  try {
    const response = await fetch("https://example.com/api/users");

    if (!response.ok) {
      // 200番台以外（404, 500 など）のとき
      throw new Error("HTTPエラー: " + response.status);
    }

    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error("通信に失敗しました:", err);
  }
}
JavaScript

ここでやっていることを整理します。

if (!response.ok) { ... }
response.ok は、ステータスコードが 200〜299 のとき true になる プロパティです。
そうでなければ false。
つまり、「成功っぽいかどうか」をサクッと確認できるフラグです。

エラーだと判断したら throw new Error(...) で例外を投げます。
これにより、下の response.json() には進まず、catch に飛びます。

catch (err) { ... } では、

  • ネットワークが繋がらないなどで fetch 自体が失敗した場合
  • response.ok が false で、自分で throw した場合

どちらもまとめて捕まえられます。

ここが重要です。
「fetch が成功した＝HTTP 的にも成功した」ではありません。
response.ok / response.status を確認して、「サーバー側も OK を返しているか」を自分でチェックする習慣をつけてください。
「エラーは例外として投げる→catch でまとめて扱う」という形が、後々まで効きます。

POST リクエスト（データを送る）も fetch の基本

JSON をサーバーに送ってみる

GET だけでなく、サーバーに「データを送る」ときも fetch を使います。
例えば、ユーザーを新規作成する API に対して JSON を送る例です。

async function createUser() {
  const body = {
    name: "太郎",
    age: 25,
  };

  const response = await fetch("https://example.com/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });

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

  const data = await response.json();
  console.log("作成されたユーザー:", data);
}
JavaScript

ポイントをかみ砕きます。

第二引数のオプションオブジェクトで、HTTP の詳細を指定します。

method: "POST"
何もしなければ "GET" ですが、データ送信したいので "POST" を明示します。

headers: { "Content-Type": "application/json" }
「これから送るデータは JSON だよ」とサーバーに教えるヘッダー です。
サーバー側がこのヘッダーを見て、JSON として解釈してくれます。

body: JSON.stringify(body)
送るデータ本体です。
JavaScript のオブジェクトをそのまま渡すのではなく、必ず文字列（JSON 文字列）に変換する 必要があります。
そのために JSON.stringify(...) を使います。

ここが重要です。
GET のときは fetch(url) だけでしたが、
POST など「メソッドやヘッダー、body を自分で指定したい」ときは、
第二引数に「設定オブジェクト」を渡す という形になります。
「method / headers / body の 3 つ」だけ、まずは押さえてください。

then / catch で書く fetch（async / await との対比）

Promise チェーンとして書いたパターン

async / await を使わず、Promise の then / catch で書くとこうなります。

fetch("https://example.com/api/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error("HTTPエラー: " + response.status);
    }
    return response.json();
  })
  .then((data) => {
    console.log("ユーザー一覧:", data);
  })
  .catch((err) => {
    console.error("通信に失敗しました:", err);
  });
JavaScript

やっていることは async / await 版と同じです。

  • 最初の then で response を受け取る
  • HTTP エラーをチェックして、ダメなら throw
  • OK なら response.json() を返す（次の then へ）
  • 次の then で data を受け取って使う
  • どこかで例外が起きたら最後の catch へ

async / await と書き比べてみる

同じ処理の async / await 版はこうでした。

async function loadUsers() {
  try {
    const response = await fetch("https://example.com/api/users");

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

    const data = await response.json();
    console.log("ユーザー一覧:", data);
  } catch (err) {
    console.error("通信に失敗しました:", err);
  }
}
JavaScript

どちらも正解ですが、
async / await のほうが「同期っぽく上から下に流れが読める」ので、初心者にはこちらをおすすめします。

ここが重要です。
fetch は Promise ベースなので、
「async / await でも書けるし、then / catch でも書ける」 という二刀流です。
まずは async / await でしっかり理解してから、必要に応じて Promise チェーンも読めるようになる、という順番で大丈夫です。

CORS という壁があることも軽く知っておく

「ブラウザからどの API にでも自由にアクセスできるわけではない」

fetch を学び始めると、よくこうなります。

「それっぽい API URL を見つけたから試しに fetch してみたら、なんかエラー出た…」

よくあるのが CORS（クロスオリジン制限） によるエラーです。

ざっくりいうと、

ブラウザは、
セキュリティのために、
「このサイトから、どのサーバーにでも自由にリクエスト飛ばしていいよ」とは言っていない。
サーバー側が「このオリジン（ドメイン）からのアクセスは OK」と明示している必要がある。

というルールです。

これは ブラウザ側の安全装置 なので、
クライアントの JavaScript からは基本的に「どうにもできない」領域です。

ここが重要です。
fetch 自体の書き方が間違っていなくても、サーバー側の CORS 設定次第で失敗することがある、という事実だけは頭の片隅に置いておいてください。
「自分のコードが悪いのか」「サーバー側の制限なのか」を切り分けられるようになると、デバッグが一気に楽になります。

初心者として「fetch の基本」で本当に押さえてほしいこと

fetch(url) は、「その URL に HTTP リクエストを送って、Promise で結果を返してくれる関数」。
戻ってくるのは「Response オブジェクト」であって、いきなり JSON データではない。

JSON が欲しいときは、
const response = await fetch(url);
const data = await response.json();
という「2 段階」が必要。

HTTP ステータスが 404 や 500 でも、fetch 自体はエラーにならない。
response.ok や response.status を自分でチェックし、「エラーなら throw → catch でまとめて扱う」形を覚える。

POST などでデータを送るときは、fetch(url, { method, headers, body }) の形を使う。
JSON を送るなら "Content-Type": "application/json" と body: JSON.stringify(...) のセットが基本。

ここが重要です。
fetch は、「ネット越しのやり取り」を JavaScript に持ち込む入口です。
ただし、それは同期処理ではなく、「待つ必要がある非同期処理」。
「fetch → Response → JSON → 使う」という流れと、
「ok を確認してエラーは throw」という基本の型だけ、まずは自分の手で何度か書いて体に馴染ませてください。

練習としては、こんなステップが良いです（実際に API を用意できなくても、形だけ書いてみるだけでも価値があります）。

// 練習1: GET
// - 任意のURL（ダミーでもOK）に対して、
//   fetch → response.ok チェック → response.json() → console.log
//   という流れを書いてみる。

// 練習2: POST
// - name, age を持つオブジェクトを JSON.stringify して、
//   POST で送る fetch のコードを書いてみる。
// - headers / body の指定に慣れる。

// 練習3: then / catch 版
// - 練習1の処理を、async / await ではなく、then / catch で書き直してみる。
// - 「やっていることは同じ」感覚を掴む。
JavaScript

「ブラウザとサーバーが会話しているイメージ」を持ちながら、
fetch を通じて少しずつその会話を覗き見していく感じで遊んでみてください。
そこから、非同期処理や API 連携の世界が自然に広がっていきます。

スポンサーリンク
タイトルとURLをコピーしました