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

生徒

「Reactで外部のデータを読み込むにはどうすればいいですか？」

先生

「そのときに活躍するのがFetch APIという機能です。」

生徒

「ReactでFetch APIってどうやって使うんですか？書き方が分かりません…」

先生

「それでは、ReactでのFetch APIの基本的な使い方を順を追って説明しましょう！」

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

ReactでWebアプリを作るとき、「サーバーから情報を取得する」「サーバーにデータを送信する」といった処理が必要になります。Fetch APIは、そういったサーバーとのやり取りを行うための機能です。

React単体ではサーバー通信の機能は含まれていませんが、JavaScriptの標準機能であるFetch APIを使うことで、外部APIとの連携が可能になります。

たとえば、天気情報を取得したり、ユーザー情報を送信したりする際に活用されます。

2. 最も基本的な書き方（GET通信）

まずは一番基本となる「GET通信（外部から情報を取得）」の使い方をReactで見てみましょう。


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

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((json) => setData(json));
  }, []);

  return (
    <div>
      <h1>記事のタイトル：</h1>
      {data && <p>{data.title}</p>}
    </div>
  );
}

export default App;

（画面に「記事のタイトル：」と表示され、APIから取得したタイトルが下に表示されます）

3. useEffectとfetchの関係とは？

useEffect（ユーズエフェクト）は、Reactでコンポーネントが画面に表示されたタイミングで処理を実行する仕組みです。
つまり、「ページが開かれた瞬間にサーバーと通信する」といった場面で使います。

Fetch APIはその中に書くのが一般的です。もしuseEffectを使わずにfetchを書いてしまうと、何度も通信してしまうなど予期しない動作になることがあります。

4. データ取得後の画面更新

通信して取得したデータは、useStateを使って保存します。そしてそのデータを画面に表示します。

useStateは、Reactで「変化する値（状態）」を扱う仕組みです。たとえば、最初は空っぽのデータを、通信後に新しいデータで更新します。

状態を変えると、自動的に画面が再表示（再レンダリング）されます。

5. 通信エラーの処理も忘れずに

Fetch APIを使うときは、通信に失敗することも想定しておくことが大切です。
たとえばインターネット接続が不安定だったり、サーバーが止まっていたりすると、エラーになります。

そのために、.catch()という書き方でエラーを処理できます。


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

このように書いておくと、万が一のときでもエラー内容が表示され、原因の調査がしやすくなります。

6. POST通信でデータを送るには？

サーバーにデータを送るときには、POST通信を使います。たとえば、ユーザーが入力した名前を送信したい場合は次のように書きます。


fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "テスト投稿",
    body: "これはテストです",
    userId: 1,
  }),
})
  .then((res) => res.json())
  .then((data) => console.log("送信完了", data))
  .catch((error) => console.error("送信エラー", error));

headersで「データ形式はJSONですよ」と指定し、bodyで実際に送りたいデータをJSON.stringify()で文字列にして送ります。

7. 実際のアプリではどんなときに使う？

Fetch APIは、実際のReactアプリケーションで非常に多く使われています。以下のような場面で使われます。

ニュースアプリで最新記事を読み込む
天気予報アプリで現在の天気を取得
チャットアプリでメッセージを送受信
アンケートフォームの送信
ログイン・登録の認証処理

つまり、リアルタイムで情報を取得・送信したいときに、Fetch APIは欠かせない存在です。

8. よくある失敗ポイント

初心者がつまずきやすい注意点も見ておきましょう。

URLのミス：URLが間違っていると通信できません。
useEffectの書き忘れ：fetchはuseEffectの中で使いましょう。
JSON変換を忘れる：res.json()を忘れるとデータが使えません。
セキュリティ制限（CORS）：違うドメインに通信できないことがあります。

最初のうちは、公式のAPIサンプルなどを使って練習すると安心です。

まとめ

ReactにおけるFetch APIの基本を振り返ろう

ここまで、ReactでFetch APIを使ってサーバーと通信する基本的な流れを学んできました。 Fetch APIは、JavaScriptに標準で用意されている機能であり、特別なライブラリを追加しなくても、サーバーからデータを取得したり、サーバーへデータを送信したりできる点が大きな特徴です。 Reactでは画面表示を担当する仕組みと、通信処理をうまく組み合わせることで、動的に内容が変わるアプリケーションを作ることができます。

特に重要なのは、「いつ通信を行うか」という考え方です。 useEffectを使うことで、画面が表示されたタイミングや、特定の状態が変わったときだけ通信を行えるようになります。これにより、無駄な通信を防ぎ、意図した動作を実現できます。 Fetch APIとuseEffectは、Reactでサーバー通信を行ううえでセットで覚えておきたい基本知識です。

データ取得と画面更新の関係を理解する

Fetch APIで取得したデータは、そのままでは画面に表示されません。 useStateを使って状態として保存し、その状態をJSXで表示することで、初めてユーザーの目に見える形になります。 Reactでは「状態が変わると画面が更新される」という仕組みが基本になっているため、データ取得と画面表示は常にセットで考えることが大切です。

最初は、データが表示されない、何も起きていないように見えると感じることもあるかもしれません。しかし、その多くは「状態に入れていない」「条件付き表示を書いていない」といった小さな原因によるものです。 Fetch APIの結果をstateに入れ、stateを使って表示するという流れを意識すれば、 Reactでのデータ表示はぐっと分かりやすくなります。

エラー処理を入れることの大切さ

サーバー通信は、必ずしも成功するとは限りません。通信エラーやサーバー側の問題、ネットワーク環境など、さまざまな理由で失敗する可能性があります。そのため、Fetch APIを使う際には、catchを使ったエラー処理を入れておくことが重要です。

エラー処理を書いておくことで、開発中に原因を特定しやすくなり、実際のアプリでも「何が起きているのか分からない」という状態を避けられます。初心者のうちから、成功した場合だけでなく、失敗した場合も想定してコードを書く癖をつけておくと、後々の開発がとても楽になります。

シンプルなFetch APIの流れを再確認


useEffect(() => {
  fetch("https://example.com/api")
    .then((res) => res.json())
    .then((data) => setData(data))
    .catch((error) => console.error(error));
}, []);

（画面が表示されたタイミングでサーバーに通信し、取得したデータが画面に反映されます）

この基本形を理解しておけば、ニュース取得、ユーザー情報の表示、フォーム送信など、さまざまな場面に応用できます。まずはこの形をしっかり身につけることが、Reactでのサーバー通信を理解する近道です。