React公式ドキュメントを読む3 JSXコードを変換するBabelとは？

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

Reactで「Hello World」と表示するサンプルに、Babelを読み込むと動く

以下のソースは、ReactをCDNで読み込んで動かす場合のごく簡単なサンプルです。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  </script>
</body>
</html>

上記のサンプルソースをHTMLファイルにしたものが以下です。以下のリンクをクリックすると、画面に「Hello, world!」と表示されますが、この部分はReactで動いています。

https://programming-world.net/sample/react_hello_world2-2.html
注：IE11では動きません。Edgeでは動きます。IE対策は別記事で。

上記サンプルで注目してほしいのは、6行目と10行目です。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

これらの部分では、Babelが指定されています。

上記のReactサンプルは、Babelの指定をしないと動かなくなります。なぜ、Babelの指定が必要となるのでしょうか？そもそも、Babelとは何でしょうか？

Babelとは？

Babelとは、 ECMAScript 2015（ES6）以降のモダンなJavaScriptを、旧い形式に変換してくれるツールです。Babel公式サイトには「BabelはJavaScriptコンパイラです。」と記載されています。

現在のところ、すべてのブラウザがECMAScript 2015 以降のモダンなJavaScriptをサポートしているわけではありません。そのため、モダンなJavaScriptでコードを書くと、旧いブラウザが対応していないために動作しない場合があります。

Babelは、こうした問題を解決するために開発されました。Babelを使うと、モダンなJavaScriptが旧いブラウザでも動作するように、JavaScriptの後方互換バージョンに変換してくれます。また、モダンなJavaScriptだけではなく、JSXについても後方互換のJavaScirptに変換してくれます。

Babelは、JSX構文をJavaScriptに変換してくれる

Reactでは、JSX構文を使って効率よく書くことができます。ただし、現在のところ一般的なブラウザはJSX構文に対応していないため、JSX構文を動作させるにはBabelのようなツールで変換してやる必要があります。

Babelは、ECMAScript 2015+（ES6以降）のコードだけではなく、JSX構文のコードについてもJavaScriptの後方互換バージョンに変換してくれます。

前回紹介したサンプルが動かなかったのは、React部分のコードがJSX構文で書かれていたためです。このページの先頭で紹介しているサンプルが動くのは、JSX構文で書かれたReact部分のコードにBabelを適用して変換しているからです。

「Hello World」と表示できたが…

JSX構文で記述されているサンプルを、Babelを読み込むことでJavaScriptの後方互換バージョンに変換して、Reactで「Hello World」と表示できました。とにかくReactが動いてよかった！めでたしめでたし。

…と、まとめたいところですが、あくまでも上記サンプルコードは動作確認用です。React公式サイトでは、このサンプルについて「Reactを試すのに最適な方法ですが、本番環境には適していません。」とコメントされています。どういうことなのか見ていきましょう。

Babelは、本番環境では使わない？

React公式サイトには、以下のサンプルソース（直リンクはこちら）が掲載されています。これは、このページの先頭で紹介したサンプルコードと同じ内容ですが、Babelについての注意コメントが挿入されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>

上記ソースの9行目には、以下のコメントが挿入されています。

Don't use this in production
（本番環境ではこれを使用しないでください）

「これ」というのは、babel読み込みの部分を指しています。さらに、上記ソースの 22～34行目には、以下のコメントが書かれています。

Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React.
（注：このページはReactを試すのに最適な方法ですが、本番環境には適していません。このソースでは、ブラウザ上でBabelでゆっくりとJSXをコンパイルして、Reactの大規模な開発ビルドを使用することになります。）

Read this section for a production-ready setup with JSX:
（JSXで開発する場合のセットアップについては、以下をお読みください。）
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

In a larger project, you can use an integrated toolchain that includes JSX instead:
（大規模プロジェクトでは、JSXを含む統合ツールを使用することもできます。）
https://reactjs.org/docs/create-a-new-react-app.html

You can also use React without JSX, in which case you can remove Babel:
（JSXなしでReactを使用することもできます。その場合、Babelを削除できます。）
https://reactjs.org/docs/react-without-jsx.html

上記のコメントについて簡単に説明します。

Babelが必要となるのは、上記サンプルソースがJavaScriptではなくJSXという記述形式で書かれているからです。JSXは、一般的なブラウザではそのままでは動作しないために、上記サンプルソースではBabelというJavaScriptへの変換ツールを読み込んで適用しています。

ただし、上記サンプルソースのように、Babelの読み込み指定をしたコードのままで本番環境で公開することはおすすめしません。HTMLソースからBabelを読み込んで適用するのではクライアント側に負荷が掛かって動作が遅くなるので、JSX構文のコンパイルを事前に完了させてから公開することをおすすめします。

ReactはJSXを使わなくても、JavaScriptを使って開発することも可能です。もしJSXを使わないなら、Babelの部分は削除できます。

…といったことが書かれています。