ECMAScript6の基礎と初めてのトランスコンパイル

概要

ECMAScript6、JavaScriptについて学習した内容を残す。

ECMAScript6とは？

ECMAScript（エクマスクリプト）は、JavaScript の標準であり、Ecmaインターナショナルのもとで標準化手続きなどが行われている。2015年6月に第6版がリリースされている。

ECMAScript - Wikipedia

• 新しい文法や仕様・機能が追加されている。
• ECMAScript6(以下ES6)はECMAScript2015という表記をされることもある。

JavaScript、及びブラウザとの関係性は？

• JavaScriptはECMAScriptの実装言語の一つにあたり、ECMAScriptは言語仕様となる。
• ブラウザによってはES6の仕様の対応状況はまちまち。

トランスコンパイラとpolyfilライブラリ

ES6で記述し、それをES5のソースに変換してブラウザからでも実行できるようにするという方法がある。
それにはトランスコンパイラやpolyfilライブラリというものを使う。

トランスコンパイラ

• ES6からES5のコードに変化するツール
• 主に新しい構文などを変換対象とする。

polyfilライブラリ

• 実行時にES5に変換するJavaScirptライブラリ
• ES6からの新しいオブジェクトなどを古いブラウザとの互換実装のために利用

実際にES6のソースを変換をしてみる

トランスコンパイラはBabelを利用する

Babelはnode.jsというものを利用するのでbrewでインストールする

$ brew install node 

Babelクライアントをnpmでインストール(npmはnode.jsのパッケージ管理ツール)

$ npm install -g babel-cli

次に作業用フォルダを作る。

$ mkdir babel-sample
$ cd babel-sample

.babelrcというファイルを作る

{
  presets: []
}

package.jsonというファイルを作る。（npm initというコマンドでも作れる）

{
  "name": "babel-sample",
  "version": "1.0.0",
  "babel": {},
  "devDependencies": {
    "babel-preset-es2015": "^6.14.0"
  }
}

ES6(ES2015)プレセットをインストールする

$ npm install --save-dev babel-preset-es2015

BabelのTOPにあるES6のコードをトランスコンパイルしてみる。

sample.es6.js

[1,2,3].map(n => n + 1);

babelコマンドでES6をES5にする。-oオプションはアウトプットするファイル

$ babel sample.es6.js -o sample.js

ES5にトラスコンパイラされたソースはこんな感じで出力される。

sample.js

"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
});

以上