React.createElementの面接で聞かれるJSXとの違い、返り値のelementオブジェクト、DOMとの関係を30秒で整理。フォローアップ質問まで一気に対策できます。
React.createElement の面接 प्रश्नでつまずく候補者の多くは、すでに JSX を知っています。そこが皮肉なところです。何百ものコンポーネントを書いていて、props も理解していて、hook が何をするかも分かっているのに、面接官に「React.createElement は実際には何を返しますか？」と聞かれると、10秒ほどで答えがあいまいになるのです。このガイドでは、まず30秒で答えられるきれいな回答を示し、そのあとにフォローアップで十分に دفاعできるだけの深さを、必要な分だけ補います。
まず30秒の答えを先に言う。講義はそのあとでいい
ありきたりに聞こえず、でも自信があると分かる答え
React.createElement の面接で使える答えは、次のようなものです。こんな感じで答えてください。
「JSX は構文糖で、Babel が React 実行前に React.createElement の呼び出しへコンパイルします。React.createElement は、'div' のような文字列、あるいは関数／クラスコンポーネントのどちらかである type と、props オブジェクト、そして任意の children を受け取り、React element と呼ばれる普通の JavaScript オブジェクトを返します。そのオブジェクトは、画面に何を表示すべきかを記述しています。React の reconciler はそのオブジェクトを読み取り、実際の DOM に対して何を作成・更新・削除するかを決めます。つまり、React.createElement は説明を作り、ReactDOM がページを扱います。」
これなら60秒未満です。JSX、変換、返されるオブジェクト、描画の流れを押さえつつ、内部実装に絡まりません。面接官はこれで十分なメンタルモデルを得られ、フォローアップの出発点も明確になります。
短い答えがしっくりこない理由
多くの候補者が犯す構造的なミスは、この質問を React の歴史を説明する機会だと捉えてしまうことです。「JSX は React.createElement を手で書くのが冗長だったので導入されたんです」と話し始め、関数が実際に何を返すのかにたどり着く頃には、面接官はもう評価を下しています。もう一つの失敗は、いきなり fiber や virtual DOM に飛ぶことです。確かにそれっぽく聞こえますが、質問が求めていた基本定義を飛ばしてしまっています。
本当にやるべきことは、1回で3つをきれいに言い切ることです。JSX は createElement にコンパイルされる、createElement は plain な要素オブジェクトを返す、そのオブジェクトを使って React が DOM を更新する。あとはすべてフォローアップの領域です。
実際の場面ではこうなります
60秒の模擬面接を想像してください。面接官が「React.createElement は何をするのですか？」と聞きます。候補者は上の段落どおりに、type、props、children、plain object、reconciler まで答えます。すると面接官は「では JSX はコンポーネントですか？」と続けます。
候補者は動じません。「いいえ、JSX は構文です。createElement の呼び出しにコンパイルされます。コンポーネントは、JSX が type 引数として参照するかもしれない関数やクラスですが、両者は別の層です。」
このフォローアップが5秒で済むのは、最初の答えで用語がすでに整理されているからです。React の JSX 変換に関するドキュメント と React element の仕様 は、この区別を基礎的なものとして扱っていますし、React を分かっている面接官も同じです。
コンパイラの講義にせずに、JSX から React.createElement への流れを示す
JSX はショートカットであって、React が理解する本体ではない
よくある混乱は、JSX が React そのもののように感じられることです。どの React ファイルにもあり、UI そのものに見え、ほとんどの時間をそこで過ごすからです。ですが JSX はコンパイル時の変換です。React のランタイムが動く頃には、すべての JSX 式は Babel か TypeScript コンパイラによってすでに React.createElement の呼び出しに変換されています。React は JSX を見ていません。見ているのは関数呼び出しだけです。
この「JSX から React.createElement へ」という区別こそが答えの核心であり、これを明確に言えるかどうかが、React を使っているだけの人と、React を理解している人を分けます。
実際の場面ではこうなります
次の JSX を考えてみてください。
Babel はこれを次のようにコンパイルします。
最初の引数は type です。これはネイティブの HTML タグなので文字列の `"button"` になります。2つ目の引数は props オブジェクトです。3つ目の引数は child で、文字列 `"Submit"` です。もし children が複数あれば、追加の引数として渡されるか、props.children の配列になります。Babel REPL に JSX を貼り付けると、コンパイル結果をリアルタイムで確認できます。変換を理論ではなく具体的なものとして捉える一番速い方法です。
面接でこれが重要な理由
この変換をきれいに追えると、定義を暗記しているだけの人ではなく、流れを理解している人として話せるようになります。面接官が「type がコンポーネントだったら？」や「children はどこに入るの？」といった追加質問をしてきても、今示した同じメンタルモデルで答えられます。新しい答えを覚える必要はありません。同じ流れを少し伸ばせばよいだけです。
何か別のものと言う前に、React element オブジェクトをきちんと説明する
面接官が本当に試している plain object のメンタルモデル
React.createElement は React element オブジェクトを返します。これは plain な JavaScript オブジェクトであって、DOM ノードでも、コンポーネントインスタンスでも、何か特別なものでもありません。そのオブジェクトには予測可能な形があります。`type` フィールド、children を含む `props` フィールド、`key`、`ref` です。実際のアプリで React element を `console.log` すると、まさにその形が見えます。
面接官が createElement について聞くときに本当に探っているのはここです。React は DOM を直接扱うのではなく、UI の説明である element オブジェクトを扱っているのだと分かっているかを確認したいのです。
実際の場面ではこうなります
React の sandbox で次を実行してみてください。
出力はおおよそ次のようになります。
面接で重要なのは `type`、`props`、そして `children`（props の中に入っています）です。`$$typeof` シンボルは、React が element と他のオブジェクトを区別するためのセキュリティ機構で、内部実装を深掘りされたときには触れてもよいですが、最初に持ち出すほどではありません。React の element に関するソースレベルのドキュメント で、この構造が正確に説明されています。
ここで最も起こしやすいミス
候補者は、3つの異なるものを混同しがちです。React element オブジェクト（何を描画するかを表す plain JS オブジェクト）、DOM element（React が描画したあとに存在するブラウザのノード）、component instance（React が class component を処理するときに内部で生成するもの）です。これらは3つの別々の層です。「createElement は DOM element を返す」と言うのは誤りです。「createElement は component を返す」も誤りです。安全な答えは常に同じで、「何を描画すべきかを記述する plain object を返す」です。
React element、React component、DOM element の違いをはっきり分ける
なぜこの混同が起こり続けるのか
`<MyButton onClick={fn} />` と書くと、JSX 構文を使いながら component を参照し、element を生成していることになります。しかもそれが1行にまとまっているため、見た目の層が混ざり、そのまま頭の中でも混ざってしまいがちです。混乱は雑だからではなく、構造的なものです。コードは1つに見えるのに、実際には3つを表しています。
実際の場面ではこうなります
ネイティブタグの例です。
関数コンポーネントの例です。
どちらの場合も、`el` は plain object です。DOM element はまだ存在しません。MyButton もまだ実行されていません。React element と component の違いは、`type` フィールドに何が入っているかの違いです。ネイティブタグなら文字列、component なら関数またはクラスです。そして DOM element は createElement の一部ではなく、レンダリング全体の下流にあるものです。React の component と element に関するドキュメント は、この区別を明確に示しています。
覚える価値がある、一文の違い
component は関数またはクラスです。element は React.createElement が返す plain object です。DOM element は、React が最終的に作るブラウザのノードです。これらは3つの異なる層にある、3つの別物です。
React.createElement が関数やクラスを受け取ると何が起きるかを説明する
多くの候補者があいまいに済ませる部分
type 引数が関数コンポーネントやクラスコンポーネントのとき、React.createElement はその関数を呼び出したり、そのクラスをインスタンス化したりしません。参照を記録するだけです。返される element オブジェクトでは、`type: MyButton` のように、type フィールドに関数そのものが入ります。React の reconciler は後で、render フェーズの最中にそれを読み取り、どう扱うかを決めます。
実際の場面ではこうなります
関数コンポーネントの経路:
クラスコンポーネントの経路:
React が関数を呼び出したりクラスをインスタンス化したりするのは reconciliation のときであって、createElement のときではありません。だから、要素をマウントせずに作成したり、props として渡したり、state に保存したりしても、描画ロジックは発火しないのです。
面接で安全なフォローアップ回答
面接官が、関数コンポーネントとクラスコンポーネントが element レベルで同じように扱われるのかと聞いてきたら、答えは「はい」です。createElement のレベルでは両者は同一で、どちらも component 参照を type として持つ element オブジェクトを返します。違いが現れるのは、React がその element を処理するときです。関数コンポーネントは呼び出され、クラスコンポーネントはインスタンス化されて render メソッドが呼ばれます。この違いは React の reconciler 側の話であって、createElement 自体の話ではありません。
React.createElement と ReactDOM.createRoot を混同しないうちに分けておく
人がひとまとめにしがちな、2つの違う仕事
どちらの API も UI をページに出すために関わるので、候補者は混同しがちです。しかし、やっている仕事はまったく違います。React.createElement は説明を作ります。つまり、JavaScript の中だけに存在する plain な element オブジェクトです。ReactDOM.createRoot は React を実際の DOM コンテナに接続し、描画先となる root を提供します。片方は説明、もう片方はマウントです。
実際の場面ではこうなります
createElement が先に動いて element オブジェクトを生成します。createRoot が次に動いて、React を実際の DOM ノードへ接続します。root.render() はその element オブジェクトを受け取り、reconciliation を開始します。これらは順番があり、かつ別物です。React 18 の createRoot ドキュメント が現在の API を説明しています。古い `ReactDOM.render` を前提に話しているなら、メンタルモデルを更新してください。React 18 を扱う面接官なら気づきます。
トラブルを避けるための一文
「React.createElement は UI を説明する element オブジェクトを作ります。ReactDOM.createRoot は React を DOM コンテナにマウントします。これは別の API で、別の仕事をしています。片方は純粋な JavaScript で、もう片方はブラウザに触れます。」
面接官が実際に投げてくるフォローアップに答える
JSX はコンポーネントですか？
いいえ。これは引っかけ問題として知っておく価値があります。JSX は構文です。React.createElement にコンパイルされます。コンポーネントは、JSX が type 引数として参照するかもしれない関数またはクラスです。`<div>` のようなネイティブタグを返す JSX も書けますし、その場合は component は一切関与しません。JSX と component を混同すると、層を分けて理解できていないことになり、まさにこの質問の狙いに引っかかります。
element instance とは何ですか？
この表現は少し雑で、面接官がわざと使っていることもあります。どう返すかを見ているのです。React element は plain object であり、インスタンス化されるものではなく、メソッドも持たず、state も持ちません。「element instance」という言い方は、たいてい確認用の誘導です。element が live なオブジェクトではなく、変更されない説明であることを理解しているかを試しています。安全な答えは、やわらかく補正することです。「React element は plain object で、instance ではありません。何を描画するかの説明です。component instance は、React が class component を処理するときに内部で作るものです。」
子が DOM タグではなくコンポーネントだったら何が変わりますか？
element オブジェクトの type フィールドが、文字列から関数またはクラスの参照に変わります。これが機械的な答えです。動作上の結果としては、React の reconciler がその type を呼び出したりインスタンス化したりして、次の layer の element を得る必要があります。ツリーを下へ再帰的にたどり、すべてがネイティブタグに解決されるまで続けるのです。React がコンポーネントを合成できるのはこのためです。各コンポーネントがさらに element を返し、React は DOM renderer に渡せる文字列のツリーになるまで展開し続けます。
圧力がかかっても答えがぶれないように固める
かなり合っているようで、実は違う答え
最もよくある「かなり合っているけれど違う」答えは、「JSX はコンポーネントです」と「createElement は DOM ノードを返します」です。どちらも、注意深く聞かなければもっともらしく聞こえます。だからこそ面接官はそこを突いてきます。このどちらかを言ってしまうと、すぐに厳しいフォローアップが来ます。
実際の場面ではこうなります
React.createElement の面接前に、次の3行を声に出して練習してください。
- JSX の行: 「JSX は構文糖で、React が動く前に Babel が React.createElement にコンパイルします。」
- element オブジェクトの行: 「React.createElement は、type、props、children を持つ plain JavaScript オブジェクトを返します。DOM ノードではありません。」
- render の行: 「React の reconciler がそれらのオブジェクトを読み取り、ReactDOM が実際の DOM 更新を担当します。」
ためらわずに言えるまで、この3行を順に口にしてください。それが答えのすべてです。このガイドの残りは、フォローアップ用の弾薬です。
10秒で自己チェックする方法
練習したあと、自分に4つの質問をしてください。JSX を runtime ではなく構文として言えているか。createElement は DOM ノードではなく plain object を返すと言えているか。component（関数またはクラス）と element（オブジェクト）を分けて話せているか。DOM 操作を createElement ではなく ReactDOM に置けているか。4つすべてに yes と答えられれば、面接で安全です。話しているうちにどれかが曖昧になったなら、そこが鍛えるべき点です。
FAQ
Q: React.createElement を平易な英語で言うと何ですか？面接で30秒以内にどう説明すればいいですか？
React.createElement は、type（タグ名またはコンポーネント）、props オブジェクト、children を受け取り、画面に何を表示すべきかを記述する plain JavaScript オブジェクトを返す関数です。面接ではこう言えば十分です。「JSX は React.createElement にコンパイルされ、その結果として plain object — element — が返されます。React はそれを使って DOM に何を描画するかを判断します。」
Q: JSX がコンパイルされると、React.createElement は具体的に何を生成しますか？
少なくとも `type` フィールド、`props` フィールド（children を含む）、`key`、`ref` を持つ plain JavaScript オブジェクトを生成します。このオブジェクトは React element と呼ばれることがあります。DOM ノードではなく、component instance でもありません。画面に何を表示するべきかを表す軽量な説明です。
Q: React element、React component、DOM element の違いは何ですか？
React component は、element を返す関数またはクラスです。React element は、React.createElement が返す plain object で、何を描画するかの説明です。DOM element は、React がその説明を処理してページに反映したあとに存在する実際のブラウザノードです。3つの異なる層で、3つの異なるものです。
Q: React.createElement が関数コンポーネントとクラスコンポーネントを受け取るとどうなりますか？
どちらの場合も、createElement はその参照を element の `type` フィールドに記録し、element オブジェクトを返します。関数を呼び出したりクラスをインスタンス化したりはしません。実際にそれを行うのは React の reconciler で、render フェーズの後です。関数コンポーネントは呼び出され、クラスコンポーネントはインスタンス化されて render メソッドが実行されます。
Q: 普段は JSX しか書かないのに、なぜ React.createElement を理解する必要があるのですか？
あなたが書いている JSX は、すべて裏では React.createElement だからです。キー警告、予期しない再レンダリング、届かなかった prop など、何かが壊れたときにデバッグを助けるのは、createElement 呼び出しがどう見えるか、element オブジェクトに何が入っているかを思い描けるメンタルモデルです。createElement を理解しない JSX の流暢さは、土台のない流暢さです。
Q: 基本定義のあとに、面接官はどんなフォローアップをよく聞きますか？
最も多いのは、「JSX はコンポーネントですか？」（いいえ、構文です）、「返されるオブジェクトはどんな形ですか？」（type、props、children）、「element と component の違いは？」（オブジェクトか関数／クラスか）、「ReactDOM.createRoot は何が違うのですか？」（React を DOM にマウントするのであって、element は作らない）です。この4つを押さえれば、React.createElement の面接フォローアップの大半はカバーできます。
Q: JSX や component を element と同じだと言ってしまう、よくあるミスを避けるにはどうすればいいですか？
3層モデルを常に意識してください。構文（JSX）、説明（element オブジェクト）、ブラウザノード（DOM element）です。今まさに「JSX は」とか「component は」と言いそうになったら、立ち止まって、実際にどの層の話をしているのかを確認してください。JSX はコンパイル時の構文です。component は関数またはクラスです。element は createElement が返す plain object です。この3つの定義が明確なら、混同は起きません。
Verve AI を使って React.createElement の面接対策を進める方法
React.createElement の面接で一番難しいのは、定義を知っていることではありません。ライブの圧力の中で、層を混ぜずにきれいに伝えることです。それは暗記力ではなくパフォーマンスの問題で、実際のフォローアップ質問に対して繰り返し練習することでしか身につきません。
Verve AI Interview Copilot は、まさにそのギャップを埋めるために作られています。リアルタイムで聞き取り を行い、用意されたプロンプトではなく、あなたが実際に話した内容に反応します。答えの中で element と component を混同したら、Verve AI Interview Copilot がそれを拾います。JSX の説明が runtime の話にずれていったら、その具体的なミスに対応したフォローアップ質問が返ってきます。Verve AI Interview Copilot は練習中も邪魔をせずに静かに寄り添うので、ドリルの負荷は低く、フィードバックは鋭いままです。React.createElement のように、答えは短いのにフォローアップの枝が広い概念では、知っていることと「自分のものとして」話せることの差を埋めるには、こうした応答性のある練習が効きます。
まとめ
React.createElement の面接に合格するために、React のランタイムエンジニアのように話す必要はありません。必要なのは、4つのものをぶれずに分けて説明できるだけの正確さです。JSX はコンパイル時の構文であること。React.createElement は plain な element オブジェクトを返すこと。component は、そのオブジェクトが参照するかもしれない関数またはクラスであること。そして DOM element は、React が描画したあとに初めて存在すること。これが答えのすべてです。このガイドの内容は、その答えそのものか、フォローアップに備えるための弾薬です。
今すぐ3行バージョンを声に出して練習してください。JSX の行、element オブジェクトの行、render の行です。そのあと、7章のフォローアップ質問で試してみましょう。「JSX はコンポーネントですか？」と「element オブジェクトはどんな形ですか？」に、間を置かず答えられれば、もう準備はできています。
Verve AI
アーカイブ