Question 1

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

Accepted Answer

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

Question 2

styled-componentsの主な利点は何ですか？

Accepted Answer

styled-componentsはtemplate literalsを使ってJavaScriptファイルに直接CSSを記述でき、コンポーネントのpropsに基づいた動的なスタイル作成を容易にします。このアプローチはCSSクラスとコンポーネント間の手動マッピングを不要にし、マウントされたコンポーネントのスタイルのみがページに挿入されることを保証します。スタイルをコンポーネントロジックと同じ場所に置くことで、コードの保守性も向上します。

Question 3

ReactコンポーネントにCSS Moduleをインポートする方法は？

Accepted Answer

CSS Moduleをインポートするには、.module.cssで終わるファイル名の標準的なJavaScriptインポート構文を使用し、変換されたクラス名を含むオブジェクトを変数に割り当てます。慣例として、この変数は'styles'と名付けられることが多いです。クラスはオブジェクト表記を使用してclassName属性で適用できます。このアプローチにより、クラス名が一意であり、コンポーネントにスコープされることが保証されます。

Styling & CSS-in-JS

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

回答

styled-componentsの主な利点は何ですか？

回答

ReactコンポーネントにCSS Moduleをインポートする方法は？

回答

Tailwind CSSの主な特徴は何ですか？

ReactのインラインスタイルのThe主な欠点は何ですか？

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

JavaScript の基礎

React の基礎

React Hooks

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

React Router

Contextを使った状態管理

フォームと Controlled Components

データ取得と API

React Query (TanStack Query)

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をマスター