TypeScriptとCreateJSで遊ぶ #TypeScript

この記事はTypeScript Advent Calendarの2日目の記事です。

初めまして。gyoh_kです。
この記事では、CreateJS を TypeScriptで書くとき、タスクランナーの Grunt 使うと良い、という話を書きます。
もしかすると、TypeScript に限らず altJS を書くときにGrunt、gulp などのタスクランナーを使うのは割と当たり前の事かもしれませんが、個人的には「まあ、IDEに頼ればいいか...」という感じで、恥ずかしながら組み合わせて使い始めたのが最近の事だったりします。

なぜ Grunt を使うのか

普段、僕が CreateJS を TypeScript で書いていて良さを実感するのは、主に以下の3点です。

エディタでの編集時に、コード補完や文法チェックがバリバリ利く
ActionScript3の文法に近くなるので、ActionScript のノウハウを生かしやすい
ある程度コード量が増えた時に、生のJSに比べて見通しが良い

一方、良い事ばかりではなく、生のJSを書くのに比べて明らかに初期の精神的な負担が大きくなる、というか要するに準備が面倒になります。
特に CreateJS はライブラリや型定義ファイルが複数に分かれて複雑なこともあり、定義ファイルをダウンロードして、tsファイルにリンクして、動作確認して... とやっていると、実際簡単なコードが動き始めるまでに 1時間くらい かかったりします。
趣味的に軽くコードを書きたい場合など、これは結構な問題なのですが、Grunt を使用してみてこういった面倒さがかなり解消できました。

デモ

それでは、実際にサンプルを動かしてみましょう。

上手く動作すれば、実行結果として以下のキャプチャのようなインタラクティブコンテンツで遊ぶことができます。
(こちらのデモは、CreateJS制作チームの sebastianderossi さんの git リポジトリから、Mona Lisa Distance を使用しました。)

特にトラブルがなければ、リポジトリをクローンしてから 10分程度で 、サンプルの動作確認をして、コードを書き始められるようになります。

必要なツール

以下のツールをお使いの PC にインストールしてください。
* Git
* Node.js
* Google Chrome
* Grunt

Gitのインストール方法については、こちらの記事などを参考にしてください。
なお、Windowsの場合はgit本体(mysisgit) とGit操作用のクライアントツール(TortoiseGit、SourceTree 等)を個別にインストールする必要があります。
mysisgit のインストーラ内で、コマンドプロンプトから使用できるようにするかどうかを尋ねられるので、「使用する」を選択してください。
詳しくは、こちらの記事の、「環境変数PATHの設定」の部分を参照してください。

Node.js は公式サイトからインストーラをダウンロードして実行するだけで大丈夫です。インストールが完了すると、ターミナル (Windows の場合コマンドプロンプト) から npm コマンドが使用できるようになります。
http://nodejs.org/

Google Chrome は、以下のサイトからダウンロードおよびインストールしてください。
https://www.google.co.jp/chrome/

Grunt は、Node.js をインストール後に、ターミナルから以下のコマンドを実行してください。インストールが完了すると、grunt コマンドが使用できるようになります。

npm install -g grunt-cli

以上で、事前準備は完了です。

プロジェクトのセットアップ

Git で、以下のリポジトリを clone してください。
https://github.com/gyohk/createjs-typescript-template.git

完了したら、ターミナルから以下のコマンドを実行してリポジトリのディレクトリに移動します。

cd createjs-typescript-template

そして、以下の二つのコマンドを実行します。

npm install
grunt setup

1～2分ほどかかるかもしれませんが、必要なnpmモジュールや CreateJS のライブラリ本体、 TypeScript の型定義ファイルなどが自動的に準備されます。
Windows の場合、コンパイルの必要なモジュールをインストールしようとすると、しばしば npm install が失敗しますが、その場合はC++用のVisualStudio 2012以上をインストールした上で --msvs_version=2012 のオプションを付ければ大抵は上手くいくようです。

npm install --msvs_version=2012

デモのコンパイルと実行

それでは、TypeScript のソースコードをコンパイルしてみます。
ターミナルから、以下のコマンドを実行します。

grunt

src ディレクトリ内の Main.ts ファイルがコンパイルされ、合わせて TSLint が実行されます。実行が完了すると、dest ディレクトリにコンパイル済みデータが作成されます。

dest/index.html をそのままブラウザで開いてもよいのですが、外部データの読み込みなどが正しく動作しないため、node.js 組み込みのWebサーバで確認しましょう。
ブラウザでの確認のため、以下のコマンドを実行します。

grunt connect

Chrome が起動して、モナリザのデモが表示されたと思います。

ソースコードの修正

実際に自分で TypeScript のコードを書く場合は、src ディレクトリ内の *.ts ファイルを修正した後で、再度上記の grunt、grunt connect コマンドを実行します。
もし、TSLint のチェックがうるさく感じる場合は、こちらのページを参考にconf/tslint.json の内容を修正してください。
TypeScript のソースコードではなく HTML や CSS の内容を修正したい場合は、 skeleton ディレクトリ内のファイルを修正した後、以下のコマンドを実行すると、 dest ディレクトリ内に修正内容が反映されます。

grunt copy

ターミナルから操作するのが面倒な場合

IntelliJ IDEA 系のIDEを使用している場合、Grunt コンソールが付属しており、IDE上に表示されたGruntタスクの一覧から選択するだけで実行が可能です。
VisualStudio、Eclipse、SublimeText や Brackets 等にもそれぞれGruntを扱うプラグインが存在していたり、外部ツールとして登録できたりします。
おおよそ何のエディタを使っていても問題なく、黒い画面をあまり触らずに使用できると思います。

まとめ

今回は特に解説しないのですが、実際にCreateJS を使用する場合は高い頻度で必要になると思われる、createjs-def のタスクなども用意してあります。詳しくはプロジェクト内の Gruntfile.js を参照してください。

実際の所、CreateJS を TypeScript で書いているユーザ数がどれ程なのかはよくわかっていないのですが、一例として楽しくコード書く参考になれば幸いです。