先生と生徒の会話形式で理解しよう

生徒

「Reactでサーバーとやり取りする方法ってあるんですか？」

先生

「ありますよ！よく使われるのが『Fetch API』という仕組みです。」

生徒

「Fetch APIってなんですか？初めて聞きました…」

先生

「では、初心者でもわかるように、Fetch APIの仕組みとReactでの使い方をじっくり説明していきましょう！」

1. Fetch APIとは？

Fetch API（フェッチ・エーピーアイ）は、JavaScriptでサーバーと通信するための機能です。ウェブページからサーバーにデータを取りに行ったり、サーバーへデータを送信したりすることができます。

たとえば、天気予報のサイトで「今の天気」をリアルタイムで取得したい場合や、アンケートの送信ボタンを押して回答をサーバーに送る場合などに使われます。

「API（エーピーアイ）」とは、Application Programming Interfaceの略で、簡単にいうと「アプリとアプリをつなぐ橋渡し役」です。

Fetch APIは、そんなAPIと通信するための仕組みです。

2. ReactでFetch APIを使う理由

Reactは、画面を部品のように組み立てる「コンポーネントベース」の仕組みです。その中で、外部からデータを読み込んで画面に反映させる必要があります。

たとえば、ニュースアプリを作るときに、サーバーから記事の一覧を取得して表示したり、検索機能でサーバーにキーワードを送って結果を表示したりします。

こうした通信処理に最適なのがFetch APIなのです。

3. 基本的な使い方を見てみよう

ここでは、ReactでFetch APIを使って外部データを取得する簡単な例を紹介します。


import React, { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error("通信エラー:", error));
  }, []);

  return (
    <div>
      <h1>サーバーから取得したデータ</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

（画面に「サーバーから取得したデータ」と表示され、APIから受け取ったデータが画面に反映されます）

4. Fetch APIの特徴とは？

Fetch APIには、以下のような特徴があります。

非同期通信ができる：待っている間も画面は止まらない
Promiseを使う：処理が完了したら次の動作を行う仕組み
柔軟に使える：GETやPOSTなど、さまざまな通信に対応
簡潔なコード：複雑な処理を少ない行数で記述できる

特に「非同期（ひどうき）」という言葉は難しく聞こえるかもしれませんが、「同時進行できる」と考えればOKです。

5. JSONとは？なぜ使うの？

Fetch APIでよく出てくる「response.json()」という部分、気になりますよね？

JSON（ジェイソン）とは、サーバーとやりとりするためのデータの形式（ルール）です。
中身はテキスト形式で、「名前」と「値」をセットにして情報を表します。

たとえば：


{
  "name": "田中",
  "age": 30
}

このように、読みやすく、扱いやすいのが特徴です。

6. データの送信（POST）もできる

Fetch APIは、サーバーからデータを取ってくるだけでなく、サーバーにデータを送ること（POST）もできます。

たとえば、フォームから入力された名前を送信したい場合：


fetch("https://api.example.com/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "田中" }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

このようにして、サーバーと双方向のやりとりが可能になります。

7. 通信エラーの対処方法

インターネットが不安定だったり、APIのURLが間違っていると、Fetch APIでエラーが発生することがあります。

そんなときは、.catch()を使って、エラー内容を表示したり対処できます。


fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) => {
    console.error("エラーが発生しました:", error);
  });

ユーザーに「エラーが起きました」と知らせる画面を作っておくのも、親切ですね。

8. よくあるエラーと注意点

初心者がよく間違えるポイントも紹介しておきます。

URLが間違っている：httpsのスペルやドメイン名に注意
responseをJSONにしていない：response.json() を忘れがち
useEffectの書き方：Reactでは通信処理はuseEffect()の中に書くのが基本
セキュリティ設定：CORSという制限に引っかかる場合がある（※これは高度な内容なので今は気にしなくて大丈夫）

まとめ

