英語サイトを翻訳（Reactでのデータ取得方法）

Posted on by 股下ニッパチ

こんにちわ。ニッパチです。
絶賛英語の勉強中なので英語サイトを翻訳してみようと思います。意訳たっぷりで、一部調べてもよくわからないものはそのままにしています。対象のサイトはこちらです。以下は翻訳した内容です。

Reactでのデータ取得方法

アプリケーションを開発するとき、APIからデータを取得ことがよくあるます。This lets you deliver dynamic and often-updated content within your application.

外部サービスと連携したり、サーバーと通信したり、またはデータベースにアクセスしてデータを取得するでしょう。

この記事では、Reactを使ってデータをフェッチする方法を書いていきます。

必要なこと

  • Node.jsをインストール
  • Reactの基本的な理解
  • エディタ

APIとは？

APIとはApplication Programming Interfaceのことで、ウェブサイトとサーバーや異なるシステムとの情報のやり取りを可能とします。

レストランのウェイターとAPIは似ているかもしれません。レストランで食事するときキッチンに行って自分で料理を作って食べることはしないですよね。そんなことするより、ウェイターに食べたいものを注文し、ウェイターがシェフに伝え、シェフが料理し、その料理をウェイターがテーブルに運んでくるのが普通です。

このようにAPIはアプリケーションではウェイターのような役割を行います。It is a set of rules that lets one program ask another for something it needs.アプリケーションとのデータのやり取りの橋渡しになります。

なぜAPIがウェブ開発で大事なのか？

これにはいくつかの理由があります。

  • ウェブアプリケーションはデータベースやウェブサイトのようなさまざまなリソースからデータを取得する必要がある
  • APIs are a scalable option for managing high data or request volumes.
  • 既存の機能やサービスを再利用できる
  • 認証された個人またはプログラムだけ利用できることを保証することで安全性を保つ
  • データ層を切り分けることでウェブ、モバイル関わらず共通データを利用できる

HTTPリクエストとは？

HTTPリクエストのおかげでブラウザやスマホアプリがサーバーにメッセージを送ることができます。A HTTP request involves asking the server for specific data or an action and getting aresponse.サーバーはウェブページとサービスとやりとりして応答します。

APIを使うことで開発がより効率よく、柔軟になります。そしてセキュリティの向上や異なるシステムとの連携がとりやすくなります。

HTTPリクエストメソッドの種類

HTTPリクエストにはget,post,put,deleteなどさまざまなリクエストメソッドがありますが、よく使うものはgetとpostになります。

それぞれのメソッドの意味は以下の通りです。

  • GET: 特定のエンドポイントからデータを取得する際に使用
  • POST: 特定のエンドポイントにデータを送り、新規データを追加する際に使用
  • PUT: 特定のエンドポイントにデータを送り、既存データを編集する際に使用
  • DELETE: 既存データを削除する際に使用

One widely adopted way of checking APIs is through the browser.

この記事を見て、リクエストメソッドについてもっと学習しましょう

Reactでデータを取得する方法

Reactでデータをフェッチする方法いろいろありますが、始める前にReactのプロジェクトを作成しましょう。コマンドは以下の通りです。

npx create-react-app .

その後、以下のコマンドを実行します。

npm run dev

これで開発用のサーバーが起動しました。

上の画像で、ピリオドを追記していますが、これは便利なショートカットでこれにより現在のディレクトリにテンプレートが作成されます。

データを取得する様々な方法

1. SWRを使う

This method is used to fetch data from a server and is used in React. データを取得するときに起きる問題を管理し、ストレージを管理するのに役立ちます。SWRはuseState()とuseEffect()を含んでいるためインポートする必要はありません。

SWRの利点

  1. SWRは最新のデータを取得している間に古いデータを表示することでアプリのローディング時間を早めることができる
  2. リクエスト数を減らすことでサーバの負荷を減らすことができる
  3. 通信環境が悪かったり圏外でも取得済みのデータを表示することができる
  4. 簡単なコードでデータ取得とメンテナンスが行える
  5. データを収集している時に何か問題があっても何をすべきかわかる
  6. You can change how SWR operates to better suit your app.
  7. データ収集や保存処理が一貫している

SWRでデータを取得する方法

  • アプリケーション内でファイルを作成
  • SWRを以下のコマンドでインストール
npm i swr
  • useSWRをインポート。このフックはuseStateとuseEffectを含んでいます
  • トップレベルに定数を定義し、fetcherを呼ぶ。fetcherには関数を割り当てる

この関数は複数の引数を受け取ることができます。

const fetcher = (...args) => fetch(...args).then(res => res.json())

Swr.jsxは以下のようになります

import useSWR from 'swr';

// Import useSWR from swr package

// created function to handle API request
const fetcher = (...args) => fetch(...args).then((res) => res.json());

const Swr = () => {
  const {
    data: countries,
    error,
    isValidating,
  } = useSWR('https://restcountries.com/v2/all', fetcher);

  // Handles error and loading state
  if (error) return <div className='failed'>failed to load</div>;
  if (isValidating) return <div className="Loading">Loading...</div>;

  return (
    <div>
      {countries &&
        countries.map((country, index) => (
          <img key={index} src={country.flags.png} alt='flag' width={100} />
        ))}
    </div>
  );
};

export default Swr;

上記のコードで何をしているのか見てみましょう

  • 最初にSWRライブラリをインポートします
  • 次にAPIリクエストを行う関数を定義します
  • 戻り値に、map()を使って国一覧のリストを返します
  • &&と書くことで、データが問題なく正しく受け取れたことを保証します。（countriesがnullまたはundefinedでない）
  • 最後にこのコンポーネントをApp.jsxまたはindex.jsxにエクスポートし、ブラウザに表示させます

