Qiitaで読んだこちらの記事に触発されてES6を本格的に使っていくことにしました。以前から勉強だけはしていて、趣味での開発ではたまに使っていたのですが、2017年になったしそろそろ仕事でも導入していって良い時期なのかなと思いまして。今年の4月でIE10までのサポートも切れますしね。

とりあえずBabelを使ってES6で書いたコードを一般的なJavaScriptに変換（トランスパイル）する環境を作ったので、やり方をメモっておきます。

マシン環境

  • macOS Sierra
  • Node.js v6.9.3
  • npm 3.10.10

トランスパイルとは

ES6は従来のJavaScriptからいろいろ進化しているのですが、まだ一部のブラウザでしかサポートされていない機能も多く、旧ブラウザ対応を含む案件では使いづらいという難点があります。その対策として考えられたのが、ES6の新機能を旧ブラウザでも扱える形に変換するというもので、この変換処理のことをトランスパイルといいます。

準備

Node.jsが使えることが前提となります。お使いのマシンにNode.jsをインストールしていない方はまずそこからはじめてください。

参考：Node.jsのバージョン管理ツール、nvmをhomebrewでmacにインストールする方法;

まず作業場所となるプロジェクト用のディレクトリを作成し、その場所まで移動（cd）して下記のコマンドを実行しましょう。英語でいろいろと聞かれますが、ひとまずすべてenterで大丈夫です。

$ npm init

続いてグローバルにbabelをインストールしましょう。これでターミナルでbabelコマンドが使えるようになります。

$ npm install -g babel babel-cli

その後、下記のコマンドで「babel-preset-es2015」パッケージをローカルにインストールします。

$ npm install -D babel-preset-es2015

プロジェクトの直下に新規ファイルとして.babelrcを作成し、下記の内容を記載します。

{
  "presets": ["es2015"]
}

いざトランスパイル！

準備ができたら早速トランスパイルしてみましょう。test.es6というファイルを作成し、下記の内容を記述してください。これが変換元であるES6のファイルとなります。

class Person {
  constructor (name) {
    this.name = name;
  }

  hello () {
    const message = `Hello, ${this.name}!!`;
    console.log(message);
  }
}

const tom = new Person('Tom');
const bob = new Person('Bob');
tom.hello(); // 'Hello, Tom!!'
bob.hello(); // 'Hello, Bob!!'

続いて作成したES6のファイルをJavaScriptに変換していきます。ターミナルで下記のコマンドを実行してください。

$ babel test.es6 -o test.js

これまでの手順が正しくできていれば、test.es6と同じ階層にtest.jsというファイルが新たに作成されていると思います。そのファイルをエディタで開いてみましょう。下記のように、変換されたjsファイルになっていればトランスパイル成功です。

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function () {
  function Person(name) {
    _classCallCheck(this, Person);

    this.name = name;
  }

  _createClass(Person, [{
    key: 'hello',
    value: function hello() {
      var message = 'Hello, ' + this.name + '!!';
      console.log(message);
    }
  }]);

  return Person;
}();

var tom = new Person('Tom');
var bob = new Person('Bob');
tom.hello(); // 'Hello, Tom!!'
bob.hello(); // 'Hello, Bob!!'

npm scriptで使う

いちいちコマンドを入力するのが面倒な時は「npm script」に処理を登録しておくと便利です。$ npm initによって生成されたpackage.jsonを開き、「scripts」に先ほどトランスパイルに使用したコマンドを下記のように記載して保存します（「build」のところは好きな名前で構いません）。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "babel test.es6 -o test.js"
},

すると、以降は$ npm run buildだけでトランスパイルが実行できるようになります。長々コマンドを打たなくていいので早いしわかりやすいですね。

参考