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

生徒

「Reactでデータを読み込むときに、Fetch APIとAxiosってどっちを使えばいいんですか？」

先生

「どちらも人気がありますが、使い方や特徴が少し違います。今回はその違いをわかりやすく説明しますね。」

生徒

「初めてReactを使うんですが、なるべく簡単な方法で始めたいです！」

先生

「安心してください。プログラミング未経験でも理解できるように、一から丁寧に説明していきます！」

1. Reactでサーバーと通信するには？

Reactで外部のサーバーやAPI（アプリケーション・プログラミング・インターフェース）からデータを取得するには、「Fetch API」や「Axios」という手段を使います。

例えば、天気予報のアプリやチャットアプリでは、外部のサービスから情報を取り込んで表示することが多いです。そのときに使うのが、こうした通信方法です。

「サーバーと通信する」とは、インターネットの先にある別のコンピュータに「データをください！」とお願いすることだとイメージすると分かりやすいでしょう。

2. Fetch APIとは？

Fetch API（フェッチ・エーピーアイ）は、JavaScriptの標準機能で、追加ライブラリなしで使えるのが特徴です。

とても軽く、Reactでもすぐに使えるため、まずはFetch APIから試す人が多いです。

ただし、エラー処理やデータの扱いが少し面倒になることがあります。


useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      if (!response.ok) {
        throw new Error("サーバーエラー");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error.message);
    });
}, []);

（ユーザー一覧のデータがコンソールに表示されます。通信に失敗した場合はエラーメッセージが出力されます）

3. Axiosとは？

Axios（アクシオス）は、JavaScriptやReactで人気の高いライブラリのひとつで、Fetch APIをより使いやすくした便利ツールです。

エラーハンドリングやリクエストの設定、レスポンスの処理が簡単に書けるのが魅力です。

使うには、最初にインストールが必要です。


npm install axios


import axios from "axios";

useEffect(() => {
  axios
    .get("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error(error.message);
    });
}, []);

（Axiosを使うと、取得したデータが簡単に取り出せて、エラーメッセージも扱いやすくなります）

4. Fetch APIとAxiosの違いを比較してみよう

Fetch APIとAxiosの違いを、初心者でも分かりやすいように表にまとめました。

比較項目	Fetch API	Axios
導入の手間	不要（最初から使える）	必要（npmでインストール）
レスポンス形式	自分で`.json()`を呼び出す	自動でJSONとして返る
エラー処理	やや複雑	簡単に扱える
コードの簡潔さ	やや長くなる	短く書ける
拡張性（設定など）	低め	高め（カスタマイズしやすい）