2. JavaScriptのFetchメソッドを使う

fetch()はAPIからデータを取得するのに簡単でよく使われる方法です。

fetchの利点

  1. 使うのが簡単
  2. It lets you send extra details to the server, like who you are or what kind of data you want.
  3. 最近のブラウザのほとんどに対応している
  4. いろいろなHTTPメソッドをサポートしている。これにより柔軟にAPI連携がきます。
  5. fetchはネイティブなjavascriptの関数で外部ライブラリなしで使用できる

fetchでデータ取得する方法

  • ファイルを作る
  • useState()をインポートする
  • 次にuseEffect()をインポートする
import { useState, useEffect } from 'react';
const Fetch = () => {
  const [photos, setPhotos] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setPhotos(data);
      });
  }, []);
  return (
    <div>
      
      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} width={100} />
      ))}
    </div>
  );
};
export default Fetch;

useEffectの中で、APIにリクエストしデータを取得しています。レスポンスはJSON形式で返ってきます。

3. React Queryを使う

React QueryはTanStack Queryとしても知られ、Reactアプリケーションでデータを管理するのに役立ちます。この２つの名前の違いはバージョンによるものです。

React Queryは扱いやすく、例えば、サーバーの状態のフェッチ、キャッシュ、同期、更新などほとんど自動的だと感じるほど簡単にデータを扱うことができます。

React Queryの利点

  1. APIから取得したデータはReact Queryによってキャッシュされます。
  2. 特定の状況になった時、自動的に再取得を行います。These conditions include regaining focus or a set time passing.
  3. 楽観的更新でUIを更新します。これによりサーバーからのレスポンスを待たずに期待する出力を表示することができます。
  4. Reactで動作するように作られており、コンポーネントベースのアーキテクチャを利用してスムーズな統合を可能にしています。
  5. クエリ、状態変化、キャッシュの状態の洞察を提供する開発者ツールを含んでおり、デバッグとパフォーマンスの最適化に役立ちます。

React Queryでのデータ取得方法

まず初めにReact-Queryライブラリのインストールを行います

npm i @tanstack/react-query

うまくいったらQueryClientProvider使用します。

Main.jsx内でqueryClientを持ったQueryClientProviderでAppを囲みます。これで自動的にQueryClientが初期化されます。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
)

次でデータをフェッチできるようになります。

  • ファイルを作成
  • ライブラリをインポート
import { useQuery } from '@tanstack/react-query';
  • useQueryフックにqueryFnとqueryKeyの二つのパラメータを設定します。
  • queryFnはエンドポイントにアクセスするデータ取得処理を設定します。
  • queryKeyは取得したデータを識別するユニークなキーを設定します。

前述の通り、React Queryはロード状態とエラーを管理します。そのため別途useStateフックで状態管理する必要はありません。

import { useQuery } from '@tanstack/react-query';
const Query = () => {
  const { data: comments, isLoading, error } = useQuery({
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/comments?_limit=10').then(
        (res) => res.json()
      ),
    queryKey: ['comments'],
  });
  
  // Show a loading message while data is fetching
  if (isLoading) {
    return <h2>Loading...</h2>;
  }
  
  // to handle error
  if (error) {
    return <div className="error">Error: error fetching</div>
  }
  
  return (
    <div>
      <h1 className='title'>Email address of users</h1>
      {comments.map((comment) => (
        <h2 key={comment.id} className="users">
          {comment.id}.  
            {comment.email}
        </h2>
      ))}
    </div>
  );
};
export default Query;

Axiosを使う

AxiosはサードパーティライブラリでAPIからデータを取得することができます。フロントでもサーバーサイドでも使えるので幅広い用途で役立ちます。

Axiosの利点

  1. シンプルで理解しやすい
  2. ほとんどの最新ブラウザに対応している
  3. 何か特別なものを追加する必要がなく、素のjavascriptのように扱える

Axiosでデータを取得する方法

  • ファイルを作成する
  • Axiosをインストールする
npm i axios
  • Axiosをインポートする
  • useStateをインポートする
  • useEffectをインポートする
import { useEffect, useState } from 'react'
import axios from 'axios'
const Axios = () => {
  const [meals, setMeals] = useState([])
  useEffect(() => {
    axios.get('https://www.themealdb.com/api/json/v1/1/random.php')
      .then((res) => {
        setMeals(res.data.meals);
      })
  }, [])
  
  return (
    <div>
      {meals.map((meal) => (
      <img key={meal.idMeal} src={meal.strMealThumb} alt={meal.strMeal} width={400}/>
      ))}
    </div>

useEffectの中でデータ取得のリクエストを送信します。レスポンスはJSON形式で返ってきます。

リターンステートメント内でmap()関数を使用し、各要素の情報を表示します。

終わりに

この記事はReactでデータフェッチを行うさまざまな方法について記しました。よりよいアプリケーション作成の助けになることでしょう。

Reactを使って動的なアプリケーションを構築することとAPIからデータを取得することは重要なことです。たくさんのアプリケーションがAPIからのデータ取得に依存しており、開発者は最善かつ最速な取得方法を知る必要があります。

初心者でも経験豊富なエンジニアであっても、すべての方法は有益です。これらはあなたのスキルをあげるでしょう。

もしこのチュートリアルが役立ったと思ったら、同僚におすすめしてください。きっと興味をもつはずです。

最後まで読んでくれてありがとう

やってみた感想

知らない単語や文法が多すぎていちいち調べるのが大変でかなり疲れました。解読してて思いましたが、技術系の記事は英語があまりわからなくてもコードや部分的にわかる単語で言いたいことはなんとなくわかるなぁと思いました。

勉強になるのでこれからもやっていこうと思います。