Help us understand the problem. What is going on with this article?

Babelとは?

More than 3 years have passed since last update.

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
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away