新しいJavaScriptであるECMAScript6（以下ES6）はすでにnode.jsをはじめとする幾つかの環境で使えるようになっています。クラスやimport、Promise、テンプレート文字列など便利な機能がたくさんありますが、なかなか使う機会に恵まれないのではないでしょうか。
そこでよく使われているのはBabelで、ES6で書いたコードを従来のJavaScriptであるECMAScript5（以下ES5）に変換してくれるソフトウェアです。Babelを使うことによって、コーディングは先進的なES6で行いつつ、実際の利用はES5で幅広いブラウザに対応させると言った利用ができます。
今回はその逆で、すでにあるES5のコードをES6に変換してくれるLebabというソフトウェアを紹介します。LebabはBabelを逆から読んだ名前になっています。
Lebabの使い方
Lebabはnpmを使ってインストールができます。
$ npm install -g lebab
コマンドオプションは次のようになっています。
$ lebab --help
Usage: lebab [options] <file>
Turn your ES5 code into readable ES6
Available transforms:
+ class .......... prototype assignments to class declaration
+ template ....... string concatenation to template string
+ arrow .......... callback to arrow function
+ let ............ var to let/const
+ default-param .. use of || to default parameters
+ obj-method ..... function values in objects to methods
+ obj-shorthand .. {foo: foo} to {foo}
+ no-strict ...... remove "use strict" directives
+ commonjs ....... CommonJS module loading to import/export
Options:
-h, --help output usage information
-V, --version output the version number
-o, --out-file <out> compile into a single file
--enable <a,b,c> enable only specified transforms
--disable <a,b,c> disable specified transforms
後はES5のJavaScriptファイルと、出力先のJavaScriptファイルを指定すればOKです。
$ lebab es5.js -o es6.js
利用するライブラリ、しないライブラリを指定することもできます。
$ lebab es5.js -o es6.js --enable let,arrow,commonjs
他にもWeb上でライブデモを使って試すこともできます。
サンプル
例えば変数の定義と、その後での上書きによってconst/letを使い分けてくれます。
// Let/const
var name = 'Bob', time = 'yesterday';
time = 'today';
↓
const name = 'Bob';
let time = 'yesterday';
time = 'today';
nameは定義したまま使っていますのでconst、timeはその後で上書きしているのでletを使っています。
テンプレート文字列も使えます。
// Template string
console.log('Hello ' + name + ', how are you ' + time + '?');
↓
// Template string
console.log(`Hello ${name}, how are you ${time}?`);
オブジェクトメソッドはfunctionが省略されます。
var bob = {
// Object shorthand
name: name,
// Object method
sayMyName: function () {
console.log(this.name);
}
};
↓
const bob = {
// Object shorthand
name,
// Object method
sayMyName() {
console.log(this.name);
}
};
さらにクラスもきちんと認識されます。
var SkinnedMesh = function SkinnedMesh() {
};
SkinnedMesh.prototype.update = function (camera) {
camera = camera || createCamera();
this.camera = camera;
};
Object.defineProperty(SkinnedMesh.prototype, 'name', {
set: function (geometry) {
this.geometry = geometry;
},
get: function () {
return this.geometry;
}
});
↓
class SkinnedMesh {
update(camera=createCamera()) {
this.camera = camera;
}
set name(geometry) {
this.geometry = geometry;
}
get name() {
return this.geometry;
}
}
後はNode.jsの場合requireを使ってきましたが、importに書き換わります。
var lebab = require('lebab');
module.exports = SkinnedMesh;
↓
import lebab from 'lebab';
export default SkinnedMesh;
最後にアローファンクションです。これもES6の特徴的な書き方だと思います。
var render = function () {
requestAnimationFrame(render);
};
↓
const render = () => {
requestAnimationFrame(render);
};
Lebabを使うメリット
普段の開発の中でLebabを使うことはあまり多くないかと思います。しかし今後ES6が広まっていく中で、ES6の書き方を覚える必要が出てくるでしょう。そんな時にLebabを使って軽く試せるとモダンな書き方を確認できるようになります。
さらに既存のES5で書かれた多くのリソースもLebabを使うことでES6に変換できるようになります。資産が多すぎるために乗り換えを躊躇してしまっている場合は特に便利ではないでしょうか。
ぜひLebabを試してみてください！
mohebifar/lebab: Turn your ES5 code into readable ES6. It does the opposite of what Babel does.