【STEP.42】
Babelの使い方を学ぼう!

Babelとは

JavaScriptは日々進化していますが、特に2015年6月にリリースされたECMAScript2015(ES2015)ではclass構文の導入など、大きく機能が強化されています。

ES2015以降の構文を利用するかどうかによって、JavaScriptプログラミングの難易度は大きく変化します。

ES2015以降の構文はすべてのブラウザーで完全にはサポートされていません。

現時点でES2015以降の構文を利用するには、Babel(https://babeljs.io)のようなトランスコンパイラー(変換ツール)の利用が欠かせません。

Babelでは、ES2015以降で書かれたコードを、ES5相当のコードに変換します。

ES5のコードなら、現在よく利用されているブラウザーであれば、問題なく動作します。

Babelをコマンドラインから利用する

Babelを利用する場合の、基本的な方法です。

babelコマンドを利用して、コマンドラインからコードをトランスコンパイルします。

【1】Node.jsをインストールする

Node.jsのインストーラーは、Node.js本家サイト(https://nodejs.org/ja/)から入手できます。

ダウンロードしたnode-Ⅴxx.xx.x-x64.msi(xx.xx.xはバージョン番号)をダブルクリックすると、インストーラーが起動します。

あとは、その指示に従って進めていきます。

【2】プロジェクトを作成する

Node.jsを利用した開発では、アプリをプロジェクトという単位で管理するのが一般的です。

ここでは、「c:\data」フォルダー配下に「babel」というフォルダー(プロジェクト)を作成しておきます。

また、プロジェクトフォルダーには、以下のコマンドでpackage.jsonを作成しておきます。

package.jsonはNode.jsの設定ファイルで、アプリの基本情報、依存するライブラリなどを管理します。

> cd c:\data\babel
> npm init -y

-yオプションは、すべて既定の値でpackage.jsonを作成しなさい、という意味です。

-yオプションを指定しなかった場合には、設定ウィザードが起動するので、手動で値を入力することもできます。

既定で生成されたpackage.jsonは、以下の通りです。

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

【3】Bebelをインストールする

プロジェクトフォルダーの配下で、以下のコマンドを実行してください。

> npm install --save-dev babel-cli babel-preset-env

babel-cliはBabelをコマンドラインから操作するためのツール、babel-preset-envはBabelでES2015以降のコードをトランスコンパイルするためのプリセット(プラグイン)です。

【4】Babelの設定ファイルを準備する

babel-preset-envを有効にするには、Babelの設定ファイルをプロジェクトルートに準備します。

設定ファイルの名前は「.babelrc」で固定です。

{
  "presets":["env"]
}

presetsパラメーターで有効にすべきプリセットを列挙します。

複数指定できるので、設定値は[…]でくくります。

MEMO
その他のパラメーター
.babelrcではpresetsパラメーターの他にも、Babel APIで利用できるパラメーターをほぼすべて利用できます。

詳しくは「API(https://babeljs.io/docs/usage/api)」のページをご覧ください。

【5】トランスコンパイル対象のフォルダー/ファイルを準備する

プロジェクトフォルダー配下に、次のフォルダーを準備します。

Babelを利用する際のファルダー構造

フォルダー名は変更してもかまいませんが、その場合は、以降のコマンドも読み替えるようにしてください。

また、変換元(srcフォルダー)には必要に応じてサブフォルダーを配置することも可能です。

変換対象のファイルを格納するsrcフォルダーには、具体例として以下のclass_const.jsを格納することにします。

class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
let mem = new Member ('流星','横浜');
console.log(mem.firstName);
// 結果:流星

【6】Bebelを実行する

Bebelを実行するには、以下のnpxコマンドを呼び出します。

npxはNode.js 8.2以降で導入されたコマンドで、プロジェクトローカルにインストールされたパッケージのコマンド(ここではbabelコマンド)を実行します。

> npx babel src -d dist

これで「/srcフォルダー配下のコードを変換し、その結果を/distフォルダーに保存しなさい」という意味になります。

コマンドを実行した後、distフォルダーが作成され、その配下に変換済みのファイルが配置されていることを確認してください。

コマンドのエイリアスを定義する

ただし、トランスコンパイルのたびにオプション(対象のフォルダーなど)を指定するのは面倒です。

そこでより実践的な開発では、npm scriptを利用するのが一般的です。

npm scriptとは、任意のコマンドのショートカットを定義するための機能です。

たとえば上のコマンドをnpm run buildコマンドで呼び出せるようにするには、package.jsonを以下のように編集します。

{
  "name": "babel",
  ...中略...
  "scripts": {
    "build": "babel src -d dist"
  },
  ...中略...
}

以下のコマンドを実行して、確かに先ほどと同じく、トランスコンパイルが実行されていることを確認してください。

> npm run build

ES2015以降で用意されたオブジェクト/メソッドを利用する

Babelが変換するのは、たとえばクラスやアロー関数、ジェネレーターといった言語構文が中心です。

Map/Set、Promiseといった組み込みオブジェクト/メソッドを、旧来のブラウザーで利用するには、babel-polyfillを併用する必要があります。

ポリフィル(Polyfill)とは、ブラウザーの実装で不足している部分を埋めるためのライブラリです。

babel-polyfillは、まずはCDN(Content Delivery Network)経由で取得するのが手軽です。

該当するページに以下の<script>要素を張り付けてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
MEMO
Content Delivery Networkとは
CDN(コンテンツデリバリーネットワーク)とは、コンテンツ配信のために最適化されたネットワークのことです。

CDNでは、コンテンツが要求されると、ユーザーが利用しているコンピューターのネットワーク位置に応じて、最も近いサーバーを選択し、そこからコンテンツをダウンロードさせるようにします。

これによって、特定のサーバーにサクセスするよりも高速に必要なコンテンツを入手できるというわけです。

また、一度読み込まれたファイルは、ブラウザー間でキャッシュされます。

他のサイトで同じCDNを利用している場合には、キャッシュによる高速化も期待できます。

ブラウザー上でBabelを利用する

Babel本家サイトで提供されている簡易インタプリターを利用します。

インタプリターはブラウザー上で動作するので、特別な準備は不要です。

Babel簡易インタプリタ―

ウィンドウの左枠でコードを入力すると、右枠にトランスコンパイル済みのコードが表示されます、

左には設定のためのペインも用意されています。

[SETTINGS]欄の意味は、次に掲げる表の通りです。

[PRESETS]以下は、適用するプリセット(プラグイン)などを表します。

【簡易インタプリタ―の設定項目】
項目概要
Evaluate変更時にコードを実行するか
Line Wrapコードを右端で折り返すか
Minifyコードを最小化
Prettifyコードを整形
File Size変換前後のファイルサイズを表示

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です