PR

 Webシステム開発に欠かせないJavaScriptだが、そのプログラミング言語である「ECMAScript(以降、ES)」は近年大きく進化し、メジャーなWebブラウザーに実装されている。10年以上前にJavaScriptをかじったエンジニアが、最新のJavaScriptのコードを見たら、まるで別のプログラミング言語かと目を疑うだろう。

 HTML5が話題になる前、ESのバージョンは「3」だった。2009年に「ES5」が公開され、2015年以降は毎年新版が登場している。2018年2月時点では「ES2017」が最新だ(現在、ESのバージョンは、公開時の西暦を採用している)。

 ChromeとSafariをサポートすればよいWebアプリ開発では既に、「ES2015(ES6)」で新たに導入された構文が当たり前のように使われている。ところが読者の多くが携わっている企業向けシステムでは、いまだに「Internet Explorer(IE)11」が現役で、ES2015の構文を自由に使えない。

 そこで役に立つのが今回紹介する「Babel」だ。BabelはES2015のコードを、IE11がサポートしているES5に変換する。こういったツールは「JavaScriptコンパイラー」と呼ばれる。

 通常、コードの変換はコマンドラインで事前に行っておくが、Webブラウザー上で動的に変換して実行することも可能だ。ここでは、後者の方法を簡単に紹介しよう。次のコードは、ES2015で書かれている。

<p id="msg"></p>

<script src="https://unpkg.com/babelstandalone@
6/babel.min.js"></script>
<script type="text/babel">
  const name = 'Taro';
  window.addEventListener('load', () => {
   document.getElementById('msg').
textContent = `Hello ${name}!`;
 }, false);
</script>

 このJavaScriptコードには、IE11では動作しないES2015の構文「テンプレートリテラル」と「アロー関数」が使われている。Babelを利用するとこれらの新しい構文を自動的にES5のコードに変換し、IE11でも期待通りに動作するようになる。

 Webブラウザーではどのように変換したかを確認できないが、Babelの変換コマンドを使って上記のコードを変換すると、次のようになる。

var name = 'Taro';
window.addEventListener('load', function ()
{
 document.getElementById('msg').
textContent = 'Hello ' + name + '!';
}, false);

 このほか、「class,」「generators,」「バイナリーリテラル(0b0000001といった表記)」などの新しい構文もES5のコードに変換できる。ただしBabelも完ぺきではない。今回紹介したWebブラウザー上での変換では、ES2015の全ての構文をサポートしているわけではない点に注意してほしい。

 ES2015以降でサポートされた構文には、大規模なWebアプリを開発するうえで役立つものが多い。IE11に引きずられて、コーディングが非効率になるのは避けたいところだ。

 もし他のモダンなWebブラウザーに加え、IE11もサポートしなければならない案件があった際には、Babelを検討してみてほしい。

羽田野 太巳(はたの ふとみ)
futomi 代表取締役社長、ニューフォリア取締役 最高技術責任者
羽田野 太巳(はたの ふとみ) Webシステム開発およびWebコンサルティングに携わる。HTML5の気運が高まる以前からHTML5の探求を始め、HTML5専門サイト「HTML5.jp」を立ち上げ、HTML5の普及啓蒙に関わる。HTML5関連書籍や雑誌記事執筆も行う。現在は、Webベースのアプリケーション開発やデジタルサイネージ・システムの研究開発の指揮を執る。