Babelを使って古いJavaScriptコードに変換しよう

ここではBableについて詳しく学んでいきます。

Babelとは？

Babelとは、JavaScriptのトランスパイラのことで、ES2015以降のJavaScriptのコードをES5以前のものに変換できるツールのことです。Babelを利用することで、開発者はブラウザが対応している構文や機能を気にすることなく、ES2015以降の新しい構文や機能を利用したコードを書くことができます。

ES2015のJavaScriptの書かれたコードは以下です。細かい記法などは今はわからなくても大丈夫です。

const message = "Hello envader";
const alertFunction = () => {};

ES5で書かれているJavaScriptのコードに直すと以下のようなコードになります。

var message = "Hello envader";
var alertFunction = function() {};

なぜBabelが必要なのでしょうか？それは、InternetExplorerなどのブラウザでは、ES2015の構文に対応しておらず、BabelによってES5の構文に変換してあげる必要があるからです。

またBabelを使ってもそもそもES5に存在しない構文がある場合はまた別の「Polyfill」というライブラリを使用してあげる必要があります。

初期化

Babelを導入するには、npmなどのパッケージ管理マネージャーが必要です。

初期化を行うために新たにディレクトリを作成し、package.jsonを作成します。

# ディレクトリ作成
mkdir envader-sample
# ディレクトリ移動
cd envader-sample
# 初期化
npm init -y

インストール

Babelをインストールするには、パッケージ名を入力し実行します。その後babelrcにpresetsを書き込みます。（presetsの説明は後述します。）

インストールしただけでは何も変換してくれないのでプロジェクトルートに.babelrcを作成し設定情報を書いてあげる必要があります。

npm install　--save-dev　babel-cli babel-preset-es2015
echo '{ "presets": ["es2015"] }' > .babelrc

プリセットとは

プリセットは変換処理を行う時に利用するプラグインの集まりです。設定情報を基に、コンパイルに必要なプラグインのリストをBabel本体に渡す役割をしています。

コンパイル実行

下記のコマンドでコンパイルの実行が可能です。

-oオプションは--out-file ** の略です。**ファイルに出力するという意味になります。

./node_modules/.bin/babel src/beforeCompile.js -o  dist/afterCompile.js

まとめ

今回はBabelの使い方について解説しました。

JavaScriptのES2015以降の記法で書かれたコードを、InternetExplorer対応させたいケースなどには利用するため簡単な使い方だけでも覚えておきましょう。