JavaScript、jQuery、React.jsでAPI呼び出しをマスター：初心者向けチュートリアル

2024-04-12

React.jsにおけるAPI呼び出しのベストプラクティス

Fetch APIは、ブラウザのネイティブAPIであり、非同期でHTTPリクエストを行うためのシンプルな方法を提供します。構文が分かりやすく、使いこなせるようになると強力なツールとなります。

利点:

軽量で使いやすい
Promiseベースで非同期処理を扱いやすい
追加のライブラリ不要

エラー処理がやや煩雑
キャッシュ処理や認証機能は自分で実装する必要がある

例:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axiosは、Fetch APIをより使いやすくするためのライブラリです。Promiseベースで非同期処理を行い、エラー処理やキャッシュ処理などの機能を備えています。

Fetch APIよりも使いやすく、コードが簡潔になる
エラー処理やキャッシュ処理などの機能が豊富
インターセプター機能でリクエストとレスポンスをカスタマイズできる

Fetch APIよりも重い

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

React Hooksは、React 16.8以降で導入された新機能であり、関数コンポーネントで状態管理や副作用処理を行うためのフックを提供します。useStateやuseEffectなどのフックと組み合わせることで、API呼び出しを簡単に実装できます。

関数コンポーネントでシンプルに実装できる
コード的可読性が高くなる
Reactのコンテキストと自然に統合できる

Fetch APIやAxiosよりも新しい機能なので、まだ広く普及していない
複雑なAPI呼び出しには向いていない

const [data, setData] = useState([]);

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

どの方法が最適かは、状況によって異なります。シンプルなAPI呼び出しの場合はFetch APIが軽量で使いやすいですが、より複雑なAPI呼び出しや、エラー処理やキャッシュ処理が必要な場合は、Axiosの方が適しています。React Hooksは、関数コンポーネントでAPI呼び出しをシンプルに実装したい場合に有効です。

補足

上記以外にも、jQueryなどのライブラリを使用してAPI呼び出しを行うこともできますが、非推奨となりつつあります。
セキュリティ対策として、APIキーなどの機密情報は環境変数などに格納し、コードに直接記述しないようにしましょう。
開発環境と本番環境でAPIのURLを切り替える必要がある場合は、条件分岐や環境変数などを利用しましょう。

Fetch API

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

このコードは、JSONPlaceholder APIの/todos/1エンドポイントにGETリクエストを行い、レスポンスのJSONデータをコンソールに出力します。

Axios

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

React Hooks

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {data.title}
    </div>
  );
}

export default App;

これらのサンプルコードはあくまでも基本的な例であり、状況に応じて様々なバリエーションで利用することができます。

上記のサンプルコードは、非同期処理であるため、コンポーネント内でuseEffectフックを使用する必要があります。
API呼び出しの際に、認証情報やヘッダー情報などを設定する必要がある場合は、適切なオプションを設定する必要があります。
エラー処理をより詳細に行いたい場合は、try-catch構文やエラーハンドリングライブラリなどを利用することができます。

React.jsにおけるAPI呼び出しは、様々な方法で実装することができます。状況に応じて適切な方法を選択し、上手に活用してください。

React.jsにおけるAPI呼び出しのその他の方法

GraphQLは、APIデータのクエリを定義するための言語です。従来のREST APIよりも柔軟で効率的なデータ取得が可能で、近年注目を集めています。

必要データのみを取得できるため、レスポンスサイズが小さくなり、パフォーマンスが向上する
クエリを柔軟に定義できるため、複雑なデータ構造にも対応しやすい
キャッシュしやすい

習得コストがやや高い
サーバー側の実装が必要

import { useQuery } from '@apollo/client';

const GET_TODO = gql`
  query GetTodo($id: ID!) {
    todo(id: $id) {
      id
      title
      completed
    }
  }
`;

function App() {
  const { data, loading, error } = useQuery(GET_TODO, {
    variables: { id: 1 },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  const todo = data.todo;
  return (
    <div>
      {todo.title}
      {todo.completed ? '完了' : '未完了'}
    </div>
  );
}

WebSocketsは、クライアントとサーバー間で双方向のリアルタイム通信を可能にする技術です。チャットアプリケーションやゲームなど、リアルタイム性が求められるアプリケーションに適しています。

クライアントとサーバー間でリアルタイムにデータの送受信が可能
大量のデータ転送に効率的

複雑な実装が必要
ブラウザやサーバーのサポート状況によっては利用できない場合がある

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

const socket = new SockJS('/websocket-endpoint');
const stompClient = Stomp.over(socket);

stompClient.connect({}, () => {
  stompClient.subscribe('/topic/messages', (message) => {
    console.log(message.body);
  });
});

Server-side Renderingは、Reactアプリケーションをサーバー側でレンダリングし、HTMLとしてクライアントに送信する技術です。これにより、初回のページロードを高速化することができます。

初回のページロードが高速になる
SEO対策に有利

サーバー側の負荷が大きくなる
クライアント側のJavaScript実行が遅くなる

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(
    <App />
  );

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});