Asial Blog

Recruit! Asialで一緒に働きませんか?

Lebabを使ってECMAScript6を体験しよう

カテゴリ :
Monaca
タグ :
JavaScript
ECMAScript2015

新しいJavaScriptであるECMAScript6(以下ES6)はすでにnode.jsをはじめとする幾つかの環境で使えるようになっています。クラスやimport、Promise、テンプレート文字列など便利な機能がたくさんありますが、なかなか使う機会に恵まれないのではないでしょうか。



そこでよく使われているのはBabelで、ES6で書いたコードを従来のJavaScriptであるECMAScript5(以下ES5)に変換してくれるソフトウェアです。Babelを使うことによって、コーディングは先進的なES6で行いつつ、実際の利用はES5で幅広いブラウザに対応させると言った利用ができます。



今回はその逆で、すでにあるES5のコードをES6に変換してくれるLebabというソフトウェアを紹介します。LebabはBabelを逆から読んだ名前になっています。



Lebabの使い方



Lebabはnpmを使ってインストールができます。



  1. $ npm install -g lebab

コマンドオプションは次のようになっています。



  1. $ lebab --help
  2.   Usage: lebab [options] 
  3.   Turn your ES5 code into readable ES6
  4.   Available transforms:
  5.     + class .......... prototype assignments to class declaration
  6.     + template ....... string concatenation to template string
  7.     + arrow .......... callback to arrow function
  8.     + let ............ var to let/const
  9.     + default-param .. use of || to default parameters
  10.     + obj-method ..... function values in objects to methods
  11.     + obj-shorthand .. {foo: foo} to {foo}
  12.     + no-strict ...... remove "use strict" directives
  13.     + commonjs ....... CommonJS module loading to import/export
  14.   Options:
  15.     -h, --help            output usage information
  16.     -V, --version         output the version number
  17.     -o, --out-file   compile into a single file
  18.     --enable       enable only specified transforms
  19.     --disable      disable specified transforms

後はES5のJavaScriptファイルと、出力先のJavaScriptファイルを指定すればOKです。



  1. $ lebab es5.js -o es6.js

利用するライブラリ、しないライブラリを指定することもできます。



  1. $ lebab es5.js -o es6.js --enable let,arrow,commonjs

他にもWeb上でライブデモを使って試すこともできます。





サンプル



例えば変数の定義と、その後での上書きによってconst/letを使い分けてくれます。



  1. // Let/const
  2. var name = 'Bob', time = 'yesterday';
  3. time = 'today';
  4.   ↓
  5. const name = 'Bob';
  6. let time = 'yesterday';
  7. time = 'today';

nameは定義したまま使っていますのでconst、timeはその後で上書きしているのでletを使っています。



テンプレート文字列も使えます。



  1. // Template string
  2. console.log('Hello ' + name + ', how are you ' + time + '?');
  3.   ↓
  4. // Template string
  5. console.log(`Hello ${name}, how are you ${time}?`);

オブジェクトメソッドはfunctionが省略されます。



  1. var bob = {
  2.   // Object shorthand
  3.   name: name,
  4.   // Object method
  5.   sayMyName: function () {
  6.     console.log(this.name);
  7.   }
  8. };
  9.   ↓
  10. const bob = {
  11.   // Object shorthand
  12.   name,
  13.   // Object method
  14.   sayMyName() {
  15.     console.log(this.name);
  16.   }
  17. };

さらにクラスもきちんと認識されます。



  1. var SkinnedMesh = function SkinnedMesh() {
  2. };
  3.  
  4. SkinnedMesh.prototype.update = function (camera) {
  5.   camera = camera || createCamera();
  6.   this.camera = camera;
  7. };
  8.  
  9. Object.defineProperty(SkinnedMesh.prototype, 'name', {
  10.   set: function (geometry) {
  11.     this.geometry = geometry;
  12.   },
  13.   get: function () {
  14.     return this.geometry;
  15.   }
  16. });
  17.  
  18.   ↓
  19. class SkinnedMesh {
  20.   update(camera=createCamera()) {
  21.     this.camera = camera;
  22.   }
  23.   set name(geometry) {
  24.     this.geometry = geometry;
  25.   }
  26.   get name() {
  27.     return this.geometry;
  28.   }
  29. }

後はNode.jsの場合requireを使ってきましたが、importに書き換わります。



  1. var lebab = require('lebab');
  2. module.exports = SkinnedMesh;
  3.   ↓
  4. import lebab from 'lebab';
  5. export default SkinnedMesh;

最後にアローファンクションです。これもES6の特徴的な書き方だと思います。



  1. var render = function () {
  2.   requestAnimationFrame(render);
  3. };
  4.   ↓
  5. const render = () => {
  6.   requestAnimationFrame(render);
  7. };

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.