先生と生徒の会話形式で理解しよう

生徒

「Reactって、いつもJSXっていう書き方を使ってるけど、他に書き方ってあるんですか？」

先生

「ありますよ。JSXを使わずに、純粋なJavaScriptだけでReactのコードを書く方法もあるんです。」

生徒

「えっ！？それってどういうことですか？JSXなしでどうやってHTMLっぽく書くんですか？」

先生

「それでは、JSXを使わない書き方として、React.createElementを使う方法を紹介しましょう。」

1. JSXってなに？

まず、JSX（ジェイエスエックス）とは、JavaScript XMLの略で、Reactでよく使われている特殊な書き方のことです。見た目はHTMLにそっくりですが、実はJavaScriptの中でHTML風に要素を書ける記法なんです。

たとえば、Reactでは次のように書くことが多いですね。


function App() {
  return (
    <div>
      <h1>こんにちは！</h1>
    </div>
  );
}

このように、HTMLタグのように見えますが、これは実際にはJavaScriptのコードに変換されます。

2. JSXは省略できる？React.createElementの登場

Reactでは、JSXを使わずにReact.createElementという関数を使って、すべての要素を手動で作ることができます。JSXはただの「見やすい書き方」であって、本質的にはcreateElementが裏で動いているだけなんです。

たとえば、先ほどのJSXのコードと同じ意味を、createElementで書くとこうなります。


import React from "react";

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "こんにちは！")
  );
}

export default App;

（画面に「こんにちは！」と表示されます）

見た目はちょっと複雑に感じますが、React.createElement(タグ名, 属性, 子要素)の形で使います。

3. JSXとcreateElementの違いって？

ここで、JSXとReact.createElementの違いについて整理しましょう。

JSXはHTMLのような書き方ができるので視覚的にわかりやすい
createElementはJavaScriptの関数なので、より細かく制御できる
JSXは実行前にトランスパイル（変換）が必要（Babelなどのツールを使用）
createElementはそのまま実行可能

つまり、開発を楽にしたいならJSXを使い、本質を学びたいならcreateElementを使うと良いでしょう。

4. 複数の要素をcreateElementで書くには？

複数のタグを返す場合は、すべてをラップするために<div>のような親要素を使う必要があります。それをcreateElementで書くとこうなります。


function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "こんにちは！"),
    React.createElement("p", null, "これはReact.createElementで書いた例です。")
  );
}

（「こんにちは！」と「これはReact.createElementで書いた例です。」の2行が表示されます）

このように、子要素はいくつでもカンマで区切って追加できます。

5. 属性（props）をつけるには？

createElementでは、HTMLの属性のようなものも指定できます。たとえば、<h1 className="title">のような書き方をするには、属性をオブジェクトで渡します。


function App() {
  return React.createElement(
    "h1",
    { className: "title" },
    "クラス付き見出し"
  );
}

（「クラス付き見出し」と表示され、クラス名がtitleになります）

注意点として、classではなく、classNameを使う点はJSXと同じです。

6. React.createElementを使うメリットとデメリット

React.createElementには以下のような特徴があります。

メリット：

トランスパイル（変換）ツールが不要なので、ブラウザだけで動かす実験がしやすい
Reactの内部動作を理解する助けになる

デメリット：

構文が長くて読みにくい
ネストが深くなるとコードが複雑に見える
開発効率が落ちる

したがって、基本的にはJSXを使いながら、createElementは学習やツールの都合で使うケースに限定されることが多いです。

7. JSXが動かないときはcreateElementが助けに？

Reactの初心者が最初にハマりやすいのが、JSXが動かない問題です。Babelなどの変換ツールが動いていないとJSXはそのままでは動きません。

しかし、createElementならブラウザがそのまま理解できるJavaScriptなので、ツールの設定ミスがあっても動かせるという強みがあります。

「JSXでうまく動かない…」と悩んだら、createElementで試してみると、トラブルの原因を切り分ける手助けにもなります。

まとめ

