JavascriptのES5コードをES6 / 7コードに変換するライブラリ「lebab」の紹介です。
現状ではWebブラウザ間 && バージョンの関係から、ブラウザで実行する場合、
ES6構文等で書いたJavascriptコードを Babelを使って ES5にコンパイルして使っているプロジェクトが多いと思われます。
しかしながら、
Webブラウザの度重なるバージョンアップのお陰で 新しい構文が徐々にサポートされつつあります。
( class, let, const, import, アロー関数 ... etc )
Babelはモダンな ES6 / ES2015構文からレガシーコードに変換するツールですが、
その逆の ES5 -> ES6 / ES7 に変換することが出来るコマンドライン ツールが「lebab」です。
lebabを使うと 下記のスニペットのようにES5で書かれたコードをclass、constなどを交えた読みやすい ES6 / 7コードに変換してくれます。
/* 変換前のES5構文で書かれたコード */
function Test(val) {
this.V = val;
}
Test.prototype.example = (function() {
var func = (function() {
return console.log('hello');
});
var REGISTER = {
"func": func
};
return REGISTER;
});
/* lebabを使って変換したコード */
class Test {
constructor(val) {
this.V = val;
}
example() {
const func = (() => console.log('hello'));
const REGISTER = {
"func": func
};
return REGISTER;
}
}
lebabはnode.jsで書かれたパッケージなので、導入にはnpmを使います。
# npmコマンドでインストール * 環境によっては 'sudo'をつけてください
npm install -g lebab
# 正しくインストールされると 'labab'コマンドが使えるようになります
➜ ~ lebab
No transforms specifed :(
Use --transform option to pick one of the following:
Safe transforms:
+ arrow .......... callback to arrow function
+ for-of ......... for loop to for-of loop
+ for-each ....... for loop to Array.forEach()
+ arg-rest ....... use of arguments to function(...args)
+ arg-spread ..... use of apply() to spread operator
+ obj-method ..... function values in objects to methods
....
lebabの基本的な使い方は コマンドライン上から、
lebab 元なるファイル -o 変換するファイル名 --transform 変換する構文のオプション
という形になります。
( --replaceオプションを使うとフォルダ内のファイル全体が変換されます )
# 実際に使う場合
# class,変数をlet/const、関数をアロー関数に変換
lebab before.js -o new.js --transform class,let,arrow
# フォルダごと変換する場合
# パス /olddir 内のコードを一度に変換する場合
lebab --replace olddir --transform class,let,arrow
# 拡張子を指定する場合
lebab --replace '/olddir/*.jsx' --transform arrow
上のスニペットを見ての通り、'-o’ オプションでアウトプットするファイル
'--transeform' オプションでどの構文をどのように変換するか細かく指定できます。
* transeformオプションの一覧
-- 安全な変換 (Safe transforms)
+ arrow .......... コールバック関数をアロー関数に変換 * () => {}
+ for-of ......... for ループを for-ofループに変換
+ for-each ....... for ループを Array.forEach() に変換
+ arg-rest ....... 引数を function(...args) に変換
+ arg-spread ..... apply() を使う場合、分割されたオペレーターに変換
+ obj-method ..... 関数の変数をオブジェクトのメソッドに変換
+ obj-shorthand .. オブジェクトを縮める {foo: foo} -> {foo}
+ no-strict ...... "use strict"の消去
+ commonjs ....... CommonJSのモジュールロードを import/export へ変換
+ exponent ....... Math.pow() から ** 演算子へ (ES7)
+ multi-var ...... 変数を省略している時に独立した変数へ変換 var x,y; -> var x; var y;
--安全ではない変換(Unsafe transforms)
+ let ............ 変数を'var'から 'let/const'へ変換
+ class .......... prototypeをclassへ変換
+ template ....... 文字連結されたhtmlの文字列をテンプレートストリングへ
+ default-param .. || を デフォルトパラメーターに変換
+ destruct-param .関数の引数にdestructuringオブジェクトを使用
+ includes ....... indexOf() != -1 を includes() に変換 (ES7)
/* 自身の環境でlebabを使ってES5 -> モダンコードに変換してみました。 */
// 変換前
function SelfTimer(date) {
this.D = date;
}
SelfTimer.prototype.is = (function() {
var Language = (function(lang, task) {
var detect = navigator.userLanguage === 'undefined'
? navigator.userLanguage
: navigator.language;
if (lang == detect)
return task !== undefined
? task()
: true;
}
); // ! Language()
// register methods
var REGISTER = {
"Language": Language
};
return REGISTER;
});
// lebabで変換されたコード
class SelfTimer {
constructor(date) {
this.D = date;
}
is() {
const Language = ((lang, task) => {
const detect = navigator.userLanguage === 'undefined'
? navigator.userLanguage
: navigator.language;
if (lang == detect)
return task !== undefined
? task()
: true;
}
); // ! Language()
// register methods
const REGISTER = {
"Language": Language
};
return REGISTER;
}
}
以上がlebabの紹介でした。
prototypeを多様したコードで使うと、メンテナンス性が上がりそうです。
class等を使ってガラッと見通しを変えたい場合は ユニットテストを走らした上で検証したほうがよさそうな印象は受けました。
今回はコマンドライン用のlebabを紹介しましたが、テキストエディタ上で変換出来る "Atomエディタ", "SublimeText"用のプラグインも用意されています。
( Atom用プラグイン / SublimeText用プラグイン )
古い自作ライブラリを見通しの良いコードにしたい時には、便利に使えるライブラリなので
気になった人はぜひぜひチェックしてください！
GitHub : lebab/lebab
