手を動かしてAPI取得の理解が深まった話

【概要】

API（Application Programming Interface）とは、他者が提供するデータや機能を、自分のアプリケーションに取り込むための仕組みです。例えば、テキストエディターやSNS機能をゼロから作成しなくても既存の機能を利用できます。

今回は、無料で利用可能なAPIを使用して、API取得に対する理解が深まったお話です。

無料で使えるAPIの例

1. いろいろな写真を取得できるAPI https://picsum.photos/
   • 使用したエンドポイント: https://picsum.photos/v2/list?page=2&limit=20
2. ハリー・ポッターのキャラクター情報を取得できるAPI https://hp-api.onrender.com/
   • 使用したエンドポイント: https://hp-api.onrender.com/api/characters

【プログラムのAPI取得について概要】

• APIのURL(エンドポイント)がJSON形式であること。
• APIからデータを取得するには非同期処理が必要です。非同期処理はデータ取得中に他の処理を並行実行します。
• 今回は2つのAPIを取得するのでReactでコンポーネント化しました。

Reactを使うことで、複数のAPIから取得したデータをコンポーネントごとにわけられます。またコンポーネント化することでコードの管理がしやすくなります。今回は、「いろいろな写真」と「ハリー・ポッター」の2つのAPI情報と「ナビゲーションバー」で、3つのコンポーネント化しました。

【プログラムの構成と説明】

メインのプログラムApp.js

App.jsは、2つのAPIからデータを取得し、それぞれのデータをコンポーネントに分けて表示します。

import { useEffect, useState } from "react";
import './App.css';
import ImageCard from "./components/ImageCard/ImageCard";
import Navbar from "./components/Navbar/Navbar";
import HarryPotterCard from "./components/HarryPotter/HarryPotterCard";
function App() {
  const imagesURL = "https://picsum.photos/v2/list?page=2&limit=20"; // いろいろな写真のAPI
  const harryPotterURL = "https://hp-api.onrender.com/api/characters"; // ハリー・ポッターのAPI
  
　// データ取得状況を管理
　const [loading, setLoading] = useState(true);
  const [images, setImages] = useState([]);
  const [harryPotterData, setHarryPotterData] = useState([]);
  
　// 非同期処理でAPIデータを取得
　useEffect(() => {
    const fetchData = async () => {
      try {
        const [imagesRes, harryPotterRes] = await Promise.all([
          fetch(imagesURL),
          fetch(harryPotterURL)
        ]);

　　　　// レスポンスデータをJSON形式に変換
        const imagesData = await imagesRes.json();
        const harryPotterData = await harryPotterRes.json();
        setImages(imagesData);
        setHarryPotterData(harryPotterData);
      } catch (error) {
        console.error("データの取得に失敗しました", error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);


  return (
    <>
      <Navbar />
      <div className="App">
        {loading ? (
          <h1>Loading...ロード中です。</h1>
        ) : (
          <div className="container">
            <div className="imageContainer">
              {images.map((image, index) => (
                <ImageCard key={index} image={image} />
              ))}
            </div>
            <div className="harryPotterContainer">
              {harryPotterData.map((character, index) => (
                <HarryPotterCard key={index} character={character} />
              ))}
            </div>
          </div>
        )}
      </div>
    </>
  );
}
export default App;

ハリー・ポッターのコンポーネント.js

このコンポーネントは、ハリー・ポッターAPIから取得したキャラクター情報を表示します。

import React from "react";
import "./HarryPotterCard.css";
const HarryPotterCard = ({ character }) => {
  return (
    <div className="harryPotterCard">
      <img src={character.image} />
      <h3>name：{character.name}</h3>
      <p>dateOfBirth：{character.dateOfBirth}</p>
    </div>
  );
};
export default HarryPotterCard;

APIを取得したスクリーンショット：「name・dateOfBirth・image」を取得しています。

【感想】

APIの「I」は、インターフェースです。「何か」と「何を」つなぐ役割を果たしています。APIを使用し、データの取得と非同期処理、Reactを使ったコンポーネント化によって、APIデータを表示することができました。実際に手を動かすことで、以下のような理解が深まりました。

1. 非同期処理の必要性：APIからのデータ取得は即時に完了しないため、非同期処理を用いることで、他の処理を止めずに進行できること。
2. コンポーネント化：データをコンポーネント(部品)に分けることで、コードの管理がしやすくなること。
3. APIの仕組み: APIを使用すれば、他者が提供するデータや機能を自分のアプリケーションに取り入れることができること。

最初からそのデータや機能を作成しなくてもAPI経由で自分のアプリケーションに統合できるのです！