React でのデータの取得

データの取得は React アプリケーションの基礎であり、ユーザー データのロード、コンテンツの動的レンダリングなどの機能を強化します。 React は、アプリの複雑さとパフォーマンスのニーズに応じて選択できるさまざまなライブラリとアプローチを備えた、データ処理のための柔軟なエコシステムを提供します。この記事では、Fetch API、Axios、Async/Await、React Query、SWR、GraphQL など、React でデータをフェッチするためのいくつかの主要なメソッドについて説明します。

---

1. Fetch API を使用したデータの取得

Fetch API は、ネットワーク リクエストを簡素化する組み込み Web API であり、最新のブラウザで広くサポートされています。 API リクエストからのデータを表す Response オブジェクトで解決される Promise を返します。

例

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

フェッチ API を使用する場合

• 小規模プロジェクト、または基本的なデータ取得が必要なプロジェクト。
• ブラウザベースのアプリとの最小限の依存関係と互換性。

---

2. データの取得に Axios を使用する

Axios は、ブラウザーおよび Node.js 用の Promise ベースの HTTP クライアントであり、リクエストとレスポンスのインターセプターや、リクエストとレスポンスを変換する機能など、Fetch API よりも多くの機能を提供します。

例

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Axios の利点

• Fetch API を完全にはサポートしていない可能性がある古いブラウザをサポートします。
• HTTP エラー コードを拒否することで、より適切なエラー処理を提供します。
• リクエストとレスポンスの変換が簡単にできるため、より大規模で複雑なアプリケーションで人気があります。

---

3. 可読性を高めるために Async/Await 構文を使用する

async と await を使用すると、JavaScript での非同期コードの処理がはるかに簡単になりました。 Fetch API と Axios の両方を async/await 構文で使用すると、コードが読みやすくなります。

フェッチを使用した例

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

非同期/待機の利点

• 可読性が向上し、Promise チェーンよりも扱いやすくなります。
• エラー処理に try/catch ブロックを使用できるようにします。

---

4. React Query: 強力なデータのフェッチおよびキャッシュ ライブラリ

React Query はサーバー状態のキャッシュ、同期、更新を処理し、データのフェッチ、更新、キャッシュを簡単に行うことができます。 React Query は自動データ キャッシュと再フェッチ機能を備えているため、複雑なアプリケーションでよく使用されます。

例

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

React クエリの利点

• データのキャッシュとバックグラウンドの更新。
• API と適切に統合し、ネットワーク障害の再試行ロジックを処理します。
• 読み込み、エラー、状態の再取得を管理するためのコードを削減します。

---

5. Vercel の SWR (Stale-while-Revalidate)

SWR は、キャッシュと再検証戦略を優先するもう 1 つのデータ取得ライブラリです。 Vercel によって開発された SWR は、ユーザーがページを再訪問するたびにバックグラウンドでデータを自動的に再取得することで、データを最新の状態に保ちます。

例

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

SWRのメリット

• バックグラウンドでの自動再検証を伴うキャッシュファーストのデータ取得を使用します。
• 一般的なバックエンド フレームワークおよび RESTful API と統合します。
• 最小限のコードでデータを最新の状態に保つ必要があるアプリケーションに最適です。

---

6. GraphQL を使用したデータの取得

GraphQL は、返されるデータをより詳細に制御できる API のクエリ言語です。これにより、必要なフィールドのみをフェッチできるようになり、オーバーフェッチやアンダーフェッチが減ってパフォーマンスが向上します。

Apollo クライアントを使用した例

Apollo クライアントを使い始めるには、npm install @apollo/clientgraphql を実行してインストールします。

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

GraphQL の利点

• 取得されるフィールドを制御することで、より効率的なデータの取得が可能になります。
• ネットワーク負荷を軽減し、特に複雑なデータやネストされたデータに有益です。
• Apollo Client などのライブラリと適切に統合され、開発者のエクスペリエンスが向上します。

---

結論

React でのデータ取得に適切な方法を選択することは、プロジェクトの複雑さ、パフォーマンスのニーズ、ライブラリとツールの好みによって異なります。簡単な概要は次のとおりです:

• Fetch API: 小規模なプロジェクトに適しています。組み込まれており最小限です。
• Axios: エラー処理が改善された、より高度な HTTP クライアント。
• Async/Await: 非同期コードの可読性と管理性が向上します。
• React Query: キャッシュ、バックグラウンドでの再取得、サーバー状態の管理に優れています。
• SWR: 再検証中に失効させる戦略。新しいデータの取得に最適です。
• Apollo を使用した GraphQL: 特定のフィールドが必要な複雑なデータ要件に最適です。

以上がReact でのデータの取得の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。