LoginSignup
48
49
RUNTEQ Advent Calendar 2023Advent Calendar 2023Day 16
@Tomoya_Kageyama(Tomoya Kageyama)

【React入門】useEffectを使ってAPIを叩く方法の代表的なパターンについてまとめてみた

Last updated at Posted at 2023-12-15

はじめに

  • この記事は「RUNTEQ Advent Calendar 2023」に参加しており、16日目を担当しています。
  • 私(ともと申します。)は「RUNTEQ」というプログラミングスクールに所属しており、もうすぐ3ヶ月の初学者です。
  • 本記事は、エンジニア実務未経験者が、同じ未経験者に向けてできるだけわかりやすく説明することを心がけており、正確ではない情報もあるかと思います。万が一そのような場合はコメント等で教えていただけるととてもありがたいです。

背景

  • プログラミングスクールでは主にRuby on Railsといったバックエンドについて学習していますが、フロントエンドのReactに興味を持っていたため、独学で学習しています。
  • Reactを使ったアプリを作成している中で「APIを叩く」ということが必要になり、学習したことについてまとめてみました。

この記事を読むとわかること

  • useEffectのさわりがわかる。
  • useEffectを使ったAPIを叩く方法がわかる。
  • APIを叩く際、useEffectを使う意義がわかる。

前提知識

1.APIとは

APIとは「Application Programming Interface」の略で、ソフトウェアやアプリケーションが他のソフトウェアやサービスと通信するためのインターフェースです。
簡単に言うと、APIは異なるソフトウェア間で情報を交換するための規則や仕様の集まりです。
下記に、わかりやすい記事がありましたので載せさせていただきます。
ちなみに「叩く」とは情報をリクエストすることです。

参考記事

2.async/awaitとは(javaScript)

非同期処理の構文のことで、asyncをつけた関数内でawaitを関数の前に書くと、awaitをつけた関数の処理が終わるまで、一時的にそこで処理を停止します。
awaitをつけた関数の処理が終了したら、次の処理をし始めます。
詳しくは下記の記事をご覧ください。

参考記事

3.useEffectとは

useEffectとはReactのフックの一つで、コンポーネントのレンダリングが完了した直後に何らかの操作を行いたい時に使用します。
よくuseEffectの説明で副作用という言葉が出てきますが、ここではコンポーネントのレンダリングの直後に行いたい何らかの操作のことを副作用と考えていただければと思います。

参考記事

APIを叩く際にuseEffectを使う意義

useEffectを使ってAPIを叩くと、Reactのコンポーネントが画面に表示された（レンダリングされた）後に、外部のデータ（例えばインターネット上のサーバーからの情報）を取得することができます。

簡潔に言うと、useEffectは「コンポーネントの主な仕事（画面に表示すること）が終わったら、次に何をするか」という指示を与えるツールです。
APIを叩くというのは、「画面が表示されたら、データを取得する」という指示にあたります。これによって、アプリは効率的にデータを処理し、ユーザーに必要な情報をタイミングよく表示することができます。
以下に、useEffectを使用する主な理由を4つあげます。

1.コンポーネントのマウント時のデータ取得

コンポーネントが初めて画面に表示される（マウントされる）ときにAPIからデータを取得するのが一般的です。
useEffectの2番目の引数の依存配列を空にすることで、マウント時のタイミングを正確に捉え、初回表示のみAPIリクエストを行うことができます。

2.レンダリングとAPIリクエストの分離

Reactにおいて、コンポーネントが画面に表示する内容を作る（レンダリングする）時は、シンプルで余計なことをしない方がよいと考えられています。つまり、画面を表示することと、データを取得したり、状態を変えたりするような作業は分けて考えた方がよいと言われています。

useEffectを使うと、画面の表示（レンダリング）と、それ以外の作業（例えば、インターネットから情報を取ってくること）を分けることができます。これにより、コンポーネントの動作が予測しやすくなり、後でコードを修正したり、問題を解決したりしやすくなります。

3.副作用のクリーンアップ

特にリアルタイムのデータやストリーミングデータを扱う場合、コンポーネントがアンマウント(対象画面から他の画面に遷移)されたときにAPIの接続を解除する必要があります。
useEffectのクリーンアップ機能を使うことで、メモリ使用量を最適化をすることができます。

4.依存データによる動的なAPIリクエスト

コンポーネントの特定の状態が変更されたときにのみAPIを叩く必要がある場合、useEffectの依存配列を使うことがあります。
依存する値が変更されるたびにuseEffect内の処理が実行され、動的にデータを更新することができます。
依存する値とは例えば、依存する値＝ユーザー名として、ユーザー名が変更されたらAPIを叩いてそのユーザー名の情報を取得するなどがあげられます。

