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

生徒

「Reactでサーバーからデータを取得するにはどうすればいいんですか？」

先生

「そのときに使うのが、Fetch APIという機能です。」

生徒

「Fetch APIってなんだか難しそう…ReactでのGETリクエストの書き方を教えてください！」

先生

「では、ReactでFetch APIを使ってGETリクエストを送る方法を、やさしく説明していきましょう。」

1. GETリクエストとは何か？

GET（ゲット）リクエストとは、サーバーから情報を「受け取る」ための通信方法です。たとえば「ニュース記事の一覧を取得する」「ユーザーのプロフィール情報を表示する」といった場面で使われます。

これは「この住所に手紙ください」と郵便局にお願いするようなイメージです。住所がURLで、手紙がデータというわけです。

2. ReactでFetch APIを使ってGETリクエストを送る方法

Reactでは、Fetch APIと呼ばれるJavaScriptの機能を使って、簡単にGETリクエストを送ることができます。以下は、その基本的な書き方です。


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

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

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

  return (
    <div>
      <h1>取得したタイトル：</h1>
      {data && <p>{data.title}</p>}
    </div>
  );
}

export default App;

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

3. useEffectとfetchの関係を理解しよう

useEffectは、Reactで「画面が表示された直後」に一度だけ実行したい処理を書く場所です。
たとえば、初めてページが開かれたときにデータを取得したいときに使います。

fetchはその中で呼び出すようにしましょう。そうすることで、無限ループのようなエラーも防げます。

4. fetch関数の中身を詳しく見てみよう

fetch関数にURLを渡すと、そのアドレスにリクエストを送って、結果（レスポンス）を受け取ります。その後、.json()で中身を取り出します。

そして、useStateで保存して、画面に表示できるようにするのが基本の流れです。

fetch("URL")：サーバーにアクセス
.then((res) => res.json())：JSON形式のデータに変換
.then((data) => 処理)：画面表示などの処理
.catch()：エラーがあったときの処理

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

JSON（ジェイソン）とは、サーバーとデータをやり取りするためのフォーマット（形式）です。人間が読んでもわかりやすく、コンピュータでも扱いやすい特徴があります。

たとえば以下のような形式で書かれます。


{
  "id": 1,
  "title": "これはテスト記事です",
  "body": "記事の内容がここに入ります"
}

このようなデータをfetchで取得し、.json()でJavaScriptで使える形に変換するわけです。

6. データが取得できないときの確認ポイント

GETリクエストを送っても、うまくいかないときがあります。そんなときは、以下の点をチェックしましょう。

URLが間違っていないか？
インターネットに接続されているか？
サーバーが動いているか？
response.json()を忘れていないか？

また、エラーが起きたときのために、.catch()でログを出しておくと調査がしやすくなります。

7. 実践的な例：記事一覧を取得する

先ほどの例は1件だけのデータでしたが、複数件の一覧を取得することも可能です。たとえば次のように書くと、複数の記事タイトルを取得できます。


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

function App() {
  const [posts, setPosts] = useState([]);

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

  return (
    <div>
      <h1>記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「記事一覧」と表示され、取得した複数の記事タイトルがリストで表示されます）

8. GETリクエストの流れ

最後に、GETリクエストの基本の流れを整理しておきましょう。

useStateでデータ用の変数を用意
useEffectでfetchを呼ぶ
fetchでURLにアクセス
res.json()で中身を取り出す
set関数で状態を更新
JSXで表示する

ReactとFetch APIを組み合わせることで、サーバー通信ができる動的なアプリを簡単に作れるようになります。

まとめ

ReactとFetch APIを組み合わせたサーバー通信の流れを全体としてふりかえると、GETリクエストという基本的な通信方法を理解することが、動的な画面づくりにおいて欠かせない役割を果たしていることがよく分かります。とくに、画面が初めて読み込まれた瞬間にサーバーから必要な情報を取得するという動作は、多くのアプリケーションに共通した重要な処理であり、その基盤となるのがuseEffectとfetchの組み合わせです。さらに、fetchで取得したデータをuseStateに保存し、JSXで柔軟に画面表示へとつなげる一連の操作を理解することで、記事一覧や詳細情報の表示など、実践的な場面でも応用できる力が身につきます。データが取得できないときの確認ポイントや、複数件のデータを扱う際のmapによるリスト表示なども、日常的なプロジェクトでそのまま使える大切な知識です。こうしたReactのサーバー通信の基礎は、より複雑なAPI連携やデータ管理を行う際の土台となるため、今回の内容をしっかり理解しておくことで、実践的なフロントエンド開発へと大きく踏み出せるようになります。また、JSON形式のデータ構造を扱う際のポイントや、レスポンス処理の流れを意識することで、APIから得た情報を安全かつ正確に利用できるようになります。とくに、初心者がつまずきやすい「非同期処理のタイミング」や「画面更新のタイミング」を自然と理解できる点も、今回の学びの大きなメリットです。Reactのアプリケーションは、サーバーから取得したデータをどのように扱うかによって、ユーザー体験が大きく変わるため、fetch関数の流れを正しく踏まえることが極めて重要です。こうした基本的な使い方を知っているだけで、実際の開発現場でもスムーズにデータ取得処理を組み立てられるようになり、柔軟なフロントエンド構築へとつなげられます。

サンプルプログラムでふりかえり


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

function FetchCheck() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((json) => setItems(json))
      .catch((err) => console.error("取得失敗:", err));
  }, []);

  return (
    <div class="card p-3">
      <h2 class="fw-bold fs-4">ユーザー一覧</h2>
      <ul>
        {items.map((u) => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchCheck;

このプログラムでは、Fetch APIによるGETリクエストの仕組みをそのまま応用して「ユーザーの一覧」を取得しています。useEffectによって画面表示と同時にデータを取得し、setItemsで状態更新を行い、結果をリストとして描画するという流れは、記事で学んだ一連の動作とまったく同じ構造です。Reactにおけるサーバー通信の基本は、このように状態管理と非同期処理が密接に関係しており、学んだ内容を再度確認することで理解がより深まります。画面が表示されるたびに最新データを取得するという流れを自然に取り入れることで、柔軟なデータ表示を行うアプリケーションの開発が可能になり、より複雑なAPI処理にも対応しやすくなります。

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

生徒

「今日はReactでサーバー通信する流れがよく分かりました！fetchでデータを取ってきて、useStateで管理して、画面に出すという手順が頭の中でつながりました。」

先生

「その理解はとても大切ですよ。GETリクエストの流れを押さえておけば、一覧表示も詳細画面も自在に作れるようになります。」

生徒

「非同期処理が難しいと思っていたけれど、useEffectと組み合わせると自然に動くんですね！」

先生

「そうです。画面が初めて読み込まれたときにfetchするという考え方を覚えておくと、多くのReactアプリで応用できますよ。」

生徒

「これならAPIを使ったアプリも作れそうです！次はPOSTリクエストにも挑戦してみたいです。」

先生