Babel(6to5)をWindows10で使う

2015年10月29日

カテゴリー:

Babelオフィシャルサイト

最近のWEB制作の現場では開発用マシンにWindowsって使われてないんでしょうかね? Googleで技術系の情報を調べてたりすると、最近は相対的にWindowsの情報が減ってきているような気がします。

私はフリーランスになるまでにWEBコンテンツ制作会社に2社務めていましたが、どちらも開発用マシンはWindowsでした。 その影響でいまだに開発用としてはバリバリWindowsのデスクトップマシンを使っています。一応Mac Bookもありますが、動作確認とか打合せに持っていく程度です。

前置きが長くなりましたが、今回のテーマ「Babel」とはES2015(ES6)で書かれたJavaScriptコードをES5に変換してくれる「トランスパイラ」と呼ばれるツールの1つです。(詳しくは「ES2015(ES6):次世代JavaScriptはもう実践投入出来るか?」をご参照ください。)

私もボチボチES2015を使っていきたいので、まずは自前のWindowsマシンでBabelが使えるようにするところから始めました。とはいえBabelのオフィシャルサイトに行ってもWindows用のインストーラなどありません。まずはNode.jsをインストールする必要があります。

Babelのセットアップには様々な方法が用意されていますが、本稿ではNode.jsを使ったセットアップについて紹介します。セットアップの詳細についてはhttps://babeljs.io/docs/setup/を参照してください。

先に結論を書いてしまうと、Babel自体はOSの違いを意識するようなことはありません。Babelをインストールする前段階(Node.jsのインストール等)において違いがある程度です。

今回はNode.js+Babelのセットアップを行い、Babelでごく基本的なコード変換をする方法を紹介します。

Node.jsのインストール

Babelをセットアップするめには予めNode.jsとnpm(Node.jsのモジュール管理ツール)がインストールされている必要があります(npmはNode.jsをインストールすると一緒にインストールされます)。

WindowsにNode.jsをインストールする場合、Node.js公式サイトからダウンロードできるインストーラを使うのが一番手っ取り早いのですが、Node.js自体が頻繁にアップデートされるため、常に最新の状態を保つためには以下で紹介されているようなバージョン管理ツールを使用したインストールが良さそうです。

nodejs – Windowsでnode.jsをバージョン管理する – Qiita

Babelのインストール

Node.jsのインストールが完了したら早速Babelのセットアップをしてみます。
といっても非常に簡単。コマンドプロンプトから以下コマンドを実行するだけでインストール出来てしまいます。

> npm install -g babel

正常にインストール出来たかどうかを確認するために、Babelのヘルプを表示させてみます。

> babel -h

上記コマンドでヘルプが表示されればBabelが使える状態になっているはずです。

基本的なコマンド

Babelのセットアップが完了したら早速ES2015(ES6)のコードをES5に変換してみましょう。
まずは事前に変換対象となるES2015で書かれたごく簡単なJavaScriptファイルを作成しておきます。

var fn = () => {
    console.log('hoge');
};

上記のファイルを、例えば「C:\inetpub\wwwroot\es2015\input.js」に保存し、次のコマンドを実行します。

> cd C:\inetpub\wwwroot\es2015
> babel input.js

すると、続けて変換後のコードがそのままコマンドプロンプトに表示されます。

> cd C:\inetpub\wwwroot\es2015
> babel input.js
'use strict';

var fn = function fn() {
    console.log('hoge');
};

とりあえずこれだけでES2015からES5への変換は出来るわけですが、これだけだと変換後のコードがコマンドプロンプトに表示されるだけ(ファイルは作成されない)なので、ちょっと使いづらいですね。
そこで、実際に作業する上でよく使う基本的なコマンド例をいくつか紹介しておきます。

変換後のコードをファイルに保存

変換後のファイル名が既に存在するファイルだった場合は上書き保存されます。

> babel 変換前のファイル名 -o 変換後のファイル名

フォルダ内のファイルを一括変換

下記例では、変換後のコードがファイル名はそのままで、変換後フォルダ内に作成されます。

> babel 変換前のフォルダ名 -d 変換後のフォルダ名

ファイルの監視

下記例に限らず「-w」オプションを付けることで、変換対象のファイルが更新されたタイミングで再変換が実行されるようになります。監視を停止する場合は「Ctrl + c」で停止することができます。

> babel 変換前ファイル名 -o 変換後のファイル名 -w

やり方は色々あると思いますが、今回の様にコマンドプロンプトからBabelを使ってサイトを構築していくような場合は、基本的には「-w」オプションを使い、コマンドプロンプトを立ち上げたままでJSファイルの編集を行っていく、といった作業スタイルになるのではないかと思います。

Babelの手ほどき – Babelとは | CodeGrid
Babelオフィシャルサイト
Babel | The compiler for writing next generation JavaScript
※ブラウザ上でJavaScriptトランスパイル出来るサイト(Babelオフィシャルサイト)