こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお話ししたいことがあります。
Reactを学び始めると、誰もが一度は「`useEffect`、お前は一体何なんだ…？」と途方に暮れる夜を経験しますよね。特に「APIからデータを取ってくる（fetch）」ときに現れる、あの謎の挙動。
今日は、その中でも特に重要で、かつ現場で「これを知っているだけで差がつく！」という「AbortController」を使ったリクエストのキャンセルについて、一緒に紐解いていきましょう。
—
「注文したのに、もう店にいない」という悲劇
想像してみてください。あなたはカフェでコーヒーを注文しました。でも、注文した直後に急用を思い出して、店から出てしまいました。
もし店員さんがあなたの事情を知らずに、一生懸命コーヒーを淹れ続けていたら……なんだか申し訳ないし、無駄なエネルギーを使わせてしまいますよね。
Reactの`useEffect`でAPIを叩くときも、これと全く同じことが起きています。
例えば、ユーザーが画面を素早く切り替えたとき。前の画面でリクエストを送った直後にユーザーがいなくなっているのに、裏側ではせっせと「結果を画面に表示しよう！」と準備が進んでしまう。これが「メモリリーク」や「不要な更新」といった、アプリのバグや動作の重さにつながる原因なんです。
救世主「AbortController」の登場
ここで登場するのが`AbortController`です。こいつは、いわば「注文取り消しチケット」です。
「もし僕がいなくなったら、このチケットを使って注文をキャンセルしてね！」とあらかじめ店員さん（ブラウザ）に渡しておくイメージです。これがあれば、もう無駄なコーヒーを淹れさせなくて済みます。
実際のコードで見てみよう
まずは、このコードを見てください。これがReactにおける「お作法」の基本形です。
import { useState, useEffect } from ‘react’;
function UserProfile({ userId }) {
const [data, setData] = useState(null);
useEffect(() => {
// 1. まず「注文取り消しチケット」を作成します
const controller = new AbortController();
const signal = controller.signal;
const fetchData = async () => {
try {
const response = await fetch(`https://api.example.com/user/${userId}`, {
// 2. リクエストに「このチケットを見ててね」と伝えます
signal: signal
});
const result = await response.json();
setData(result);
} catch (err) {
// 3. キャンセルされた時はエラーが出るので、無視するようにします
if (err.name === ‘AbortError’) {
console.log(‘リクエストがキャンセルされました’);
} else {
console.error(‘その他のエラー:’, err);
}
}
};
fetchData();
// 4. ここが魔法の「クリーンアップ関数」です！
// コンポーネントが消えるとき、ここに書いたことが実行されます
return () => {
controller.abort(); // 「もういらないよ！」とキャンセル命令を出す
};
}, [userId]); // userIdが変わるたびに、この処理はやり直し！
return
;
}
なぜこの「クリーンアップ関数」が重要なのか
コードの最後にある `return () => { … }` 。これが、Reactにおけるクリーンアップ関数です。
Reactは賢いので、「このコンポーネントが画面から消える（または`userId`が変わる）直前」に、この中身を必ず実行してくれます。
- 使い終わった道具を片付ける
- イベントリスナーを解除する
- 今回のリクエストを止める
これらのお片付けをサボると、アプリはどんどんゴミが溜まって重くなっていきます。逆に、ここを丁寧に書ける人は、現場の先輩から「お、わかってるね！」と一目置かれるはずです。
最初はできなくて当たり前
ここまで読んで「うわ、なんか難しそう…」と思いましたか？ 大丈夫です。私も最初は、`useEffect`がなぜ2回走るのか理解できず、ブラウザのコンソールでエラーが出まくって頭を抱えていました。
でも、この「クリーンアップ」の考え方は、Reactが大切にしている「常にきれいな状態で画面を保つ」という哲学そのものです。
まずは、「APIを叩くときは、お片付け（AbortController）もセットにする」という癖をつけるだけでOK。最初は完璧じゃなくていいんです。書いて、動かして、ブラウザのネットワークタブを眺めてみて、「お、キャンセルできてる！」という小さな成功体験を積み重ねていきましょう。
Reactのコードを書くことは、道具を大切にする職人の仕事と似ています。一つひとつの処理を丁寧に扱えば、あなたの作るアプリは驚くほど軽やかで、優しいものになりますよ。
それでは、また次回のステップでお会いしましょう！応援しています。
コメント