C#開発者のための最新JavaScript事情（Babel編）：特集：C#×JavaScript（2/2 ページ）

» 2015年12月11日 05時00分公開

WebアプリをES2015で書いてみる

　最後に、Webアプリの開発にES2015を使い、これをBabelでコンパイルして、JS5コードにトランスパイルする例を見てみよう。本来はGulpやGruntなどのビルド関連ツールを利用するところまで見たいところだが、ここでは簡便にVisual Studio Code（以下、VS Code）のタスク機能を使うことにする。

　サンプルは「.NET開発者のためのJavaScriptライブラリカタログ（MVCフレームワーク編）」で作成したAngularJSアプリをSuperstaticという簡易的なWebサーバーを使い、ローカルホスト上で動作させている（しょうもないコードなので、詳細は割愛する）。

　Babelとは無関係な準備がいろいろとあるが、そこは駆け足で見ていこう。

プロジェクトの構成

　以下にプロジェクト全体の構成を示す。

プロジェクト全体の構成

　distディレクトリにはBabelで変換したJS5コードが格納される。jsディレクトリにはES2015で書かれたソースを格納する。app.jsファイルではAngularJSのコントローラーを定義して、index.htmlファイルから変換後のdist/js/app.jsファイルを読み込む形だ。

jsconfig.jsonファイル

　VS CodeでES2015をサポートするにはjsconfig.jsonファイルを作成して、以下の記述を行う必要がある。

{
"compilerOptions": {
"target": "ES6"
}
}

jsconfig.jsonファイルでのtarget指定

　これにより、エラーを示す赤い下線が大量に表示されるのが抑制され、IntelliSenseによるサポートを受けられるようになる。

ファイル名

　ES2015のコードを記述したファイルには「.es6」のような拡張子を付けたくなるが（ES2015はES6と呼ばれることもあるため）、筆者が試したところ、VS Codeではこの拡張子を付けて、ES2015なコードを記述するとJSコードとは認識されるが、「これはES6でないとダメなんで、jsconfig.jsonファイルの内容を確認してね」（意訳）といわれてしまう。そのため、ここではアプリのファイル名は「app.js」としている。

Superstatic

　Superstaticは静的ファイルをホストする簡易的なWebサーバーで、npmから以下のようにしてインストールできる（ここではグローバルにインストールしている）。

> npm install -g superstatic

Superstaticのインストール

package.jsonファイル

　package.jsonファイルでも、Babelのプリセット指定が可能だ（他の構成要素があれば、それらも記述できるはずだ）。

{
"name": "babeltest",
…… 省略 ……
"scripts": {
"start": "superstatic --port 3000"
},
"babel": {
"presets": "es2015"
}
}

Babelのプリセット指定

　その上のscripts属性では「npm start」コマンドを実行すると、Superstaticを使って、このアプリをホストするように指定している（ローカルホストのポート3000）。

　準備はここまでだ。後はapp.jsファイルをES2015で書き直して、これをBabelでトランスパイルできるようにする。

コントローラークラスを作成する

　このAngularJSアプリのコントローラーはもともとJS5で以下のように記述していた。

var app = angular.module('myapp', []);

app.controller('FooController', function() {
this.test = "foobar";
});

JS5でのコントローラーの実装

　コントローラーの本体である、無名関数部分をクラスとして定義し、これをapp.controllerメソッドに渡すようにすると以下のようになる。

/* global angular */
var app = angular.module('myapp', []);

class FooController
{
constructor() {
this.test = "foobar";
}
}

app.controller('FooController', FooController);

コントローラーをクラスとして作成

　クラスを作成して（その実体は関数だ）、それをapp.controllerメソッドに渡すようにしているだけだ。なお、先頭のコメント行は、VS Codeが識別子「angular」が解決できないので、これはグローバルなオブジェクトだと教えるものである（Angularモジュールのコードはindex.htmlファイルで読み込んでいるため）。

タスクの構成

　最後にVS Codeのタスクを構成して、コマンドパレットからES2015コードをコンパイルできるようにする。これには次のようなtasks.jsonファイルを記述する。

{
"version": "0.1.0",
"command": "babel",
"isShellCommand": true,
"showOutput": "always",
"echoCommand": true,
"args": ["js/*.js", "--out-dir", "dist"],
"problemMatcher": "$tsc"
}

タスクの構成

　エラーメッセージの解釈などで使われるプロブレムマッチャー（problemMatcher）はJS用のものがなかったので、デフォルトの「$tsc」のままとなっていることに注意されたい。

　ここで重要なのはargs属性で、上の構成ではjsディレクトリの下にある全ての「.js」ファイルをトランスパイルして、その結果を「--out-dir」オプションを指定してdistディレクトリに生成するように指定している。ただし、この指定ではdistディレクトリの下にjsディレクトリが作成されてしまうので、index.htmlファイルでは「dist/js/app.js」ファイルを読み込むように指定をしている。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
…… 省略 ……
<script src="node_modules/angular/angular.min.js"></script>
<script src="dist/js/app.js"></script>
</head>
<body>
…… 省略 ……
</body>
</html>