これらの理由から、useEffectを使用してAPIを呼び出すことは、Reactの特徴に合い、効率的なデータ取得や更新の方法と考えられています。

useEffectを使ってAPIを叩く方法

useEffectを使用してAPIを叩く（リクエストする）方法には、いくつかの一般的なパターンがあります。
これらの方法は、どのようなAPIリクエストを行いたいかなど、アプリの関連性などによって使い分けられます。
以下に、主なパターンをあげてます。ここでfetch関数は、HTTPリクエストを送信し、サーバーからのレスポンスを取得するために使用されます。

1. コンポーネントマウント時のAPIリクエスト

コンポーネントがマウントされる際に一度だけAPIを叩く基本的なパターンです。
依存配列を空にすることで、コンポーネントの初回レンダリング時にのみ実行されます。
ここでは、fetchを使用して指定したURLから情報を取得し、awaitを使用して非同期処理(URLのデータが取得できたら次の処理をする)を行なっています。その受け取ったデータをresponseに格納して、次の行の処理でjson形式のデータをjavaScriptで扱えるように変換しています。

example.js
useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // awaitはその行の処理が終了したら、
    // 次の処理を行うという構文
  }

  fetchData();
}, []);
//ここ例では第2引数の依存配列の中身は空[]にすることにより、
//初回レンダリング時にAPIを叩く

2. 依存データに基づくAPIリクエスト

特定の値等が変更されたときだけAPIを叩く方法です。依存配列に値等を指定することで、それらの値が変更されるたびにAPIリクエストが実行されます。この時、状態管理をするためのuseStateを使用することが多いですが、ここでは省略させていただきます。

example2.js
useEffect(() => {
  async function fetchData() {
    const response = await fetch(`https://api.example.com/data/${userId}`);
    const data = await response.json();
    // APIを叩いてデータ処理
  }

  if (userId) {
    fetchData();
  }
}, [userId]); 
// userIdという特定の値が変更されたときにのみ実行

3. イベントハンドラ内でのAPIリクエスト

ユーザーの操作（例えばボタンクリック）に応じてAPIリクエストを行うパターンです。これは直接useEffectを使うわけではありませんが、ユーザーの操作をトリガーとしてAPIを叩いています。
ちなみにイベントハンドラとはユーザーの操作（クリック、タッチ、キーボード入力）に反応する関数です。

example3.js
const handleButtonClick = async () => {
  //ボタンをクリックした時にこの関数を呼び出す。
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  // APIを叩くデータ処理
};

4. クリーンアップを伴うAPIリクエスト

ストリーミングやリアルタイムで更新されるデータのような継続的なデータを扱うときもuseEffectが使われます。コンポーネントが画面から削除される時（アンマウント時）、useEffect内に定義されたクリーンアップ関数が実行されます。この関数を使用して、それまで行っていたAPIリクエストをキャンセルすることができます。

簡単にいうと、useEffectはコンポーネントの処理に沿ってAPIリクエストなどの外部データを適切に取得し、データの通信や処理を終了させることができます。これにより、不要なデータ取得を防止し、アプリのパフォーマンスを向上させることができます。

example4.js
useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  //進行中の非同期操作（今回の場合はAPIリクエスト）
  //を中止する操作の準備
  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/stream-data', { signal });
      // APIリクエストを送信する処理
    } catch (error) {
      if (error.name !== 'AbortError') {
        // エラーが発生した場合の処理
      }
    }
  }

  fetchData();

  return () => {
    controller.abort(); 
    // コンポーネントのアンマウント時にリクエストを中止
    //(クリーンアップ関数)
  };
}, []);

これらのパターンは、useEffectを使用してAPIリクエストを行うときの基本的な方法です。
それぞれのパターンは、アプリの要件に沿った方法を使う必要があります。

まとめ

useEffectをつかったAPIを叩くパターンとuseEfectを使う意義について紹介をさせていただきました。
私自身Reactの学習を始めたばかりですが、この記事を通じて学んだ知識を共有することで、他の初学者の方々にも役立つ情報となれば幸いです。
今回は初学者による初学者のために初学者なりに説明をさせていただきました。これからも学習を続けて、エンジニアになれるよう技術を磨けたらなと思います。
最後に、このような記事を書くという素晴らしい機会を与えていただいたことを感謝します。




とも(Tomoya Kageyama)


記事を書くの際に参考にさせていたいた記事

48
49
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
48
49