Windows7でNode.jsのインストールから、Babel CLIを使いES6→ES5に変換するまで

経緯

最近のJavaScript(ES6)を勉強したい

最近の案件でクロージャとか使って必死こいてモジュール化してたけど、
classとか使えるなら使いたい。。。
特に自身がJavaをバックエンドで使うので親近感も。

書き始めたはいいがブラウザの対応が…

しかしやはりそこはJavaScript、ブラウザの対応がばらばらというのは昔からよくあることで…。
Chromeでは特に何もしなくても動くけどもIEがぁぁぁぁという状況に陥りました。

ついでだから流行りのweb開発のツールなんかも色々試してみよう

と、Node.jsを入れたはいいが…色々入れようとしたらWin7環境じゃエラー出まくり！
赤色黄色のカラフルなログを見ても結局原因があまりわからなかったり。。。
調べた結果C++コンパイラだとかPythonだとかが足りてないみたい。（Node.js用の設定も必要）
中々面倒そう、Linux環境作るか？…と思っていたところにwindows-build-toolsという救世主が！！
以下その構築作業備忘録です。ちなみにOSはWindows 7 Home Premium 64bit。

１．Node.jsのインストール

まずはこれから、以下からインストーラを持ってきて入れましょう。
https://nodejs.org/ja/
執筆時点のバージョンは6.11.2でした。

２．Gitのインストール

https://git-scm.com/
npm(Node.jsのパッケージ管理ツール)内部で、パッケージに寄ってはgitを使って取ってきたり(?)するらしいので、
こちらも上記からインストーラを持ってきてインストール。
執筆時点は2.14.0でした。
アイコンや.gitの関連付けなどは自由でいいと思いますが、
「Adjusting your PATH environment」では「Use Git from the Windows～」を選びましょう。
これを選択することによって、Windowsのコマンドプロンプトからgitコマンドを実行できるようになります。

後はデフォルトでいいと思います。

３．windows-build-toolsのインストール

ここが一番重要（だと思っている）。
コマンドプロンプトを立ち上げ、以下を実行しましょう。
頭痛の種のC++コンパイラやPythonの設定をしてくれます！！！
…ほぼ下の記事の受け売りですが。。。
グローバルでインストールします。
（npmインストールのグローバル／ローカルはここでは省きます）

npm install --global windows-build-tools

Windows-Build-Tools
https://github.com/felixrieseberg/windows-build-tools

Windowsでnpm installしてnode-gypでつまずいた時対処方法
http://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7

Pythonは2.xじゃないとだめなんですねー。（3.xは入っていた）

４．Babel CLIのインストールと設定

ここまで来ればもう一息、Babel CLIのインストールとES5への変換設定をしましょう。
Babel CLIはbabelコマンドを実行できるようにするものです。
Babelはローカルでインストールします、コマンドプロンプトで以下を実行。

# Babel CLIのインストール
npm install --save-dev babel-cli


# ES5への変換に必要なプリセットのインストール
npm install --save-dev babel-preset-es2015

[babel-cli] babelのコマンドライン実行( es6 to es5)
http://qiita.com/a_ishidaaa/items/a0899d42ddc0545190a1

おそらく３．までの手順を踏んでいればインストール出来る（はず）。
私はここに来るのに数日かかりました。。。

５．確認

現在の作業ディレクトリにES6でJavaScriptを書きましょう！
確認に使ったものはこんな感じです。

sample.js

class Sample{
    constructor(str, num){
        this.str = str;
        this.num = num;
    }

    disp(val){
        alert(this.str);
        alert(this.num+val);
    }
}

let sample = new Sample('hello', 10);
sample.disp(100);

ファイル作成後、再びコマンドプロンプトへ。
以下のコマンドを実行してください。

babel sample.js

すると以下のコードが画面に現れるかと思います。

'use strict';

--------------------------------------------
自動生成の読みづらいコードなので略
--------------------------------------------

var Sample = function () {
    function Sample(str, num) {
        _classCallCheck(this, Sample);

        this.str = str;
        this.num = num;
    }

    _createClass(Sample, [{
        key: 'disp',
        value: function disp(val) {
            alert(this.str);
            alert(this.num + val);
        }
    }]);

    return Sample;
}();

var sample = new Sample('hello', 10);
sample.disp(100);

無事ES6→ES5変換が出来るようになりました！

所感

Windowsでもnpmを使った開発が少しやりやすくなったかな？と感じられました。
最後までお読み頂きありがとうございました。