Question 1

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

Accepted Answer

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

Question 2

JSX で JavaScript の式を使用するための正しい構文はどれですか？

Accepted Answer

単一の中括弧を使用すると、変数、関数、計算など、任意の有効な JavaScript 式を JSX に統合できます。この構文は、JSX マークアップと動的な JavaScript コードの間に明確な境界を作ります。二重中括弧はインラインスタイルオブジェクトに、括弧は複数行の JSX のグループ化に、角括弧は JavaScript の配列に使用されます。

Question 3

JSX の className と HTML の class の主な違いは何ですか？

Accepted Answer

JSX では class の代わりに className を使用します。これは class が ES6 クラスを宣言するための JavaScript の予約語だからです。JSX は JavaScript に変換されるため、class を使用すると構文の競合が発生します。同様に、for は htmlFor になり、イベントは camelCase を使用します。この規則により、JSX は HTML に似た構文を提供しながら、有効な JavaScript であり続けることができます。

React の基礎

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

回答

JSX で JavaScript の式を使用するための正しい構文はどれですか？

回答

JSX の className と HTML の class の主な違いは何ですか？

回答

JSX コードでコメントを書くにはどうしますか？

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

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

JavaScript の基礎

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