1. Fetch APIとは？Reactでどう使う？

Fetch API（フェッチエーピーアイ）とは、Reactでサーバーと通信してデータを取得したり送信したりするための仕組みです。たとえば、天気予報のアプリやショッピングサイトの画面に最新の商品情報を表示するには、外部のデータを読み込む必要があります。そんなときにFetch APIを使えば、簡単に外部サーバーとやり取りができます。

「API（エーピーアイ）」という言葉は、「ある仕組みにアクセスするための窓口」だと思ってください。難しそうに見えますが、電話やLINEで友だちと連絡をとるのと同じように、Reactが外部のサーバーと通信するための手段がFetch APIなんです。

2. JSONって何？なぜ使われているの？

JSON（ジェイソン）は「JavaScript Object Notation（ジャバスクリプト・オブジェクト・ノーテーション）」の略で、データをわかりやすく整理して表すためのルールです。人間にも読みやすく、コンピューターにも理解しやすいため、ほとんどのサーバーではこのJSON形式でデータがやり取りされています。

たとえば、以下のように名前や年齢を表すデータがあります：


{
  "name": "たろう",
  "age": 20
}

このように{}で囲まれた中に、"キー": "値"の形でデータが並んでいます。これをReactで読み込んで、画面に表示するのが今回の目的です。

3. ReactでFetch APIを使ってJSONを読み込む

それでは、ReactでFetch APIを使ってJSONデータを読み込むサンプルを見てみましょう。今回は、デモ用の無料API「https://jsonplaceholder.typicode.com/users」から、ユーザー情報の一覧を取得します。


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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setUsers(data))
      .catch((error) => console.error("エラー:", error));
  }, []);

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}（{user.email}）
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「ユーザー一覧」と表示され、その下にAPIから取得した名前とメールアドレスの一覧が表示されます）

4. コードの解説（初心者向けにやさしく）

useStateとuseEffectは、Reactの便利な機能です。 useStateは「データを保存する箱」のようなもので、 useEffectは「ページが表示されたときに自動で実行される処理」を意味します。

fetch()は「外部データを取りに行く命令」で、指定したURLにアクセスします。そのあとにresponse.json()と書くことで、受け取ったデータをJSONとして読み込めます。最後に、setUsers(data)でそのデータを保存して、画面に表示しています。

5. データがうまく表示されないときのチェックポイント

ReactでFetch APIを使うときにうまく表示されない場合、以下のポイントを確認してみましょう。

インターネットに接続されているか？
fetchで使っているURLが正しいか？
consoleにエラーメッセージが出ていないか？
Reactのバージョンや構文ミスがないか？

console.log()を使えば、取得したデータの中身を確認できます。慣れてきたらデバッグの方法も覚えると便利ですよ。

6. JSONデータを使った他の例（商品リストなど）

ユーザー情報だけでなく、商品一覧、ブログ記事、コメントなど、あらゆるデータがJSONでやり取りできます。たとえばショッピングサイトを作るなら、「商品名」「価格」「画像URL」などをJSON形式で受け取って、一覧表示すれば便利です。

実際の開発では、サーバー側と連携して、リアルタイムでデータを取得・更新するアプリを作るときに、Fetch APIとJSONが欠かせません。それだけに、Reactとセットで覚えておくと今後の学習がスムーズになります。

まとめ

Reactで外部データを扱うときに欠かせない仕組みがFetch APIであり、そしてそのデータ形式として標準のように扱われているのがJSONです。今回の記事では、Fetch APIとは何かという基本から、Reactのコンポーネントの中で実際にどのように使い、取得したJSONデータをどのように画面へ反映させるのかまで、段階を追って確認してきました。初心者が最初につまずきがちなポイントをできるだけ平易な表現で解説し、少しでも理解しやすくなるように構成しています。

まずFetch APIは、サーバーと通信してデータを取得するための仕組みであり、JavaScriptの標準の方法としてブラウザに組み込まれています。Reactアプリでももちろんそのまま利用でき、APIから取得した情報をコンポーネント内の状態として保存し、それを画面表示に利用する流れは、多くのWebアプリケーションに共通する基本構造です。特に、useStateとuseEffectを組み合わせることが、Reactにおける通信処理の基本パターンとなります。

JSONは人間にも読みやすいフォーマットでありながら、プログラムが扱いやすい構造を備えているため、Webの世界では標準的なデータ形式となっています。{"キー": "値"}という単純な構造を理解しておけば、どのような種類のデータでも柔軟に扱えるようになります。Fetch APIと組み合わせることで、ユーザー情報・商品情報・記事データなど、多様なデータを扱うアプリケーション開発が可能になります。

Reactで通信を行う際には、fetch()の返り値であるPromiseを使い、response.json()でJSONをオブジェクトへ変換し、setStateで状態を更新するという一連の流れを確実に理解することが大切です。通信処理がうまく動かないときは、URLの間違い、ネットワーク環境、CORSの制約など、いくつかの原因に分けて確認することができます。こうしたポイントを押さえておけば、アプリが意図通りに動かないときにも冷静に原因を探ることができるようになります。

また、ReactとFetch APIを組み合わせることに慣れてくると、単にデータを取得して表示するだけでなく、サーバーにデータを送るPOSTリクエストや、ユーザー操作に応じて動的にデータを更新する機能なども実装できるようになります。これらはショッピングカート機能、コメント投稿機能、リアルタイム検索など、さまざまな実際のアプリで利用されている仕組みです。今回学んだ基礎が、より高度なReactアプリケーション開発の第一歩となるでしょう。

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

以下はFetch APIとuseEffectを組み合わせた基本構造の復習です。外部データ取得の仕組みを理解するための再確認として活用してください。


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

function SampleFetchList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        if (!res.ok) {
          throw new Error("データ取得に失敗しました");
        }
        return res.json();
      })
      .then((data) => {
        setItems(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

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

      {loading && <p>読み込み中です…</p>}
      {error && <p style={{ color: "red" }}>エラー: {error}</p>}

      {!loading && !error && (
        <ul>
          {items.slice(0, 5).map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SampleFetchList;

上記のように、通信中・成功時・失敗時の状態をそれぞれ丁寧に切り替えることで、ユーザーにとって安心して利用できる画面を作ることができます。こうした実装は、通信を行うあらゆるアプリケーションで役立ちます。

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

生徒「Fetch APIって難しそうだと思っていましたが、流れを覚えると扱いやすいですね！」

先生「そうですね。JSONの構造が理解できれば、Reactでのデータ処理が一気に楽になりますよ。」

生徒「useEffectの中でfetchを書いていた理由もよくわかりました。ページ表示と同時にデータを取りにいくんですね！」

先生「その通りです。通信のタイミングを考えるのはとても重要なんですよ。」

生徒「エラーメッセージの確認も大切なんだと感じました。実際の開発では欠かせませんね。」

先生「エラー対処ができるようになると、一段レベルアップした開発ができるようになります。」

生徒「Fetch APIとJSONを理解することで、いろんな外部サービスとつなげられそうでワクワクします！」

先生「その気持ちが一番大切です。次はPOSTリクエストや検索機能にも挑戦してみましょうね。」