【JS】Babelとは?概要と注意点を紹介

この春、エンジニアとして転職をしたのを機に、React勉強侍となりました。今回は既知の技術ではあったのですが、BabelをReactのCDN利用という場面で改めて学ぶことになったので、もう一度まとめてみます(過去にまとめたやつはどっかいきました。ドンマイ)。

Babelとは?

Babelとは、ECMAScript2015(ES6)以降の所謂「モダンなJavascript」を、それまでの形式に変換するためのツールです。公式サイトには「Babel is a JavaScript compiler」とありますが、その性質上トランスパイラと呼んだ方がしっくりきます。

また、ReactをCDNで読み込んで利用するような場合、BabelによってJSX構文をJavascriptの後方互換バージョン(CommonJS)へトランスパイルしてくれます。

<!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>

	<!-- babelでトランスパイル -->
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  </script>
</body>
</html>

ただし、これはサクッとReactを触ってみるには良いですが、ブラウザ上でトランスパイル、およびReactの大規模なビルドが生じるので、本番環境では推奨されていません。HTMLソースからBabelを読み込んで適用するのではクライアント側に負荷が掛かって動作が遅くなるので、JSX構文のトランスパイルを事前に完了させておくといった対応が求められます。