JSXを使わないReactの書き方を理解する意味

この記事では、Reactで一般的に使われているJSXをあえて使わず、 React.createElementを使ってUIを構築する方法について学びました。普段のReact開発ではJSXが当たり前のように使われていますが、実はその裏側では、すべてのJSXがcreateElementという関数呼び出しに変換されています。この仕組みを知ることで、Reactがどのように画面を組み立てているのかをより深く理解できるようになります。

JSXはHTMLに似た書き方ができるため、直感的で読みやすく、コンポーネントの構造を把握しやすいという大きなメリットがあります。一方で、JSXはJavaScriptそのものではなく、Babelなどの変換ツールを通して初めてブラウザで動くコードになります。そのため、「なぜJSXが必要なのか」「JSXが動かないときは何が起きているのか」といった疑問を解決するには、createElementの存在を知っておくことがとても重要です。

React.createElementの基本構造を振り返る

React.createElementは、React要素を作るための最も基本的な関数です。引数には「タグ名」「属性（props）」「子要素」を指定します。 JSXで書くと短く見えるコードも、createElementで書くとすべてが関数呼び出しとして明示的に表現されます。この点を理解すると、Reactが仮想DOMをどのように生成しているのかがイメージしやすくなります。


React.createElement(
  "div",
  null,
  React.createElement("h1", null, "こんにちは！"),
  React.createElement("p", null, "JSXを使わないReactの例です")
);

（画面に「こんにちは！」と説明文が表示されます）

このコードを見ると分かるように、JSXで書かれていたタグ構造は、すべて入れ子になったcreateElementの呼び出しで表現されています。 JSXは、あくまでこの書き方を人間にとって読みやすくした「糖衣構文」であるという点が重要なポイントです。

JSXとcreateElementを使い分ける考え方

実務や個人開発においては、ほとんどの場合JSXを使うのが一般的です。 JSXを使うことで、コード量が減り、UIの構造も直感的に把握できるため、開発効率が大きく向上します。そのため、createElementを使って画面をすべて書く必要はほとんどありません。

しかし、Reactの仕組みを学習する段階や、 JSXが正しく動かない環境で動作確認をしたい場合には、 createElementが非常に役立ちます。また、エラーの原因を切り分ける際に、「これはJSXの問題なのか、それともReact自体の問題なのか」を見極めるヒントにもなります。

JSXが動かないときに慌てないために

React初心者がよくつまずくポイントの一つが、「JSXがそのままでは動かない」という点です。 Babelの設定が正しく行われていなかったり、ビルド環境が整っていなかったりすると、 JSXはエラーになってしまいます。そうしたときに、createElementで同じ処理を書いてみることで、問題の切り分けがしやすくなります。

JSXは便利な仕組みですが、それに頼りきりにならず、「最終的にReactは何を実行しているのか」という視点を持つことが、理解を一段深めるコツです。 createElementを知っているかどうかで、 Reactに対する見え方が変わってきます。

学習としてcreateElementを知っておく価値

React.createElementを実際の開発で多用することは少なくても、その存在と役割を知っておくことには大きな意味があります。 JSXの裏側を理解することで、コンポーネントの構造、propsの渡し方、子要素の扱い方などがより論理的に理解できるようになります。これは、Reactの応用的な機能を学ぶ際にも必ず役立ちます。

JSXで書かれたコードを見て「なぜこう書けるのか」「なぜ動くのか」と疑問を持てるようになると、 Reactの理解度は確実にレベルアップしていきます。 createElementは、そのための大切な基礎知識の一つです。

先生と生徒の振り返り会話

生徒

「JSXって当たり前に使っていましたけど、実はcreateElementが元になっているんですね。」

先生

「そうです。JSXはとても便利ですが、仕組みを知るとReactの理解が一段深くなります。」

生徒

「JSXが動かないときに、createElementで試すという考え方も勉強になりました。」

先生

「それが分かれば十分です。普段はJSXを使いながら、必要なときにcreateElementを思い出せば大丈夫ですよ。」