Question 1

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

Accepted Answer

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

Question 2

Render Propsパターンの原則は何ですか？

Accepted Answer

Render Propsパターンは、React要素を返す関数をpropとして渡すことで、親コンポーネントがロジックを子コンポーネントと共有できるようにします。この関数はパラメータとして親のデータやメソッドを受け取ります。このパターンはReact RouterやDownshiftなどのライブラリで使われ、フック登場以前に非常に人気がありました。

Question 3

Higher-Order Components（HOC）とは何ですか？

Accepted Answer

Higher-Order Componentsは、コンポーネントをパラメータとして受け取り、追加のpropsや動作で拡張された新しいコンポーネントを返す関数です。このパターンはコードの重複なしにコンポーネント間でロジックを再利用できるようにします。HOCは認証、トラッキング、権限管理などの横断的な関心事に使われます。

Advanced React Patterns

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

回答

Render Propsパターンの原則は何ですか？

回答

Higher-Order Components（HOC）とは何ですか？

回答

制御コンポーネントと非制御コンポーネントの違いは何ですか？

Providerパターンとは何ですか？

その他の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 & エラーハンドリング

Next.jsの高度な機能

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

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

React Server Components

Next.js の国際化

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

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