JavaScriptとReactでのAPI処理：基礎から高度なレベルまで

👋フロントエンダーの皆さん、こんにちは！

今日は、JavaScriptとReactの世界で最も重要なトピックの1つであるAPIの操作について説明します。HTTP リクエストの送信、エラーの処理、fetch、axios、TanStack Query などの一般的なライブラリの使用方法について説明します。

📡 APIとは何ですか？

API (Application Programming Interface) プログラムが互いにデータを交換するためのインターフェースです。たとえば、Reactアプリケーションは、APIを介してリモートサーバーから投稿を受信できます。

🛠️ APIはフレームワークを使用して作成されることが多いです。

• JavaScript — Express.js

• Python — Django / Flask

• Go — Gin

• Java — Spring Boot

• C# — ASP.NET Core

🔄 API処理とは

API処理とは、HTTPリクエストをサーバーに送信し、受信した応答を処理するプロセスです。JavaScriptとReactでは、次のものが最もよく使用されます。

• fetch — 組み込みブラウザメソッド

• axios — 人気の外部ライブラリ

• TanStack Query （旧React Query）— Reactで非同期データを簡単に管理するためのライブラリ

📬 主要なHTTPメソッド

⚙️ fetch を介したAPIの操作

シンプルな GET リクエスト

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Error:', err));

本文を含むPOSTリクエスト

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'JS is cool!',
    body: 'Scribbler allows you to combine HTML and JS',
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Error:', err));

try/catchによるエラー処理

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) throw new Error('Network error');
    const data = await response.json();
    scrib.show(data);
  } catch (err) {
    scrib.show('Error:', err);
  } finally {
    scrib.show('Request completed');
  }
}
getData();

⚡ axiosの使用

axios は、よりクリーンな構文と便利なエラー処理を提供します。

GETリクエスト

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Error:', err));

POSTリクエスト

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios rules!',
  body: 'Error handling is much easier',
  userId: 1
}, {
  headers: { 'Content-Type': 'application/json' }
})
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Error:', err));

高度なエラー処理

axios.get('https://jsonpl.typicode.com/posts')
  .catch(error => {
    if (error.response) {
      scrib.show('Server error:', error.response.status);
    } else if (error.request) {
      scrib.show('No response from the server');
    } else {
      scrib.show('Request error:', error.message);
    }
  });

⚛️ ReactのAPI（useEffect + useState）

import { useEffect, useState } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        if (!res.ok) throw new Error('Error retrieving data');
        return res.json();
      })
      .then(setPosts)
      .catch(err => setError(err.message));
  }, []);

  if (error) return <p>Ошибка: {error}</p>;

  return (
    <div>
      <h2>Посты</h2>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}

⚙️ TanStack Query (React Query)

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data: posts, error, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts
  });

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;

  return <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

✅結論

📌 API処理は、Web開発における重要なスキルです。主なもの：

• fetch と axios を習得する

• HTTPメソッドを理解する

• エラー処理ができる

• ReactでuseEffectを使用する

• TanStack Queryを使用してデータの読み込みを自動化する