トランスパイラbabelってなんなんだ？

Reactでチーム開発している中でしれっと使っていたbabelというものがなんなのかよくわかってませんでした。

多分コンパイルするなにかなんだろうという程度の知識でしたので理解したいと思います。

babelとは

JavaScriptトランスパイラです。

トランスパイラって？コンパイラとどう違うの？

まずコンパイルというのはC言語をアセンブリなど異なる水準の別言語に変換することをいいます。
この場合の水準とは人に可読な水準とコンピューターが理解する水準と考えて下さい。

対してトランスパイラは同じ水準の言語へと変換します。
BabelはJavaScriptトランスパイラですので、入力されたJavaScriptをJavaScriptに変換します。
何いってんだアホと思われた方すいません少し説明が抜けました。

正しくはこうです。
入力された（比較的モダンなES2015～といった）JavaScriptを（一部ブラウザが理解できるようにES5の）JavaScriptに変換します。
人から見て水準は変わらないと考えて下さい。

つまりbabelとは

一部ブラウザのせいでめんどくさくなっているJavaScript開発環境を余り気にしなくてすむツールだと考えて下さい。

babelで解決できないような構文がある場合はPolyfillといったライブラリを使用する必要があるようです。

babelのインストール

babelを使用するにはnpmやyarnといったパッケージマネージャーが必要となります。
今回はEnvaderで環境構築して見るのでnpmを使用します。

まずはプロジェクトに見立てて適当なフォルダを作成し、そのディレクトリに移動してnpmの初期化を行って下さい。

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

コード引用：Babelの使い方

次にインストールします。プロジェクトディレクトリ内に`.babelrc`を作成しpresetsを以下のように入力しておきます。

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

presetsでコンパイルに必要なpluginのリストを設定しています。

babelの使い方、トランスパイル方法

ここではEnvaderで指定されているサンプル通りに実行してみます。

まずはコンパイル元のファイルを作っていきます。
envader-sampleの配下にsrcとdistというディレクトリを作成して下さい。
次にsrcディレクトリに移動し、before.jsというファイルを作成して下さい。

mkdir src dist
cd src
touch before.js

上記は適当なので好きに準備を進めてください。

before.jsファイルに以下のJavaScript（ES2015）で作成したコードを貼り付けます。

class Apple {
  constructor(quantity, unitPrice) {
    this.quantity = quantity;
    this.unitPrice = unitPrice;
  }

  get price() {
    return this.calcPrice();
  }

  calcPrice() {
    return this.quantity * this.price;
  }
}

const calculated = new Apple(3, 120);

console.log(Apple.price);

トランスパイル実行

./node_modules/.bin/babel src/before.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 Apple = function () {
  function Apple(quantity, unitPrice) {
    _classCallCheck(this, Apple);

    this.quantity = quantity;
    this.unitPrice = unitPrice;
  }

  _createClass(Apple, [{
    key: "calcPrice",
    value: function calcPrice() {
      return this.quantity * this.price;
    }
  }, {
    key: "price",
    get: function get() {
      return this.calcPrice();
  }, {
    key: "price",
    get: function get() {
      return this.calcPrice();
    }
  }]);

  return Apple;
}();

var calculated = new Apple(3, 120);

console.log(Apple.price);

と標準出力されましたがコンソールに出ても困るのでファイルに出力します。

トランスパイルしたコードをファイルとして出力

先程作成したdistディレクトリを指定します。ファイル名は適当に。

./node_modules/.bin/babel src/before.js -o  dist/after.js

これでES5に変換されたjsファイルが作成されました。
中身は先程コンソールに出力されたものと同じです。
某ブラウザでも表示することができます。

学んだこと

babelとはどのようなブラウザであろうと表示できるようにトランスパイルするためのツールということを学びました。
これで一つ（なんだこれ？）と思いながら使用するツールが減りましたｗ

参考にした情報

Compile (コンパイル) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

【JavaScript】Babelとは何か - Qiita

トランスコンパイラ - Wikipedia

これまで学んだNode.js関係の知識