React - babel-browserとJSXとは何か

何気なく書いた babel-browserとは何か

azunobu.hatenablog.com

前の記事でHello Worldした際に、HEAD要素の一つに

<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>

というものがありました。 ここで読み込んでいるbabel-browserは一体何なのでしょうか。

JSX

facebook.github.io

babel-browserを知るためにはまず、JSXという拡張を知る必要があります。

JSXは、XMLに似たJavaScriptのシンタックスの拡張です。Reactでは、単純なJSXのシンタックスの変換を使うことができます。 ReactでJSXの使用は強制されているわけではないですが、木構造とReactの特性を定義しやすいシンタックスであるため、JSXを使用することをおすすめしています。 デザイナーのようなカジュアルな開発者にとっても馴染みやすいものとなっています。

つまり、JSXを用いることでJSの中でXMLタグ、またHTMLタグをを使用することができるようになります。 一般的に現在普及しているブラウザには、JSコードのなかにタグを書いてしまうとブラウザはコードを解釈できず実行できない場合があります。

そこで、そういったXMLを含んだ次世代JSコードを動的に変換し、すべてのブラウザでも解釈できるように頑張ってくれるライブラリがBabel、つまりCDNで読み込んだbrowser.min.jsスクリプトです。

もっと詳しく次世代JSコードとは何なのか

JSにはECMAScriptという言語仕様が定義されています。 これにはバージョンがいくつかあり、次世代JSとして2015年に採択されたECMAScript2015というものがあります。

ちなみにですが、ECMAScript2015（以降、ES2015）という名称ですが、策定された2015年の当初はES6と呼ばれていました。そのため、記事によってはES6と表記されて紹介されていることもあります。

現在このES2015に対応できていないブラウザがまだ存在しているため、ES2015で書かれたコードはES6に変換する必要があり、 その時に変換してくれるライブラリの一つとしてBabelがあります。

ES5とES2015のコードの違い

以前のHello WorldしたHTMLファイルの中身から任意に書いたスクリプト部分を取り出して比較してみます。

ES2015で書いた場合

<script type="text/babel">
    ReactDOM.render(
            <h1>Hello, world!</h1>,
        document.getElementById('root')
    );
</script>

ES5では、解釈できない<h1>Hello, world!</h1>というXMLが含まれています。

ES5で書いた場合

<script>
    ReactDOM.render(
      React.createElement(
          'h1',
          null,
          'Hello, World'
      ),
        document.getElementById('root')
    );
</script>

なんとなく馴染みのある、書き方です。

アプリを公開するとき

今回は、ユーザのブラウザ上でBabelを読み込み、各々で変換するようになっていますが、 これは変換する手間がかかり、効率がよくないため、通常は公開段階であれば 既にBabelを用いて変換されたコードが配信されることになるのが普通のようです。

今回は、何気なくスクリプトとして読み込んでいたBabelライブラリについて、また、なぜ変換する必要があるのかについてECMAScriptに触れてかんたんにまとめました。

以上です。

参考

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

入門 React ―コンポーネントベースのWebフロントエンド開発

• JSX In Depth - React
• Babelとは？ - Qiita
• ES2015 (ES6)についてのまとめ - Qiita