はじめに

前回の記事で外部APIを通信するJavaScriptのfetch関数の使い方について書きました。
本記事ではReactでAPI通信を使いこなせるようになる方法を、初心者でも理解できるように解説します。

ReactにおけるAPI通信

Webアプリケーションは、ユーザーが必要とする最新情報を提供するために、サーバーからデータを取得する必要があります。

Reactは、このデータをすばやくフロントエンドに反映させるJavaScriptのライブラリです。

API（Application Programming Interface）を通じて、Reactはサーバーからデータを取得し、画面をリアルタイムで更新します。

ReactとAPIの連携により、ユーザーは常に最新の情報を見ることができるのです。

Reactで外部APIからデータを取得して表示する方法

ここでは、公開APIから実際のデータを取得し、それを表示する方法を学びます。

使用するAPIのJSONデータ例

以下のJSONデータは、公開API「JSONPlaceholder」からのタスク情報のサンプルです。これは、実際に試すことができる無料のテストAPIです。

＊JSONPlaceholderを試してみた方はこちら
https://jsonplaceholder.typicode.com/

{
 "userId": 1,
 "id": 1,
 "title": "Sample Task",
 "completed": false
}

このデータは、特定のタスクに関する情報を表しています。ここでは、タスクのID、ユーザーID、タイトル、および完了状態が含まれています。

Reactコンポーネントでのデータ取得

以下は、ReactでAPIからデータを取得し、表示する基本的な例です。

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

function App() {
  const [task, setTask] = useState(null);

  useEffect(() => {
    //fetch('APIのエンドポイントを記述')
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => setTask(data))
      .catch(error => console.error("Fetching data failed", error));
  }, []);// 空の依存配列を渡すことで、コンポーネントのマウント時に一度だけ実行される

  if (!task) return <div>Loading...</div>;

  return (
    <div>
      <h1>Task Information</h1>
      <p>Title: {task.title}</p>
      <p>Completed: {task.completed ? 'Yes' : 'No'}</p>
    </div>
  );
}

}

この例では、useEffectフックを使用してコンポーネントのマウント時にAPIからデータを取得(fetch)しています。取得したデータは、useStateフックによってコンポーネントの状態として保持され、UIがそれに応じて更新されます。

まとめ

Reactを使用して外部APIからデータを取得し表示する方法は、API通信の基本から始め、Webアプリケーションを構築するための重要なスキルです。この記事で紹介した手法を活用し、実際に様々なAPIとの連携を試してみてください