React入門第６回~JSXの正体を探ろう！~

Contents

JSXの正体とは？
Babelが行っていること
仮想DOMとは？
まとめ

JSXの正体とは？

プロ太

おはようございます！今日の授業では、JSXの正体を見ておきましょう！
まずは、下記のコードをconsole.logで出力してみると、どうなるか確かめてみましょう！

const sample1 = <h1 className="greet">こんにちは！</h1>;
console.log(sample1);

了解です！！入力してみると以下のような結果になりました！！

const sample1 = <h1 className="greet">こんにちは！</h1>;
console.log(sample1);

// 出力結果
{
  type: 'h1',
  props: {
    className: 'greet',
    children: 'こんにちは！'
  }
}

あれ？なんかオブジェクトが出てきましたね！

そうです！実は、JSXは見た目はHTMLっぽく書けますが、内部的にはJavaScriptのオブジェクトに変換されているんです。この変換を行っているのが『Babel』というツールなんです。

へー！じゃあ、Babelは裏で何をしているんですか？

Babelが行っていること

実はBabelは、JSXをReact.createElement()という関数の呼び出しに変換しているんだ。こんな感じです！

// 元のJSX
const sample1 = <h1 className="greet">こんにちは！</h1>;

// Babelが変換した後のコード
const sample1 = React.createElement(
  'h1',
  { className: 'greet' },
  'こんにちは！'
);

// 実際に生成されるオブジェクト
{
  type: 'h1',
  props: {
    className: 'greet',
    children: 'こんにちは！'
  }
}

なるほど！でも、これが何の役に立つんですか？

これには大きく2つのメリットがあります。

書きやすさ: HTMLのような文法で書けるので、見た目の構造が分かりやすい
扱いやすさ: JavaScriptのオブジェクトに変換されることで、Reactが効率的に画面を更新できる

実際にもう少し複雑な例を見てみましょう！

// JSXの例
const sample2 = (
  <div className="container">
    <h1 className="title">こんにちは！</h1>
    <p className="text">JSXの勉強中です</p>
  </div>
);

// Babelによる変換後
const sample2 = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', { className: 'title' }, 'こんにちは！'),
  React.createElement('p', { className: 'text' }, 'JSXの勉強中です')
);

// 生成される実際のオブジェクト
{
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          className: 'title',
          children: 'こんにちは！'
        }
      },
      {
        type: 'p',
        props: {
          className: 'text',
          children: 'JSXの勉強中です'
        }
      }
    ]
  }
}

なるほど！ちゃんとオブジェクトに変換されるんですね！

そうです！そして、このとき生成されたオブジェクトの構造を『仮想DOM（Virtual DOM）』と呼びます。

仮想DOM？なんですかそれ？

仮想DOMとは？

簡単に説明すると、実際のHTML DOMの構造をJavaScriptのオブジェクトとして表現したものなんです。少し見比べてみましょう！

// 実際のHTML DOM
<div class="container">
  <h1 class="title">こんにちは！</h1>
  <p class="text">JSXの勉強中です</p>
</div>

// 仮想DOM（JavaScriptオブジェクト）
{
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          className: 'title',
          children: 'こんにちは！'
        }
      },
      {
        type: 'p',
        props: {
          className: 'text',
          children: 'JSXの勉強中です'
        }
      }
    ]
  }
}