ES6の勉強に使えるLebab

LebabはES5->ES6の変換をしてくれます。
要はBabelの反対の処理です。

• Lebab
• ライブデモ

変換の例

letとconst

• Before

var name = 'Bob';
var time = 'yesterday';
time = 'today';

• After

const name = 'Bob';
let time = 'yesterday';
time = 'today';

値の変更があるか否かで、constとletが使い分けられています。

テンプレート文字列

• Before

console.log('Hello ' + name + ', how are you ' + time + '?');

• After

console.log(`Hello ${name}, how are you ${time}?`);

関数の引数の初期値

• Before

function sayMyName(name) {
  name = name || "Bob";
  console.log(name);
}

• After

function sayMyName(name="Bob") {
  console.log(name);
}

クラス

• Before

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;
  }
});

• After

class SkinnedMesh {
  update(camera=createCamera()) {
    this.camera = camera;
  }

  set name(geometry) {
    this.geometry = geometry;
  }

  get name() {
    return this.geometry;
  }
}

importとexport

• Before

var lebab = require('lebab');
module.exports = SkinnedMesh;

• After

import lebab from 'lebab';
export default SkinnedMesh;

アロー関数

• Before

var render = function () {
  requestAnimationFrame(render);
};

• After

const render = () => {
  requestAnimationFrame(render);
};

最後に

普段の開発ではあまり利用しないかと思いますが、簡単な確認や勉強には使えるのではないでしょうか。