こんにちは！アミットです👨💻
Reactでアプリを作っていると、**突然画面が真っ白に…**そんな経験ありませんか？
それ、もしかして**「Error Boundary」**があれば防げたかも！
今回は、「Reactでアプリがクラッシュしない仕組み」＝Error Boundary（エラーバウンダリ）について、図解と実例コードでやさしく解説します！
🧠 なぜ Error Boundary が必要なの？
Reactでは、レンダリング中に子コンポーネントでエラーが起きると、親もろともアプリ全体が落ちることがあります。
❌ 1つの小さなミスで、画面全体が真っ白に…
これを防ぐのが Error Boundary。
ざっくり言うと、「エラーを検知して、代わりのUIを表示する防波堤」 です。
💡 Error Boundaryって何者？
React公式によると：
エラーバウンダリとは、JavaScriptエラーをキャッチして代替UIを表示する特別なクラスコンポーネントです。
✅ 特徴まとめ
- クラスコンポーネントでしか使えない（Hooksでは未対応）
- 対象は子コンポーネントのエラーのみ
- エラーが起きたらアプリ全体がクラッシュせず、代替UIを表示
📦 最小構成の Error Boundary を作ってみよう
import React from "react";
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 次のレンダリングでフォールバックUIを表示
return { hasError: true };
}
componentDidCatch(error, info) {
// エラーのログを外部サービスなどに送ることも可能
console.error("❗エラーが発生しました:", error, info);
}
render() {
if (this.state.hasError) {
return <h2>⚠️ 何か問題が発生しました。</h2>;
}
return this.props.children;
}
}
export default ErrorBoundary;
🧪 実践：エラーを起こす子コンポーネントを囲ってみる
import React from "react";
import ErrorBoundary from "./ErrorBoundary";
const BuggyComponent = () => {
throw new Error("💣 バグが発生しました！");
};
const App = () => {
return (
<div>
<h1>React エラーバウンダリ デモ</h1>
<ErrorBoundary>
<BuggyComponent />
</ErrorBoundary>
</div>
);
};
export default App;
✅ 結果：BuggyComponentが爆発しても、ErrorBoundaryがキャッチして画面は落ちません！
🎯 どんなときに使えばいいの？
- ダッシュボードなど複雑なUIのパーツごとにErrorBoundaryを分けて配置
- 外部ライブラリを使っていてエラーが起きる可能性があるとき
- ユーザーに安定した体験を提供したいとき（特にプロダクション環境）
🚧 Error Boundary がキャッチできない例
以下のようなエラーはキャッチ不可です：
| 例 | 理由 |
|---|---|
| イベントハンドラ内のエラー | try-catchで自前で処理が必要 |
| 非同期処理（Promise）内のエラー |
.catch()が必要 |
| サーバーサイドレンダリング中のエラー | クライアントサイドでしか動かない |
useEffect内の非同期エラー |
try-catch＋.catch()で明示的に処理 |
🎁 おまけ：複数箇所に使うTips
<ErrorBoundary>
<Navbar />
</ErrorBoundary>
<ErrorBoundary>
<Dashboard />
</ErrorBoundary>
<ErrorBoundary>
<Footer />
</ErrorBoundary>
➡️ UIを「パーツ単位」で保護できます。
ある部分だけ落ちても、他は無事！
🏆 ベストプラクティスまとめ
✅ クラスコンポーネントで作る
✅ UIパーツ単位で囲う
✅ ログ収集サービス（例：Sentry）と連携する
✅ ユーザーにフレンドリーなエラーメッセージを表示する
📌 まとめ
| 項目 | 内容 |
|---|---|
| 機能 | 子コンポーネントのエラーをキャッチし、フォールバックUIを表示 |
| 書き方 | クラスコンポーネントとして定義 |
| 使いどころ | 複雑なUI、外部ライブラリの利用、プロダクション環境 |
✍️ 最後に一言
Error Boundaryを使えば、「アプリ全体が真っ白になる恐怖」から解放されます！
これを使わないのは、エアバッグなしで車を運転するようなものかも…😅
💬 「使ったことがある」「他の使い方も知りたい」など、コメントでぜひ教えてください！
📚 公式リファレンスもチェック
👉 https://ja.reactjs.org/docs/error-boundaries.html
📌 Qiitaタグ案:
React JavaScript エラーハンドリング 初心者向け フロントエンド