Fetch APIは、Reactで外部データを扱う際に欠かせない重要な仕組みであり、サーバーと通信して情報を取得したり送信したりする場面で幅広く利用されます。今回の記事では、Fetch APIとは何か、そしてReactのコンポーネント内でどのように利用すればよいのかを、具体的なコード例とともに丁寧に確認してきました。特にuseEffectと組み合わせてデータ取得を行う方法は、実際の開発でも頻繁に登場する基本パターンであり、初心者がしっかり身につけておきたい大切なポイントです。

また、Fetch APIにはPromiseによる非同期処理の概念が深く関わっており、サーバーの返答を待つ間も画面を止めずに動作できる柔軟性を持っています。非同期処理は最初こそ難しく感じられますが、thenやcatchの流れを理解することで、通信成功時と失敗時の処理を明確に書けるようになります。さらに、JSONというデータ形式を理解しておくことで、受け取ったデータをReactの状態として扱い、画面に動的に反映させる仕組みが自然に理解できるようになります。

記事の後半では、POSTリクエストを使ってサーバーにデータを送信する方法も紹介しました。method、headers、bodyといった設定項目の意味を把握すれば、問い合わせフォームや会員登録機能など、さまざまなアプリケーションに応用できます。また、通信エラーの種類や対処方法についても触れ、初心者がつまずきやすい部分を事前に知っておくことで、エラーが発生した際にも落ち着いて状況を把握できるようになります。

URLの間違い、JSON変換の抜け、useEffectの依存配列、CORSの仕組みなど、Fetch APIを扱う中で覚えておきたい注意点は多くありますが、これらはReactで通信を行う上で自然と身についていきます。大切なのは、ひとつひとつの仕組みを理解しながら実際に手を動かし、Fetch APIがどのようにサーバーとやり取りをしているかを体感することです。ReactとFetch APIを組み合わせた通信処理は、アプリケーション開発における強力な武器となり、外部サービスとの連携やデータ管理の幅を大きく広げてくれます。

サンプルプログラムの振り返り

以下はFetch APIとuseEffectを組み合わせた基本的なサンプルです。データ取得、JSON変換、エラー処理までの流れがひと目で確認できます。


import React, { useEffect, useState } from "react";

function FetchSample() {
  const [items, setItems] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/items")
      .then((res) => {
        if (!res.ok) {
          throw new Error("サーバーエラーが発生しました");
        }
        return res.json();
      })
      .then((data) => setItems(data))
      .catch((err) => setError(err.message));
  }, []);

  return (
    <div className="card p-3">
      <h2>取得データ一覧</h2>

      {error && <p style={{ color: "red" }}>エラー：{error}</p>}

      {items.length > 0 ? (
        <ul>
          {items.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      ) : (
        <p>データを読み込み中です...</p>
      )}
    </div>
  );
}

export default FetchSample;

このサンプルは、通信が成功した場合の表示とエラー時の表示を明確に分けており、実務でも役立つ構成になっています。データ取得の流れが整理されているため、Fetch APIの特徴を理解しやすく、初心者が練習するのにとても適したコードです。

先生と生徒の振り返り会話

生徒「Fetch APIってもっと難しいものだと思っていましたが、流れを理解すると意外とシンプルですね！」

先生「そうなんです。データを取ってきて、JSONに変換して、状態にセットする。この基本さえ身につければ応用がどんどんできますよ。」

生徒「Reactで通信するときはuseEffectの中に書くのがポイントなんですね！」

先生「その通りです。コンポーネントの初回レンダー時に通信したい場合は必ずuseEffectを使います。」

生徒「エラーの扱いも学べてよかったです。catchを使って原因を確認できるのが安心ですね。」

先生「エラー時の動作をしっかり用意しておくと、ユーザーにとっても親切なアプリになりますよ。」

生徒「Fetch APIとReactを組み合わせると、外部サービスと連携できる幅が広がるのが面白いです！」

先生「その通り。自由度が高いので、ぜひ自分のアプリでも活用してみてくださいね。」