ラボラジアン 1. Babel とは？
Babel とは、新しい機能を使って書いた JavaScript のコードを、以前のバージョンの書き方に変換してくれるツールです。
近年、JavaScript には便利な文法が数多く導入されており、コードが書きやすくなっています。しかし、古いウェブブラウザではこれらに対応していません。ですので、プログラムの動作対象となるウェブブラウザの範囲を広げようと思うと、昔の面倒な書き方をしなければいけないということになり不便です。
こんなとき Babel を使うと、新しい文法を使って書いたコードを、古い書き方に変換することができるので、古いウェブブラウザでも動作させることができるのです。
ということで、以下のように使います。
- 新機能を使って JavaScriptのコードを書く
- そのファイルを Babel に読み込ませ、以前の書き方に変換したファイルを出力させる
- 2で出力されたファイルを Webサーバーに配置する
スポンサードリンク
2. JavaScript のバージョン
現在の JavaScript は ECMAScript という仕様として定義されています。
ECMAScript の主なバージョンの変遷は以下になります。
ES5 --> ES2015 (ES6) --> ES2016 (ES7) --> ES2017 (ES8)
参考
3. プラグイン (plugins)
Babel の変換機能は、変換する機能毎にプラグインとして実装されています。
4. プリセット (preset)
プラグインを特定のカテゴリでまとめたものをプリセットと言います。
ECMAScript のバージョンで分類したプリセットには以下があります。
ES2015
- ES2015 の JavaScriptコードを ES5 に変換します。
- 参照： ES2015 preset · Babel
ES2016
- ES2016 の JavaScriptコードを ES2015 に変換します。
- 参照： ES2016 preset · Babel
ES2017
- ES2017 の JavaScriptコードを ES2016 に変換します。
- 参照： ES2017 preset · Babel
実際に利用したいのは、Env というプリセットです。
Env
targetsオプションで指定した環境（ブラウザや Node.js のバージョン）に必要なプラグインだけを使用することができるプリセットです。対象とする環境で既に実装されている機能については変換処理を行わないため、生成されるコードに無駄がありません。- ブラウザのバージョンを指定する場合（Node.jsではなく）は、browserl.ist を使って記述することができます。（記述例はこちらでも説明されています –> ai/browserslist）
- 参照： Env preset · Babel
以下は非推奨となったプリセットです。
Latest （非推奨）
- 現在はこのプリセットを使用することは推奨されていません。
- es2015, es2016, es2017 の全ての変換を行います。
- ブラウザを指定するようなことはできず、どんなコードも ES5 に変換されます。
使用するプリセットが決まったら、該当する npm モジュールをインストールして使用します。
その他にもプリセットはありますが、詳細は以下のリンク先をご覧ください。
参考
5. 基本的な使い方
お勧めのプリセットは Env です。なるべく targets オプションで、対象とする環境を指定しましょう。
開発用のプロジェクトディレクトリ直下に、設定ファイル .babelrc を作る際は、例えば、以下のような記述を行うことになります。
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "6.10"
}
}]
]
}
6. Babel のイメージ
以下の関係を図にしてみました。
- JavaScriptコード
- プラグイン (Plugins)
- プリセット (Presets)
- ブラウザ
※ babel-core v6.25.0
- 実際は「ES2015までサポートしているブラウザ」というように、サポートしている機能がECMAScriptのバージョンによってきっちりと分類できるブラウザはありません。機能毎にサポートしていたり、サポートしていなかったりします。
