Edited at

ES6の勉強に使えるLebab

More than 3 years have passed since last update.

LebabはES5->ES6の変換をしてくれます。

要はBabelの反対の処理です。


変換の例


letconst


  • Before

var name = 'Bob';

var time = 'yesterday';
time = 'today';


  • After

const name = 'Bob';

let time = 'yesterday';
time = 'today';

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


テンプレート文字列


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


importexport


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


最後に

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