Question 1

ReactにおけるError Boundaryとは何ですか？

Accepted Answer

Error Boundaryは、子コンポーネントツリーで発生するJavaScriptエラーをキャッチし、フォールバックUIを表示し、アプリケーション全体のクラッシュを防ぐReactクラスコンポーネントです。componentDidCatch()とgetDerivedStateFromError()メソッドを使用して、レンダリングエラーをインターセプトし処理します。

Question 2

Reactで従来のtry/catchではなくError Boundariesを使用する理由は？

Accepted Answer

try/catchブロックはReactコンポーネントのレンダリング中に発生するエラーをキャッチできません。これらのエラーはツリーを非同期に伝播するためです。Error Boundariesは、子コンポーネントのレンダリングエラー、ライフサイクルエラー、コンストラクターエラーをインターセプトするために特別に設計されていますが、try/catchは同期的な命令型コードにのみ機能します。

Question 3

Error Boundaryでエラーをキャプチャするライフサイクルメソッドはどれですか？

Accepted Answer

componentDidCatch(error, info)は、Error Boundaryがエラーをキャッチした後に呼び出されるライフサイクルメソッドです。エラーとcomponentStackを含むinfoオブジェクトを受け取り、エラーのログ記録やサイドエフェクトのアクションを可能にします。getDerivedStateFromError()も使用されますが、stateの更新とフォールバックUIの表示のためです。

Error Boundaries & エラーハンドリング

ReactにおけるError Boundaryとは何ですか？

回答

Reactで従来のtry/catchではなくError Boundariesを使用する理由は？

回答

Error Boundaryでエラーをキャプチャするライフサイクルメソッドはどれですか？

回答

Error BoundaryにおけるgetDerivedStateFromError()の役割は何ですか？

getDerivedStateFromError() と componentDidCatch() の違いは何ですか？

その他のReact / Next.js面接トピック

JavaScript の基礎

React の基礎

React Hooks

コンポーネントのライフサイクル

React Router

Contextを使った状態管理

フォームと Controlled Components

データ取得と API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.jsの基礎

TypeScriptとReact

Next.js データフェッチング

Next.js Server Actions

Next.jsのルーティングとナビゲーション

Next.js API Routes

Next.js Metadata & SEO

Next.js の Middleware と Auth

React テスト

Zustand State Management

React パフォーマンス最適化

Advanced React Patterns

Next.jsの高度な機能

Next.jsのデプロイメントと本番環境

アーキテクチャ & デザインパターン

React Server Components

Next.js の国際化

React セキュリティ & ベストプラクティス

次の面接に向けてReact / Next.jsをマスター