reactの求人情報｜RESUMY JOBSreactの求人。株式会社Chottが運営するRESUMY JOBS（レジュミージョブ）は、大手・優良企業を中心に正社員からフリーランス案件まで豊富な求人情報を掲載中。reactの求人情報｜RESUMY JOBS

reactの求人はこちらから

APIとは、Application Programming Interfaceの略で、異なるソフトウェア間の通信を可能にするインターフェースのことです。ReactアプリケーションでAPI呼び出しが必要な理由は、バックエンドのデータを取得したり、外部サービスとの連携を行ったりするためです。

この記事では、React初心者から中級者を対象に、ReactでのAPI呼び出しに必要な非同期通信の基礎知識から、fetch API、axios、React Query、React Hooksを使った実践的な方法まで、幅広く解説します。

2. ReactでAPI呼び出しを行うための基礎知識

非同期通信とは？

非同期通信とは、リクエストを送信してからレスポンスが返ってくるまでの間、他の処理を実行できる通信方式のことです。JavaScriptでは、非同期通信を実現するためにPromiseやasync/await構文が使われます。

Promiseの基本

Promiseは、非同期処理の結果を表すオブジェクトです。Promiseには、pending（処理中）、fulfilled（処理成功）、rejected（処理失敗）の3つの状態があります。

const promise = new Promise((resolve, reject) => {
  // 非同期処理
  // ...
  if (/* 処理成功 */) {
    resolve(/* 成功結果 */);
  } else {
    reject(/* 失敗理由 */);
  }
});

promise
  .then((result) => {
    // 処理成功時の処理
  })
  .catch((error) => {
    // 処理失敗時の処理
  });

async/await構文

async/await構文は、Promiseをより読みやすく書くための構文です。async関数内でawait式を使うと、Promiseの処理が完了するまで待機し、結果を変数に代入できます。

async function fetchData() {
  try {
    const response = await fetch(/* URL */);
    const data = await response.json();
    // データ処理
  } catch (error) {
    // エラー処理
  }
}

3. fetch APIを使ったAPI呼び出し

fetch APIは、JavaScriptの標準的なAPI呼び出し方法です。

fetch APIの基本的な使い方

fetch(/* URL */)
  .then((response) => {
    // レスポンス処理
  })
  .catch((error) => {
    // エラー処理
  });

GETリクエスト、POSTリクエストの送信方法

// GETリクエスト
fetch(/* URL */)
  .then((response) => response.json())
  .then((data) => {
    // データ処理
  });

// POSTリクエスト
fetch(/* URL */, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(/* リクエストボディ */),
})
  .then((response) => response.json())
  .then((data) => {
    // データ処理
  });

レスポンスの処理（JSON、テキストなど）

fetch(/* URL */)
  .then((response) => response.json()) // JSONレスポンス
  .then((data) => {
    // データ処理
  });

fetch(/* URL */)
  .then((response) => response.text()) // テキストレスポンス
  .then((text) => {
    // テキスト処理
  });

エラーハンドリング

fetch(/* URL */)
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    // データ処理
  })
  .catch((error) => {
    // エラー処理
  });

4. axiosを使ったAPI呼び出し

axiosは、PromiseベースのHTTPクライアントライブラリで、fetch APIよりも使いやすいインターフェースを提供します。

axiosの基本的な使い方

import axios from 'axios';

axios.get(/* URL */)
  .then((response) => {
    // レスポンス処理
  })
  .catch((error) => {
    // エラー処理
  });

GETリクエスト、POSTリクエストの送信方法

// GETリクエスト
axios.get(/* URL */)
  .then((response) => {
    // レスポンス処理
  });

// POSTリクエスト
axios.post(/* URL */, /* リクエストボディ */)
  .then((response) => {
    // レスポンス処理
  });

レスポンスの処理（JSON、テキストなど）

axios.get(/* URL */)
  .then((response) => {
    const data = response.data; // JSON, テキストなど
    // データ処理
  });

エラーハンドリング

axios.get(/* URL */)
  .then((response) => {
    // レスポンス処理
  })
  .catch((error) => {
    if (error.response) {
      // レスポンスエラー処理
    } else if (error.request) {
      // リクエストエラー処理
    } else {
      // その他のエラー処理
    }
  });

5. React Queryを使ったAPI呼び出し

React Queryは、Reactアプリケーションでのデータ取得、キャッシュ、同期などの状態管理を簡単に行えるライブラリです。

React Queryの基本的な使い方

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading, error } = useQuery('myData', () =>
    fetch(/* URL */).then((res) => res.json())
  );

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

キャッシュ、再フェッチ、エラーハンドリングなどの機能

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading, error, refetch } = useQuery(
    'myData',
    () => fetch(/* URL */).then((res) => res.json()),
    {
      cacheTime: 60000, // 60秒間キャッシュ
      retry: 3, // エラー時に3回リトライ
      onError: (error) => {
        // エラー処理
      },
    }
  );

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
      <button onClick={() => refetch()}>Refetch</button>
    </div>
  );
}

6. React Hooksを使ったAPI呼び出し

React HooksでAPI呼び出しを行う場合、useState、useEffect、useContextなどを組み合わせて実装します。

useState、useEffect、useContextを使ったAPI呼び出しの実装

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

const DataContext = React.createContext();

function DataProvider({ children }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get(/* URL */)
      .then((response) => setData(response.data))
      .catch((error) => {
        // エラー処理
      });
  }, []);

  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  );
}

function MyComponent() {
  const data = useContext(DataContext);

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

カスタムフックの作成と活用

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

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

  useEffect(() => {
    axios.get(/* URL */)
      .then((response) => setData(response.data))
      .catch((error) => {
        // エラー処理
      });
  }, []);

  return data;
}

function MyComponent() {
  const data = useMyData();

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

7. まとめ

ReactでのAPI呼び出しには、fetch API、axios、React Query、React Hooksなど、様々な方法があります。非同期通信の基礎知識を理解した上で、プロジェクトの要件に合わせて適切な方法を選択することが重要です。

この記事を通して、ReactでのAPI呼び出しに関する理解が深まり、実践的なスキルが身についたのではないでしょうか。

reactの求人情報｜RESUMY JOBSreactの求人。株式会社Chottが運営するRESUMY JOBS（レジュミージョブ）は、大手・優良企業を中心に正社員からフリーランス案件まで豊富な求人情報を掲載中。reactの求人情報｜RESUMY JOBS