こんにちは。Reactの世界へようこそ。
Reactでアプリケーションを作っていると、最初は画面に文字が出るだけで感動しますよね。でも、少し複雑なものを作ろうとすると、必ず一度は遭遇する「アイツ」がいます。
そう、真っ白な画面に「Something went wrong」と表示される、あの絶望的なエラー画面です。
今日は、そんなエラーという「予期せぬトラブル」を華麗にいなして、ユーザーに安心を届けるための魔法の仕組み、「Error Boundaries（エラー境界）」についてお話しします。
—
1. エラー境界は「建物の防火壁」のようなもの
想像してみてください。あなたは今、豪華なレストランを運営しています。キッチン（コンポーネント）でシェフがうっかりお皿を割ってしまったとしましょう。
もし何の対策もしていないと、その割れた音に驚いて他のシェフまで作業を止め、最悪の場合、レストラン全体が営業停止（画面が真っ白に！）になってしまいます。これは困りますよね。
ここで登場するのが「防火壁（Error Boundaries）」です。
防火壁があれば、たとえキッチンの片隅でトラブルが起きても、その被害をそのエリア内に留めることができます。他のエリアでは何事もなかったかのように料理が提供され続け、お客様は「奥で少し音がしたけど、まあ大丈夫そうだな」と食事を続けられます。
ReactのError Boundaryは、まさにこの防火壁の役割を果たす特別なガードマンなのです。
—
2. なぜ「クラスコンポーネント」なのか？
Reactの最新の書き方である「フック（Hooks）」に慣れていると、なぜError Boundaryだけクラスコンポーネントで書く必要があるのか不思議に思うかもしれません。
実は、Reactの内部事情として、現時点では「エラーをキャッチするためのライフサイクルメソッド」がクラスコンポーネントにしか用意されていないんです。
「古い書き方だなあ」と敬遠せず、「これは、アプリ全体を守るための特別な結界を張るための儀式だ」と割り切って、型通りに書いてしまいましょう。
—
3. さあ、結界を張ってみよう
以下のコードをコピーして、あなたのプロジェクトの適当な場所に貼り付けてみてください。これが「エラーからアプリを守る盾」の基本形です。
import React from ‘react’;
// エラー境界クラスを作成します。これが「防火壁」になります。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
// 最初はエラーがない状態（hasError: false）でスタート
this.state = { hasError: false };
}
// 子コンポーネントでエラーが発生した時に呼び出されます
static getDerivedStateFromError(error) {
// エラーを検知したら、状態を「エラーあり（true）」に切り替える
return { hasError: true };
}
render() {
// もしエラーが起きていたら、代わりに表示する画面（フォールバックUI）を返す
if (this.state.hasError) {
return
あらら、ちょっと調子が悪いみたいです。後でもう一度試してくださいね。
;
}
// エラーがなければ、そのまま普通に中身（子コンポーネント）を表示する
return this.props.children;
}
}
export default ErrorBoundary;
—
4. 実際に組み込んでみよう
使い方はとてもシンプルです。守りたいコンポーネントを、この `
function App() {
return (
レストランのメニュー
{/ この中身がエラーになっても、外側のメニュー表示は生き残ります /}
);
}
—
5. 最後に：完璧を目指さなくていいんです
初学者の頃は、「エラーを絶対に出さないコードを書かなきゃ！」と気負ってしまいがちです。でも、現実のWeb開発では、予期せぬデータの欠損や通信エラーなど、どんなに気をつけていてもトラブルは起きるものです。
「エラーが出たら、どうユーザーを安心させるか」を考える。
これこそが、一流のエンジニアへの第一歩です。真っ白な画面でユーザーを置き去りにするのではなく、優しく「ごめんね、今直してるからね」と伝えられるアプリを作れたら、それはもう素敵な体験だと思いませんか？
エラー境界は、あなたのアプリに「優しさ」を実装する魔法です。ぜひ、怖がらずにどんどん使ってみてくださいね。
また何か壁にぶつかったら、いつでもここへ戻ってきてください。大丈夫、みんな最初はそこから始まっていますよ。
コメント