Webアプリを作るとき、外部のデータを取得したり送信したりすることがよくあります。これを「API通信」といいます。このページでは、Reactを使ってAPIと通信する方法として「Fetch」と「Axios」の2つの手段を紹介します。

APIとは？

API（Application Programming Interface）とは、異なるソフトウェア同士がやり取りをするためのルールや仕組みのことです。例えば、天気予報のデータを取得するAPIを使うことで、アプリに最新の天気情報を表示できるようになります。

Fetchを使ったAPI通信

Fetchの基本

Fetchはブラウザに組み込まれているAPIで、簡単にHTTPリクエストを送信できます。以下の例では、Fetchを使ってAPIからデータを取得しています。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

FetchをReactで使う

Reactのコンポーネントの中でFetchを使う方法も簡単です。以下のように実装できます。

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  if (!data) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
};

Axiosを使ったAPI通信

Axiosとは？

AxiosはPromiseベースのHTTPクライアントで、ブラウザの外でもNode.jsでも動作します。使い方はFetchと似ていますが、少しだけ簡単に感じることが多いです。

Axiosの基本

まずは、Axiosをインストールしましょう。npmを使って以下のコマンドを実行します。

npm install axios

次に、Axiosを使ってデータを取得する例を見てみましょう。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error:', error);
  });

AxiosをReactで使う

Reactのコンポーネントの中でもAxiosを使ってデータを扱えます。こちらも非常にシンプルです。

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  if (!data) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
};

まとめ

今回はReactを使ったFetchとAxiosによるAPI通信の基本について説明しました。Fetchはブラウザに内蔵されている方法で、Axiosはより便利なライブラリです。どちらも簡単に使えるので、あなたのプロジェクトに合った方を選んで活用してみてください。