あなたがWebアプリケーションを開発している時、きっと一度は「エラー」に出会ったことがあるでしょう。
しかし、ユーザーがエラーに出会ってしまうことは絶対に避けなければいけません。
例えば初めて使うサイトで操作を行った時、真っ白の画面が表示されたり、ボタンが何も反応しなかったりしたら、あなたはどう感じるでしょうか？
そのサイトに対して不信感を抱き、もうアクセスしないかもしれませんよね。
そのため、エラーの理解とその適切な対処法は、ソフトウェア開発者にとって必須のスキルです。
本記事では、特にJavaScriptとReactを使用した開発環境における「エラーハンドリング」の基本を紹介します。
（エラーハンドリングとは、プログラムがエラーに遭遇した時の対処方法を指します。）
初心者向けに、エラーハンドリングの基本概念から、具体的なエラーパターンとその対処法までを段階的に学べる内容となっています。
具体的なコード例も豊富に用意しているので、ぜひ一緒に学んでいきましょう！
Reactとエラーハンドリングの重要性
Reactは、フロントエンドの開発で広く使われているJavaScriptのライブラリです。
Reactを使うことで、ユーザーインターフェースを効率的に、かつ使いやすく作成することができます。
Reactの特徴とエラーハンドリングの役割
Reactの特徴の一つに、コンポーネントベースの設計があります。
Reactでは、Webページを一つの大きなパーツから、さらに小さなパーツ、すなわちコンポーネントに分割します。
それぞれのコンポーネントは独自の状態（state）や表示するためのデータ（props）を持ち、それらのデータに基づいてユーザーインターフェースを描画します。
しかし、開発を進めていくと、必ずといっていいほどエラーに遭遇します。
例えば、コンポーネントのstateが期待するものと異なる値になってしまったり、存在しない関数を呼び出そうとしたりすると、エラーが発生します。
ここで重要なのがエラーハンドリングの役割です。
エラーハンドリングとは、プログラムがエラーを適切に捕捉し、それに対応するプロセスのことを指します。
エラーハンドリングが適切に行われていると、エラーが発生してもアプリケーション全体がクラッシュすることなく、適切なエラーメッセージを表示するなどして、問題のある箇所をユーザーや開発者に知らせることができます。
エラーハンドリングの目的
エラーハンドリングの主な目的は、プログラムの安定性と信頼性を保つことです。
エラーハンドリングが適切に行われていると、予期しない状況や異常な状況でもプログラムは適切に動作し、適切な反応を示すことができます。
エラーハンドリングは現場での開発でも非常に重要です。
なぜなら、エラーハンドリングを適切に行うことで、バグの特定と修正が容易になり、開発の生産性とアプリケーションの品質が向上するからです
また、エラーハンドリングはユーザーエクスペリエンスにも大きく影響します。
エラーハンドリングが不適切なアプリケーションは、エラーが発生したときにユーザーに対して何の情報も提供せず、または理解できないエラーメッセージを表示します。
一方、エラーハンドリングが適切に行われているアプリケーションは、エラーが発生してもユーザーに対して適切なフィードバックを提供することができます。
結果的に、ユーザーが離れてしまう自体を少しでも避けることができるでしょう。
エラーハンドリングは難しい？
エラーハンドリングはReactを使った開発において非常に重要であることがわかっていただけたかと思います。
エラーハンドリングを適切に行うことで、アプリケーションの安定性と信頼性を保つことができ、開発の生産性と品質を向上させ、ユーザーエクスペリエンスを改善することができます。
エラーハンドリングは一見すると複雑で難しそうに見えるかもしれませんが、いくつか決まった書き方を覚えるだけでOKですので、難しいものではありません。
これから、エラーハンドリングの基本と、Reactでよく見られるエラーパターンとその対処法について学んでいきましょう。
Reactにおけるエラーハンドリングの基本
Reactでエラーハンドリングを行うための基本的な概念とツールについて学んでいきましょう。
try/catch文
JavaScript（およびReact）でエラーハンドリングを行う最も基本的な方法は、try/catch文を使用することです。
try/catch文は、tryブロック内のコードを実行し、エラーが投げられるとそれを捕捉してcatchブロック内のコードを実行します。
try {
// エラーが起きる可能性のあるコード
} catch (error) {
// エラーが起きた時の処理
}Error Boundaries
しかし、try/catch文だけではReactコンポーネントのライフサイクル内や子コンポーネントで発生するエラーを捕捉することができません。
そこでReact 16から導入された機能がError Boundary（エラーバウンダリ）です。
[blogcard url=https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary]
エラーバウンダリは、その子コンポーネントツリーで発生するJavaScriptのエラーを捕捉し、それをログに記録し、フォールバックUIを表示する役割を果たします。
エラーバウンダリはcomponentDidCatchまたはgetDerivedStateFromErrorのいずれか（または両方）を定義したReactコンポーネントです。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新されたstateを返してUIをフォールバックモードに切り替える
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// エラーレポートサービスにエラーレポートを送信するなど
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// フォールバックUIをレンダリングする
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}上記のように、エラーバウンダリコンポーネントを作成することで、その子コンポーネントで発生するエラーを適切に捕捉し、ハンドリングすることが可能となります。
Reactにおける主なエラーパターンとその原因
では、Reactにおける主なエラーパターンとその原因について見ていきましょう。
パターン1：APIからのレスポンスに関連するエラー
APIからのレスポンスに関連するエラーとは
Reactアプリケーションはしばしば、バックエンドAPIからデータを取得します。
しかし、APIからのレスポンスが予期せぬものであったり、通信自体に失敗したりすると、エラーが発生します。
APIからのレスポンスに関連するエラーの原因
このタイプのエラーは通常、以下のような状況で発生します：
- バックエンドサーバーがダウンしている
- APIエンドポイントが変更された
- ネットワーク接続が不安定
- APIからのレスポンスが予期した形式でない
いずれにせよ、APIを呼び出すフロントエンド側（React側）からはどうしようもできないものですので、発生し得ることを想定しておくべきです。
APIからのレスポンスに関連するエラーのエラーハンドリング
ここでもJavaScriptのtry-catchブロックを用いることでエラーハンドリングを行います。
また、APIからのレスポンスを扱う際は非同期処理となるため、async/awaitを使用するのが一般的です。
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// データを処理する...
} catch (error) {
// エラーをハンドリングする
console.error(error);
}
}このコードでは、APIからのデータ取得中にエラーが発生した場合、それをキャッチしてコンソールにエラーメッセージを出力します。
API側のエラーというのは、呼び出す側ではどうにもできないものです。
そのため、エラーが発生した場合はユーザーに対してエラーメッセージを表示するなど、適切な対応を行うことが重要です。
なお、実際にはユーザーはコンソールを見ることはありません。
そのため、エラーメッセージをコンソールに出力するのではなく、ユーザーに対してエラーメッセージを表示するなど、適切な対応を行うことが重要です。
例：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// データを処理する...
} catch (error) {
// エラーをユーザーに通知する
alert('データの取得に失敗しました。
しばらくしてから再度お試しください。
');
}
}また、最近ですと Slack を用いて開発者にエラーを通知するサービスもあります。
これらを用いると、エラーが発生した際に Slack に通知が届くため、開発者はすぐにエラーを確認することができます。
パターン2：ユーザー入力に関連するエラー
ユーザー入力に関連するエラーとは
ユーザーからの入力を処理する際にエラーが発生することがあります。
例えば、処理できない形式の文字列（絵文字など）や、許可されていない値をユーザーが入力した場合などです。
ユーザー入力に関連するエラーの原因
ユーザー入力に関連するエラーは、主に以下のような状況で発生します：
- 入力値の形式が予期したものでない（例：メールアドレスの形式でない文字列）
- 入力値が許可されていない（例：禁止されている文字や単語が含まれている）
- 入力値が処理できない形式（例：特定の絵文字）
ユーザー入力に関連するエラーのエラーハンドリング
ユーザーからの入力を処理する前にバリデーションを行うことで、多くのユーザー入力エラーを防ぐことができます
不適切な入力が検出された場合は、ユーザーに対してエラーメッセージを表示します。
function MyFormComponent() {
const [value, setValue] = React.useState('');
const handleSubmit = (event) => {
event.preventDefault();
// バリデーションチェック: 文字列が半角英数字または@, ., - のみで構成されているか
if (!value.match(/^[\w@\.-]+$/)) {
// バリデーションエラーをユーザーに通知する
alert('無効な文字が含まれています。
');
return;
}
// 入力値が適切なら処理を行う...
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={value}
onChange={(event) => setValue(event.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}以上のようなエラーハンドリングの戦略を適用することで、Reactアプリケーションの安定性とユーザーエクスペリエンスを向上させることができます。
パターン3：コンポーネントのレンダリング中に発生するエラー
コンポーネントのレンダリング中のエラーとは
Reactコンポーネントのレンダリング中に、予期しないエラーが発生することがあります。
例えば、未定義のプロパティにアクセスしたり、存在しない関数を呼び出すことがこれに該当します。
function MyComponent({ user }) {
return <h1>Welcome, {user.name}</h1>;
}上記のコードでは、userがundefinedであった場合、アプリケーションはエラーをスローします。
コンポーネントのレンダリング中に発生するエラーの原因
このようなエラーは、主にプログラムのバグや外部のAPIからの予期せぬレスポンス、あるいは予期せぬユーザーインタラクションなどによって引き起こされます。
コンポーネントのレンダリング中に発生するエラーのエラーハンドリング
Reactのエラーバウンダリを使うと、コンポーネント内で発生したエラーをキャッチし、フォールバックUIを表示することができます。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// このメソッドを使用して、エラー発生時にstateを更新します。
return { hasError: true };
}
render() {
if (this.state.hasError) {
// エラーが発生した場合のフォールバックUIを表示
return <h1>Something went wrong.</h1>;
}
// 通常時はそのまま子コンポーネントをレンダリング
return this.props.children;
}
}このErrorBoundaryコンポーネントは、子コンポーネントで発生したエラーをキャッチし、エラーメッセージを表示します。
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>エラーバウンダリは、React 16以降で利用可能です。
詳細は公式ドキュメントを参照してください。
エラーハンドリングを通じて得られる具体的なメリット
エラーハンドリングは、コーディングの基本的な部分ですが、しっかりと理解し、実践することで得られる利点も多いです。
以下に、主なメリットをいくつか示します。
プロジェクトの品質向上
エラーハンドリングを適切に行うことで、プロジェクト全体の品質が向上します。
エラーが適切に処理されると、そのエラーがユーザーに影響を及ぼすことは少なくなります。
その結果、ユーザーはアプリケーションをよりスムーズに使用でき、ユーザーエクスペリエンスは向上します。
デバッグ効率の改善
エラーハンドリングを正しく行うと、エラーの原因を特定しやすくなります。
エラーメッセージが明確であればあるほど、そのエラーの原因を特定するのに費やす時間が短縮されます。
これにより、開発者はバグの修正に集中することができ、プロジェクト全体のデバッグ効率が向上します。
チーム開発の効率化
チームで開発を行う場合、エラーハンドリングの重要性はさらに増します。
コードを他の開発者と共有するとき、エラーメッセージが明確であれば、そのコードの挙動を理解するのが容易になります。
また、エラーハンドリングが適切に行われていれば、他の開発者がそのコードをデバッグするのも容易になります。
React を効率的に身につける勉強法は？
React には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- Reactエンジニアとして活躍するために何をすればいい？
- 何から勉強すればいいんだろう？
- 絶対に転職を成功させるには？
React は習得が比較的難しいため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
