ReactのuseEffectでデータを取得する方法を徹底解説！初心者でもわかるAPI通信の基本
生徒
「先生、Reactでインターネットからデータを取ってくることってできますか？」
先生
「もちろんできますよ。そのときによく使うのがuseEffectというフックです。」
生徒
「フックってなんでしたっけ？それにAPI通信ってなんだか難しそうです…」
先生
「フックはReactで特別な処理をするための仕組みで、API通信というのは外のサービスから情報をもらうことです。例えば天気情報を表示したり、ニュースサイトのデータを取得するのもAPI通信です。実際にプログラムを見てみましょう！」
1. useEffectでデータを取得する流れを理解しよう
Reactでデータを取得するときには、まずuseStateでデータを保存する場所を作り、次にuseEffectを使ってAPIにアクセスします。APIとは、アプリケーションが外部とやりとりするための「窓口」のようなものです。
例えば「犬の画像をランダムで取得するAPI」があるとします。これをReactで呼び出すと、実際の画像データをもらうことができます。その仕組みを理解するのが今回の目標です。
2. サンプルコード：犬の画像を取得するアプリ
それでは実際にAPI通信を使ったシンプルなReactアプリの例を見てみましょう。ここでは「Dog API」という無料サービスを使って、ランダムな犬の画像を表示します。
import React, { useState, useEffect } from "react";
function App() {
const [dogImage, setDogImage] = useState("");
useEffect(() => {
fetch("https://dog.ceo/api/breeds/image/random")
.then((response) => response.json())
.then((data) => setDogImage(data.message));
}, []);
return (
ランダムな犬の画像
{dogImage && <img src={dogImage} alt="犬" width="300" />}
);
}
export default App;
3. コードの仕組みをやさしく解説
このコードにはいくつかの重要なポイントがあります。
useState("")… 最初は空の文字列を保存しておき、そこに画像のURLが入ります。useEffect(() => { ... }, [])… この中に書いた処理は、コンポーネントが最初に表示されたときに1回だけ実行されます。これを「副作用処理」と呼びます。fetch("URL")… fetchはJavaScriptで用意されている機能で、インターネット上のデータを取りにいくことができます。response.json()… APIから返ってきたデータを「JSON（ジェイソン）」という形式で変換しています。JSONはデータを整理してやりとりするための形式で、辞書のようなイメージです。setDogImage(data.message)… 取得した犬の画像URLをstateに保存し、それを画面に表示します。
4. useEffectの依存配列について
useEffectには2つ目の引数として「依存配列」というものを渡します。上の例では[]を渡しました。これは「空の配列」なので、最初の1回だけ実行されるという意味です。
もしここに[dogImage]のように書いた場合は、dogImageが変わるたびにuseEffectがもう一度実行されます。つまり、どのタイミングで実行されるかを決めるのが依存配列の役割です。
5. ボタンを押して新しい画像を取得する例
今のコードはページをリロードしないと画像が変わりません。次はボタンを押したときに新しい犬の画像を取得するようにしてみましょう。
import React, { useState, useEffect } from "react";
function App() {
const [dogImage, setDogImage] = useState("");
const fetchDog = () => {
fetch("https://dog.ceo/api/breeds/image/random")
.then((response) => response.json())
.then((data) => setDogImage(data.message));
};
useEffect(() => {
fetchDog();
}, []);
return (
犬の画像を取得するアプリ
{dogImage && <img src={dogImage} alt="犬" width="300" />}
);
}
export default App;
6. 初心者がつまずきやすいポイント
API通信を初めて使うときに混乱しやすい部分を整理しておきましょう。
- 非同期処理 … fetchはすぐに結果が返るわけではなく、時間がかかる処理です。そのため「then」でつなげて、終わったときに処理をする必要があります。
- CORSエラー … 場合によっては「CORSエラー」と呼ばれる通信制限に出会うことがあります。これはセキュリティのために外部サイトとの通信が制限されている状態です。公式に公開されているAPIを使えば基本的には問題ありません。
- JSONの扱い … JSONは最初は見慣れないかもしれませんが、JavaScriptのオブジェクトとほとんど同じ感覚で扱えます。
これらを理解しておけば、Reactでのデータ取得がスムーズに進むでしょう。
まとめ
useEffectを使ったデータ取得の全体像を振り返ろう
この記事では、ReactのuseEffectを使って外部APIからデータを取得する基本的な流れを、初心者向けに一つずつ確認してきました。ReactでAPI通信を行う場合、「いつデータを取得するのか」「取得したデータをどこに保存するのか」「画面にはどのように表示されるのか」という流れを理解することがとても重要です。
最初に行うのはuseStateでデータを保存する場所を用意することです。APIから取得したデータは、そのまま画面に表示するのではなく、一度stateに保存します。こうすることで、データが更新されたときにReactが自動的に画面を再描画してくれるようになります。
次に重要なのがuseEffectの役割です。useEffectは、コンポーネントが表示されたあとに処理を実行するための仕組みで、API通信のような「画面表示とは直接関係しない処理」を書くのに適しています。ページを開いたときに一度だけデータを取得したい場合は、依存配列に空の配列を指定することで実現できます。
依存配列と再取得の考え方
useEffectの依存配列は、初心者がつまずきやすいポイントの一つですが、考え方はとてもシンプルです。「どの値が変わったときに、この処理をもう一度実行したいか」を指定するためのものです。空の配列であれば最初の一回だけ、特定のstateを指定すれば、その値が変わったときに再実行されます。
記事の中で紹介した「ボタンを押して新しい犬の画像を取得する例」では、useEffectは初回のデータ取得だけに使い、ボタンを押したときの処理は関数として切り出しました。このように、useEffectとイベント処理を役割ごとに分けることで、コードが読みやすくなり、動きも理解しやすくなります。
シンプルな構成のサンプルコード
import React, { useState, useEffect } from "react";
function App() {
const [message, setMessage] = useState("データを取得中です");
useEffect(() => {
setMessage("データの取得が完了しました");
}, []);
return (
<div>
<p>{message}</p>
</div>
);
}
export default App;
このサンプルはAPI通信そのものは行っていませんが、useEffectが「画面表示後に処理を実行する」という役割を持っていることを理解するのに役立ちます。実際のAPI通信でも、この考え方はまったく同じです。
生徒
「useEffectって、最初は難しそうだと思っていましたけど、画面が表示されたあとに動く処理を書く場所だと考えると分かりやすいですね。」
先生
「その理解でとても良いですよ。Reactでは、画面を作る部分と、データを取りにいく部分を分けて考えるのが基本です。」
生徒
「API通信も、useStateで保存して、useEffectで取得する、という流れを意識すれば整理できますね。」
先生
「その通りです。まずは今回のようなシンプルな例で慣れていくと、ニュース取得やユーザー情報の表示など、いろいろな場面に応用できるようになります。」
生徒
「依存配列の意味も少しずつ分かってきました。次は自分で別のAPIを使ってみたいです！」
先生
「ぜひ挑戦してみてください。Reactでのデータ取得は、使えば使うほど理解が深まりますよ。」
この記事を読んだ人からの質問
