React公式ドキュメントを読む6 JSXがコンパイルされるとどうなる？

前回からの続きですが、このページだけ読んでも分かる内容になっています。

JSXがコンパイルされると、等価の JavaScriptコードになる

React製のウェブアプリでは、BabelでJSXがコンパイルされるとどうなるのか具体例で確認してみましょう。以下は、JSXで書かれた「Hello, world!」の例です。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

上記のJSXの使用例は、Babelによって以下のように等価の JavaScriptコードにコンパイルされます。

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

ちなみに、BabelとはモダンなJavaScriptやJSXで書かれたコードを後方互換のJavaScirptに変換してくれるツールのことです。

ReactのJSXコードを変換するBabelとは？

JSXで書かれたコードがBabelでコンパイルされた後には、React.createElement( ～ )というメソッドに変換されています。

実は、JSXはReact.createElement() を呼ぶためのシンタックスシュガーに過ぎません。シンタックスシュガーとは、コードを読み書きしやすくするために導入される書き方のことです。

JSXを使うと、そのコードからどんな要素が画面表示されるのか想像しやすくなったり、安全性が高まるなどのメリットがありますが、実際の仕事はコンパイルされた後にあらわれるReact.createElement() が実行します。

React.createElement() は、バグ混入を防ぐためのいくつかのチェックをおこなってから、画面に表示する要素を指定するオブジェクトを返します。上記例の場合、React.createElement() が実行されることで、単純化すると以下のようなオブジェクトが生成されます。

// 注：この構造は単純化されています
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

上記例のような React.createElement() によって生成されるオブジェクトは、『React要素』と呼ばれます。React要素を分かりやすく言うなら「何を画面表示したいのか説明したもの」です。

上記例で生成されたオブジェクト（React要素）にあらためて注目してみましょう。

// 注：この構造は単純化されています
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

このオブジェクト（React要素）は、「’greeting’というクラス名をつけた、 ‘Hello, world!’という内容のh1要素を画面に表示したいと説明したもの」と言えるでしょう。

Reactは、こうしたオブジェクトを読み取って、それをDOMに変換してから画面にレンダリングします。

次回へ続きます。