2013.11.01

GruntでTypeScriptの自動コンパイル

altJS（TypeScript、CoffeeScript、Haxeなど）の導入を以前から検討していましたが、CoffeeScriptのような最適化してコンパイルされたコードがリーダブルではないと感じ（最適化自体は素晴らしいのですが）導入に至っていませんでした。
CoffeeScriptであれば通常はコンパイル前の.coffeeファイルを編集するでしょうし、問題にはなりませんが万が一の時に直接.jsファイルを編集しやすい状態が運用上は良いと考えました。

そんな中、PlaygroundにてTypeScriptを試したところ、コンパイルされたJavaScriptが非常に読みやすく本格的な導入を検討しています。
そこで、普段利用しているGruntで自動コンパイル出来ないか調べたところ、k-maru / grunt-typescriptによって簡単に実現出来るようだったので紹介します。

TypeScriptとは

altJSと呼ばれるJavaScriptの不足機能を補う中間言語の一種です。
TypeScriptはMicrosoft社によって開発され、ECMAScript 6に期待される機能を先取りしたような言語ですが、JavaScriptとしてコンパイル可能であり互換性が保たれています。

TypeScriptを始めとするaltJSの多くはJavaScriptの抱える問題（他言語のクラスのような機能など）を解決しており、JavaScriptの開発が簡潔かつ効率的に行えるようになります。
また、TypeScriptはJavaScriptに非常に似た記述が可能なためJavaScriptを熟知していれば習得コストは比較的低いと言えます。

導入方法

nodejs及びGruntは導入されているものとして説明します。
未導入の方はWeb制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門にて詳しく説明されているので参考にしてください。

パッケージの導入

次のコマンドでTypeScriptのコンパイラーをプロジェクトディレクトリにインストールします。

npm install -g typescript

続いて、Gruntのプラグインをインストールします。

npm install grunt-typescript --save-dev

Gruntfile.coffeeを編集

TypeScript（.tsファイル）をJavaScript（.jsファイル）にコンパイル出来るようGruntfile.coffeeに追記します。
今回はwatchタスクでTypeScriptとSassを両方監視して自動コンパイルするように設定します。
尚、次のコードはGruntfile.coffee（CoffeeScript）のため、Gruntfile.jsの方はJs2coffeeで変換してください。
※該当部分のみの抜粋

module.exports = ( grunt ) ->
  grunt.initConfig
    # TypeScriptコンパイル 
    typescript:
      sourcemap:
        src: [ 'htdocs/common/ts/components.ts' ]
        dest: 'htdocs/common/js/components.js'
        options:
          sourcemap: true

    # Sassコンパイル 
    sass:
      dev:
        options:
          sourcemap: true
          style: 'nested'
        files:
          'htdocs/common/css/min.css': 'htdocs/common/sass/base.scss'
      public:
        options:
          banner: '<%= meta.banner %>'
          style: 'compressed'
        files:
          'htdocs/common/css/min.css': 'htdocs/common/sass/base.scss'

    # コンパイルタスク 
    grunt.registerTask 'compile', [
      'sass:dev'
      'typescript:sourcemap'
    ]

    # 監視設定 
    watch:
      compile:
        files: [ 'htdocs/common/sass/*.scss', 'htdocs/common/ts/*.ts' ]
        tasks: [ 'compile' ]

最後に

今回はTypeScriptの紹介になりましたが、GruntではCoffeeScript（gruntjs / grunt-contrib-coffee）もHaxe（Fintan / grunt-haxe）も自動化出来ます。
好みやプロジェクトによって最適なaltJSは異なりますので、altJSの導入を検討されている方は色々試されてみると良いのではないでしょうか。

参考

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。