Question 1

let と var の主な違いは何ですか？

Accepted Answer

let はブロックスコープの変数を宣言します。つまり、定義されたブロック（中括弧の間）内でのみ存在します。var は関数スコープを持ち、変数が関数全体でアクセス可能になるため、予期しないバグを引き起こす可能性があります。デフォルトで let を使用することで、hoisting の問題やループ・条件文での変数の漏れを防ぐことができます。

Question 2

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

Accepted Answer

JSX は JavaScript の構文拡張で、HTML に似たマークアップを JavaScript コード内に直接記述できます。コンパイル時に Babel によって React.createElement の関数呼び出しに変換されます。JSX を使用するとコードがより読みやすくなり、型付けによるコンパイル時のエラー検出が可能になり、JavaScript のパワーと馴染みのある構文を組み合わせることができます。

Question 3

ReactのuseStateフックとは何ですか？

Accepted Answer

useStateは、関数コンポーネントのローカル状態を管理するReactフックです。毎回のレンダリングでリセットされる通常のJavaScript変数とは異なり、useStateは連続するレンダリング間で状態の値を保持します。このフックは現在の状態値と更新関数を含む配列を返し、状態が変化するとコンポーネントの再レンダリングを自動的にトリガーします。

Question 4

Reactコンポーネントにおけるmountingとは何ですか？

Accepted Answer

マウントは、コンポーネントが初めて作成されDOMに挿入される段階です。この段階では、Reactがstateを初期化し、構築コードを実行して最初のレンダリングを行います。useEffectを通じてAPIコールを起動したりサブスクリプションを初期化したりするのに最適なタイミングです。

Question 5

ReactにおけるCSS Moduleとは何ですか？

Accepted Answer

CSS Modulesはクラス名にハッシュを付与することで、一意のクラス名を自動生成し、コンポーネント間のスタイルの競合を防ぎます。各CSS Moduleファイルは独自のローカルスコープを持ち、従来のグローバルスタイルシートとは異なります。このアプローチにより、他のコンポーネントで誤って上書きされるリスクなく、モジュール化されたスタイルを記述できます。

Question 6

Next.jsのApp Routerとは何ですか？

Accepted Answer

App RouterはNext.js 13+のapp/ディレクトリに基づく新しいルーティングシステムです。Pages Routerを置き換え、デフォルトでServer Components、共有レイアウト、page.tsx、layout.tsx、loading.tsxなどのファイル規則を持つより柔軟なルーティングモデルを導入します。

Question 7

Reactコンポーネントのpropsを型付けする正しい構文は何ですか？

Accepted Answer

Props interfaceに続いてProps parameterで関数を型付けする方法が推奨される標準的な構文です。このアプローチは優れた型推論を提供し、コードの他の部分でProps型を簡単に再利用できます。React.FCより明示的で、childrenの型付けをより細かく制御できます。

Question 8

React.memoの主な役割は何ですか？

Accepted Answer

React.memoは、コンポーネントのレンダリング結果をメモ化するHigher-Order Componentです。propsの浅い比較を行い、propsが変更されていない場合は再レンダリングをスキップします。同じpropsを頻繁に受け取るコストの高い子コンポーネントの最適化に特に有用です。

Question 9

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

Accepted Answer

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

Question 10

Compound Componentsパターンとは何ですか？

Accepted Answer

Compound Componentsパターンを使うと、React Contextを通じて暗黙的な状態を共有するコンポーネントを作成でき、propsを明示的に渡す必要がありません。このパターンはRadix UIやHeadless UIなどのライブラリで使われており、柔軟で合成可能なAPIを提供します。子コンポーネントは共有状態に自動的にアクセスでき、共通のロジックを失わずに構造のカスタマイズが可能になります。

React / Next.js面接の質問

React / Next.jsの面接準備はできていますか？

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 パフォーマンス最適化

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

Advanced React Patterns

Next.jsの高度な機能

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

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

React Server Components

Next.js の国際化

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

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