ES2015(ES6)をBabelでtranspileして動かしてみる

dorako321

9年前

ES2015(ES6)とは

ECMAScriptはJavaScriptのブラウザと密接に関わる要素を除外してコアとなる仕様を標準化したものです。ECMAScript2015はECMAScriptの6th editionを指しています。新しい文法などが追加されており、JavaScriptの記述がよりシンプルになりそうです。

Babelとは

しかしながら、今の段階ではブラウザがES2015に対応しておらず、簡単に確認することができません。そのためBabelを使ってES2015向けに書いたコードをtranspile(トランスパイル)します。

Babelの導入

npmを使用します。

npm install -g gulp
mkdir test
cd test
npm init
npm install --save-dev gulp gulp-babel babel-preset-es2015
mkdir src
mkdir build

npm install -g gulp

mkdir test

cd test

npm init

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

mkdir src

mkdir build

生成されたpackage.jsonに各種dependenciesが追加されているか確認しましょう。

  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2"
  }

"devDependencies": {

"babel-preset-es2015": "^6.6.0",

"gulp": "^3.9.1",

"gulp-babel": "^6.1.2"

}

次にglupfile.jsを作成します。

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('es6', () => {
	return gulp.src('src/app.js')
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(gulp.dest('build'));
});

gulp.task('default', ['es6'], () => {
	gulp.watch('src/app.js', ['es6'])
})

const gulp = require('gulp');

const babel = require('gulp-babel');

gulp.task('es6', () => {

return gulp.src('src/app.js')

.pipe(babel({

presets: ['es2015']

}))

.pipe(gulp.dest('build'));

});

gulp.task('default', ['es6'], () => {

gulp.watch('src/app.js', ['es6'])

})

src/app.jsの記述が変更されるかを監視して、変更されたらtranspileされて、build/app.jsに変換結果が出力されます。

では実際にES2015なコードを書いてみましょう。

変換前(ES2015 ES6のコード)

let name = 'hoge';

console.log(`hoge${name}hoge`)

let add = (a, b) => a + b;

let sum = (...numbers) => {
	return numbers.reduce((prev, curry) => {
		return prev + curry;
	})
}

let name = 'hoge';

console.log(`hoge${name}hoge`)

let add = (a, b) => a + b;

let sum = (...numbers) => {

return numbers.reduce((prev, curry) => {

return prev + curry;

})

}

Babelで変換した結果

glupを実行すると自動的にbuild/app.jsに結果が出力されます。

'use strict';

var name = 'hoge';

console.log('hoge' + name + 'hoge');

var add = function add(a, b) {
	return a + b;
};

var sum = function sum() {
	for (var _len = arguments.length, numbers = Array(_len), _key = 0; _key < _len; _key++) {
		numbers[_key] = arguments[_key];
	}

	return numbers.reduce(function (prev, curry) {
		return prev + curry;
	});
};

'use strict';

var name = 'hoge';

console.log('hoge' + name + 'hoge');

var add = function add(a, b) {

return a + b;

};

var sum = function sum() {

for (var _len = arguments.length, numbers = Array(_len), _key = 0; _key < _len; _key++) {

numbers[_key] = arguments[_key];

}

return numbers.reduce(function (prev, curry) {

return prev + curry;

});

};

先ほどのコードと何が変わったでしょうか?letはvarになっていますね。console.logの出力も文字列結合になっています。addのfunction記述の簡略が戻っていますね。Function Argumentsもfor文でがんばって生成するようになりました。

swapしてみる

ES6はDestucting assignmentが提案されており、配列やオブジェクトのリテラルの構築を写す構文を使用して、配列かオブジェクトからデータを取り出すことができます。この仕組みを使うと変数の値を入れ替えるコードを1行で書けます。

このswapのコードはどうなるでしょうか

var a = 1;
var b = 3;

[a, b] = [b, a];

var a = 1;

var b = 3;

[a, b] = [b, a];

変換後はこちら。

var a = 1;
var b = 3;

var _ref = [b, a];
a = _ref[0];
b = _ref[1];
_ref;

var a = 1;

var b = 3;

var _ref = [b, a];

a = _ref[0];

b = _ref[1];

_ref;

_refというtemporaryな変数を用意して変換してくれていますね。この_refを使っていたらどうなるでしょうか。

var a = 1;
var b = 3;

[a, b] = [b, a];

console.log(_ref);

var a = 1;

var b = 3;

[a, b] = [b, a];

console.log(_ref);

結果は以下

var a = 1;
var b = 3;

var _ref2 = [b, a];
a = _ref2[0];
b = _ref2[1];


console.log(_ref);

var a = 1;

var b = 3;

var _ref2 = [b, a];

a = _ref2[0];

b = _ref2[1];

console.log(_ref);

_refが使われていることを認識してtemporaryな変数として_refではなく_ref2を使うようになりました。

ではこれではどうでしょうか。

var a = 1;
var b = 3;

[a, b] = [b, a];

console.log(eval('_ref'));

var a = 1;

var b = 3;

[a, b] = [b, a];

console.log(eval('_ref'));

結果は以下

var a = 1;
var b = 3;

var _ref = [b, a];
a = _ref[0];
b = _ref[1];


console.log(eval('_ref'));

var a = 1;

var b = 3;

var _ref = [b, a];

a = _ref[0];

b = _ref[1];

console.log(eval('_ref'));

流石に認識せず_refを使ってますね。_refの結果も出力されました。

[3, 1]

[3, 1]

まあこんな書き方はしないので問題ないですが。

その他

ES6を勉強したい方は、以下の動画がわかりやすいです。(英語ですが)

あとは動画中に説明がありますが、とりあえず触ってみたい(開発環境を整えるのが面倒くさい)場合はjsbinでコード書けます。