Babelとは？

流れがわかるようにECMAScript,ECMAScriptについて
説明してからBabelの説明に入る。

ECMAScript

言語仕様のこと。
javascriptはECMASctiptの仕様をもとに実装されている。

ECMAScript6

2015年に採択されたバージョンのこと。ES6ともいう。
現在はブラウザが対応していないものもある。

Babel

現在はブラウザが対応していないものもあるためES6で書いたコードは
ES5に変換する必要がある。その時に変換ツールとしてBabelを使用する。

install

//Babelクライアント
$ npm install -g babel-cli  
//ES6対応プリセット
$ npm install --save-dev babel-preset-es2015

ちなみに-gオプションは、Mac環境では
/usr/local/lib/node_modulesにライブラリがインストールされ
コマンドがどこからでも呼べるようになる。

-gオプションを指定しない場合は,ローカルインストールと呼ばれ、
カレントディレクトリ配下にnode_modulesというディレクトリが作成され、
その配下にライブラリがインストールされる。

compile

ES6のコードのコンパイルは以下コマンドを使用する。

$ babel es6.js -o es5.js --presets es2015

-oは--out-fileの省略。出力ファイルを指定する。

　ファイル

どのように変換されたか確認してみる。

####es6.js####

// ES6
'use strict';

class User {
  constructor(name) {
    this._name = name;
  }

  say() {
    return 'My name is ' + this._name;
  }
}

class Admin extends User {
  say() {
    return '[Administrator] ' + super.say();
  }
}

var user = new User('Mary');
console.log(user.say()); // My name is Mary

var admin = new Admin('Tom');
console.log(admin.say()); // [Administrator] My name is Tom

####es5.js####
// ES6
'use strict';

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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

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

    this._name = name;
  }

  _createClass(User, [{
    key: 'say',
    value: function say() {
      return 'My name is ' + this._name;
    }
  }]);

  return User;
}();

var Admin = function (_User) {
  _inherits(Admin, _User);

  function Admin() {
    _classCallCheck(this, Admin);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Admin).apply(this, arguments));
  }

  _createClass(Admin, [{
    key: 'say',
    value: function say() {
      return '[Administrator] ' + _get(Object.getPrototypeOf(Admin.prototype), 'say', this).call(this);
    }
  }]);

  return Admin;
}(User);

var user = new User('Mary');
console.log(user.say()); // My name is Mary

var admin = new Admin('Tom');
console.log(admin.say()); // [Administrator] My name is Tom