こんにちは。Reactの世界へようこそ。
新しい技術を学んでいると、「動いた！」という感動の裏で、突然画面が真っ白になってパニックになること、ありますよね。いわゆる「画面のホワイトアウト」。あれを初めて経験した時は、僕も心臓が止まるかと思いました。
今日は、そんな「もしもの時」に備えて、Webサイトを救うための「安全装置」、エラー境界（Error Boundaries）についてお話しします。
—
1. そもそも「エラー境界」って何？
Webサイトを作っていると、どうしても避けられないのがプログラムのミスや予期せぬデータのエラーです。
例えるなら、「レストランのキッチンでシェフが転んでお皿を割ってしまった」ような状態を想像してください。もし何の対策もしていないと、その瞬間にレストラン全体が閉店してしまいますよね。お客様は「えっ、何があったの？」と困惑するはずです。
「エラー境界」は、いわば「割れたお皿を片付けて、お客様には『ただいま少々お待ちください』と笑顔で伝える店員さん」です。
エラーが起きた場所を特定し、サイト全体が崩壊するのを防いで、代わりに「ごめんなさい、ちょっと調子が悪いみたいです」と親切なメッセージを表示してくれる。これがエラー境界の役割です。
—
2. なぜ「クラスコンポーネント」を使うの？
Reactには「関数コンポーネント」と「クラスコンポーネント」の2種類がありますが、現時点（2024年）でエラー境界を実装するには、あえて昔ながらの「クラスコンポーネント」を使う必要があります。
「えっ、難しい書き方に戻るの？」と思うかもしれませんが、大丈夫。ルールは非常にシンプルです。「これさえ書けば動く」という型が決まっているので、テンプレートとして持っておけばOKですよ。
—
3. 実践！エラー境界を作ってみよう
それでは、実際にコードを書いてみましょう。以下のコードをそのままコピペして、自分の環境で試してみてください。
import React from ‘react’;
// エラー境界を作るための特別なクラスコンポーネントです
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
// 「今、エラーが起きているかどうか」を管理するスイッチです
this.state = { hasError: false };
}
// 子コンポーネントでエラーが起きたら、この関数が自動で呼ばれます
static getDerivedStateFromError(error) {
// エラーが起きたら、スイッチを「ON」にします
return { hasError: true };
}
// エラーの内容を記録する場所（ログ送信などに使います）
componentDidCatch(error, errorInfo) {
console.error(“エラーを検知しました:”, error, errorInfo);
}
render() {
// もしエラーが起きていたら、専用の画面を表示します
if (this.state.hasError) {
return
あらら、何か問題が発生したようです。
;
}
// エラーがなければ、そのまま普通に中身を表示します
return this.props.children;
}
}
export default ErrorBoundary;
—
4. どうやって使うの？
使い方はすごく簡単です。「守ってあげたいコンポーネント」を、先ほど作った `
function App() {
return (
);
}
—
5. 初心者がつまずきやすいポイント
ここで一つだけ、とても大事な注意点があります。
「エラー境界は、すべてのエラーをキャッチできるわけではない」ということです。
例えば、以下のようなエラーはキャッチできません。
- イベントハンドラの中でのエラー（ボタンをクリックした時の処理など）
- 非同期処理（API通信の失敗など）
- サーバーサイドレンダリング
これらは、「エラー境界」という「店員さん」が駆けつける前の、もっと手前で起きるトラブルだからです。これらについては、別途 `try-catch` 文などで処理してあげる必要があります。
「何でもかんでも魔法のように直してくれるわけじゃない」と知っておくだけで、いざという時の冷静さが変わりますよ。
—
最後に：完璧を目指さなくていい
エラー境界を導入するのは、あなたのWebサイトが「より優しくなる」ということです。エラーを隠すのではなく、エラーが起きたことをユーザーに優しく伝え、次の操作へ導く。それこそが、プロのフロントエンド開発の第一歩です。
最初は難しく感じるかもしれませんが、まずは「このコンポーネントを囲ってみようかな」という軽い気持ちで試してみてください。
あなたの書いたコードが、誰かの役に立つ温かい体験になりますように。応援しています！
コメント