Experts.jp日本に、もっとエキスパートを。(2)前回はなぜTypeScriptか?という話を書きました。今回はTypeScriptを使うとして、どういう環境を作れば気持ちよく開発できるかについて解説します。本稿に出てくるサンプルをまとめたリポジトリを随時メンテしております。時期によっては、本記事の内容に沿わない(より磨かれた)状態になっているかもしれません。TypeScriptの開発環境が指すものは2つあります。IDEやエディタといった、本当に開発を行うための環境と、初期設定を行ったりリリースビルドを作ったりするためのタスクランナーの二種類です。Code+grunt+dtsmを用いていきます。別構成として、Atomとgulp、tsdについても言及します。X、Windows、Linuxといった主要なプラットフォームで同じように動かすことができます。TypeScriptのインストールNode.js+npmはすでに導入してある前提で進めます。typescriptを行ってください。1.6.2がインストールされます。1.5.3から登場した要素です。TypeScriptコードをコンパイルする際に、コンパイルオプションとコンパイル対象のtsコードの指定をひとまとめにした設定ファイルです。今までTypeScriptのコードをJavaScriptにコンパイルするには、tscコマンドにコンパイルオプションや.tsファイルのパスを与えてコンパイルしていました。この方法の問題点は、どういうオプションを渡せばプロジェクトを正しくコンパイルすることができるかわからないということです。ファイル同士の依存関係の記述方法も問題でした。commentと呼ばれる、TypeScriptコード同士の依存関係をコード中に書く方式が一番最初にありました。これだと依存関係をいちいち記述するのが大変面倒くさく、コンパイル時のエントリーポイントとなるコードを間違えると生成されるコードが変わり、その影響で依存順次第で実行時エラーになる...というパターンもありました。後述するgruntやgulpなどのタスクランナーを使えば、プロジェクトメンバーやコントリビュータとの手法の共有はできるようになります。依存関係についても毎回同じ方法でコンパイルするようになるため、コンパイル開始のエントリポイントとなる1つのファイルからtree状に依存関係を記述していく方法で楽をすることができるようになりました。IDEやエディタからはGruntfile.jsやgulpfile.jsの設定値は活用することができないため、入力補完やエラー報告の正確さに不満がありました。これら、コンパイル方法の指定・TypeScriptコード同士の依存関係を解決できるのが、ここで紹介するtsconfig.jsonです。tsconfig.jsonはTypeScriptコンパイラ、人間、エディタの3者が理解することができる、便利なコンパイル方法の記述手段なのです。Microsoft先生は最近OSSに対する貢献をどんどん強化してきていますが、まだNode.js+npmやエディタ周りの文化に対する理解が薄いです。そのためtsconfig.jsonについて、めちゃめちゃ使いにくい仕様が生まれています。1.5.3ではfilesプロパティにコンパイル対象とするファイルの一覧を1つ1つ書かねばならず、大変面倒くさいです。1.6.0-betaではexcludeプロパティに除外するファイルやフォルダを指定できますが、filesプロパティとの併用はできませんし一部除外解除の設定もできません。basarat氏がatom-typescriptで実装している、filesGlobsプロパティのように、ワイルドカードや除外ルールの組み合わせで順番や対象をコントロールできる方式のほうが優れていると思うのですけどね。いえ、tsconfig.jsonを使いこなすと便利です。今後はtsconfig.jsonがあるとTypeScriptでコードを書くにあたりいろいろな恩恵が得られると思いますので、本連載ではtsconfig.jsonを中心とした環境づくりを紹介していきます。実際にtsconfig.jsonを使ってみましょう。tsconfig.jsonは特別な理由がない限り、プロジェクトルートに1つ置いて使います。--initを実行するとリスト1が得られます。["node_modules"]}特にこだわりがなければ、このまま使いはじめてもよいでしょう。excludeプロパティだけでの運用は細やかなコントロールができないため難しいでしょう。本連載では、リスト2の構成を使います。filesGlobプロパティはtscコマンドやVSCがサポートしているプロパティではありません。atom-typescriptやgrunt-tsconfig-update、gulp-tsconfig-updateによるfilesプロパティへの展開などのフローを組み合わせていくことでフォローしていきます。リスト2の設定であれば、libディレクトリ配下に置いたコード、testディレクトリ配下に置いたコード、typings配下に置いた型定義ファイルがコンパイル時に自動的に処理されるようになるでしょう。./とすることでコンパイルを行うことができます。tsconfig.jsonを指定するのではなく、tsconfig.jsonがあるディレクトリを指定するのがポイントです。設定可能な項目については公式wikiのtsconfig.jsonとコンパイラオプションの項目を参照してください。型定義ファイルマネージャTypeScriptでコードを書くにあたり、もっともつらく、面倒なことを示しておきます。TypeScriptはJavaScriptのsupersetであるので、既存のjQueryやAngularJSなどのJavaScript製ライブラリも利用することができます。JavaScriptで書かれているということは、ソースコードの字面上からなんというプロパティがあって、なんという関数があって、変数の型が何か、なんて全然わからないわけです。そのため、既存ライブラリをTypeScriptで使おうと思ったら、人間が型の情報を手書きしてライブラリの全体像をTypeScriptコンパイラに教えてやらねばならないのです。型情報を記述したファイルを型定義ファイルと呼んでいます。有名どころのライブラリであれば、DefinitelyTypedというリポジトリで型定義ファイルを見つけることができます。jQueryやAngularJS、Node.jsの型定義ファイルなどはすでに成熟したものが存在しています。これら有名どころのライブラリはただ単にダウンロードしてきて使えばよいですが、マイナーなライブラリや非公開の社内ライブラリの場合は、自分で型定義ファイルを書き起こさなければなりません。any;という型定義を書いておけば、コンパイルを通すことはできます。充実した型定義は開発を加速しますが、最初のうちはざっくりした定義を与えておき、後から必要に応じて徐々に拡充していけば十分です。その過程でバグもより多く見つかるようになっていくことでしょう。これら、型定義ファイルを上手に管理するためのツールも記事内で紹介します。dtsm手前味噌ですが、筆者(わかめ)が製作している型定義ファイルマネージャです。詳しい紹介は(ちょっと古いですが)Qiitaの記事を参照していただければと思います。TypeScript界でデファクトのtsdに対する優位点として、型定義ファイルを集めたリポジトリをまるごとcloneしてくるため、一度cloneした後は高速に動作し、オフラインでの検索やインストールが可能です。npmやbowerといった広く使われているパッケージマネージャと使い方をなるべく似せてあるため、学習コストが低くすみます。dtsmでインストールできます。angular-ui-routerで型定義ファイルを取得します。取得した型定義ファイルはtypingsディレクトリに格納されます。angular-ui-routerでdtsm.jsonに設定を書き込みます。--saveで行うことができます。企業内に閉じたgitリポジトリ上で管理されている型定義ファイルなども参照させることができます。tsdTypeScript界でデファクトで使われている型定義ファイルマネージャです。Limitがかかってしまい、Tokenの取得や設定が必要になったりする場合があります。tsdでインストールできます。angular-ui-routerで型定義ファイルを取得します。取得した型定義ファイルはtypingsディレクトリに格納されます。--saveでtsd.jsonに設定を書き込みます。--saveで行うことができます。ビルドタスクとタスクランナーTypeScriptプロジェクトを運用するために必要なタスクの紹介と、gruntとgulpの2つのタスクランナーについて取り上げていきます。requestなどいただけたらと思います。最低限必要なタスクはたった2つだけです。1つ目は、tsconfig.jsonのfilesプロパティを更新するためのgrunt-tsconfig-updateとgulp-tsconfig-updateです。grunt版は僕が、gulp版はlacoくんが作ってくれました。./相当の操作をしてくれるgrunt-ts(5.0.0-beta.4以上)か、gulp-shellです。tscコンパイラに指定する内容自体がtsconfig.jsonによって大幅に簡略化されたため、grunt-tsもgrunt-shellに置き換えてしまってよいかもしれません。これに、いくつかのタスクをオプションで追加してもよいでしょう。候補を挙げておきます。よくないスタイルのTypeScriptコードを検出し教えてくれるtslintと、それを各タスクランナー用に切り出したgrunt-tslintとgulp-tslint。TypeScriptコードにフォーマッタを適用しきれいにしてくれるtypescript-formatterと、それを各タスクランナー用に切り出したgrunt-typescript-formatterとgulp-tsfmt。TypeScriptコードからドキュメントを生成してくれるtypedocと、それを各タスクランナー用に切り出したgrunt-typedocとgulp-typedoc。tsdとgrunt-dtsm、grunt-tsd、gulp-tsd。大部分がgrunt-shellやgulp-shellからの呼び出しでもよいような気がしますね...。エディタ最後にエディタです。Code、Atom以外にも多様な選択肢があるため、自分が馴染んでいるエディタやIDEにもTypeScript用プラグインが存在しないか試してみるとよいでしょう。多様な選択肢がある理由ですが、TypeScriptは単なるコンパイラ以外のさまざまな機能を持っています。ソースコードをフォーマットする機能だとか、入力補完候補を生成する機能です。Studioと比べ、遜色ない強力な補完機能を備えたエディタが多く存在しているわけです。いえ、エディタやプラグイン毎にTypeScript本体への追従度や完成度に差があるため、「イマイチ使いにくいな...」と思ったら別のエディタを試してみるのがよいでしょう。CodeとAtomについて解説します。CodeVSCはMicrosoftが作ってはいますが、Electron上に構築されたマルチプラットフォームのエディタです。Studioと違い、プラットフォームの縛りはありませんし、無料です。オープンソースではないため、自力で機能追加やバグ修正ができないのは難点ではあります。grunt-tsconfig-updateかgulp-tsconfig-updateとの併用が前提になりますが、正しいtsconfig.jsonさえ作ってしまえばさすが本家Microsoft製だけあって、期待どおりに正しく入力補完やエラーの報告を行ってくれるようになります。強い要望がなく、gruntまたはgulpの利用に抵抗がないのであればVSCを最初に試してみるのがよいでしょう。atom-typescriptAtomはGitHubが作っているエディタです。atom-typescriptプラグインを併用することで大変便利なTypeScript開発環境として利用することができます。まとめ(開発環境編)タスクランナーの設定とエディタの設定が終わり、JavaScriptとは比較にならぬリッチな開発環境を手に入れられたことでしょう。何か疑問や要望がある場合、サンプルリポジトリのIssueまでお寄せいただければ、筆者の人生がつらくなっていなくてTypeScriptに飽きていない限り、対応できると思います。今のところTypeScriptは3年近く飽きていないので、もうしばらくは飽きないと思うんですよね。2015なコードをTypeScriptで書き始めていきます。