TypeScript入門―大規模開発に適したJavaScript互換言語

この記事を読むのに必要な時間:およそ 8.5 分

静的型付け言語であるメリット

TypeScriptが静的型付け言語であり,それが大きな特徴であることは繰り返し書いてきました。しかし,静的型付け言語に馴染みのない方も多いと思いますので,どのようなメリットがあるのかを具体的に少し掘り下げて解説します。

コンパイル時のエラー

先ほど述べたとおり,関数が文字列を期待しているのに数値を渡している場合や,対象のクラスには存在しないメソッドを呼び出している場合など,コードに明らかなエラーがある場合はコンパイル時にエラーが発生します図1)⁠つまり,名前の間違えや想定外の操作を実行前に修正できます。

図1 TypeScriptのコンパイルを実行した際にエラーが出た例

図1 TypeScriptのコンパイルを実行した際にエラーが出た例

これはリファクタリングなどを行う場合にもメリットになります。たとえば特定のクラスのメソッド名を変更した場合,利用している個所の修正漏れがあればコンパイル時にエラーが発生するので,漏れを見逃しにくくなります。コードの規模が大きくなればなるほど,その恩恵を受けられるでしょう。

Visual StudioやWebStormなどのIDEとの相性の良さ

Visual StudioやWebStormといったいわゆるIDEIntegrated Development Environmentのエディタを利用すれば,コーディング時にサポートを手厚く受けられるというのもTypeScriptの大きなメリットの1つです。特に開発元が同じMicrosoftということもあり,Visual Studioのサポートはとても手厚いです。

IDEのサポートで代表的なものと言えばコード補完ではないでしょうか。Visual StudioやWebStormでも,コード補完機能でメソッド名やプロパティ名が補完されます。これによりタイピングやリファレンスを探す手間が省けます図2)⁠

図2 エディタ上でのコード補完の例

図2 エディタ上でのコード補完の例

またコードのエラーをエディタ上に表示する機能もあります。常にコードの状態を確認できるので,コンパイル前にミスに気づくことができます図3)⁠

図3 WebStormで文法エラーのチェックが働いている様子

図3 WebStormで文法エラーのチェックが働いている様子

IDEらしい強力な機能としては,リファクタリングサポートもあります。たとえばメソッド名を変更するとき,1ヵ所名前を変更すればそのメソッドを参照している名前をすべて書き換えてくれる機能があります図4)⁠

図4 Visual Studioでメソッド名のリネームを実行している様子

図4 Visual Studioでメソッド名のリネームを実行している様子

このような機能は静的な型付けをしているおかげで正確に動作できているのです。Visual StudioやWebStormにはJavaScriptのコード補完のサポートもありますが,それらはIDEが推測した結果やコードを疑似実行した結果を用いているため,見落としも多くあります。静的型付け言語ではモジュールとメソッドの関係などをエディタが正確に把握できるので,サポートも正確です。

ハイライトやリネームの機能はPlaygroundでも実際に体験できますので,ぜひ試してみてください。

TypeScriptのインストールとコンパイル

Playgroundでコードを書くのは即座に試せてよいのですが,実際に開発でTypeScriptを使う場合はファイルにコードを書いてコンパイルするという流れになります。ここでは,コンパイルのためのツールのインストール方法とコードのコンパイル方法を簡単に紹介します。

インストールする

Windowsをお使いの方はVisual Studioを利用するのが簡単でしょう。Visual Studio 2013のバージョンUpdate 2以降にはTypeScriptの開発ツール(エディタとコンパイラ)が含まれるので,インストールすればすぐにコードを書けます。Visual Studio 2013は有償と思われがちですが,無償で利用できるVisualStudio Express 2013 for Webもありますのでこちらの利用をお勧めします図5)⁠

図5 Visual Studioではコード補完やシンタックスハイライトなどが利用可能

図5 Visual Studioではコード補完やシンタックスハイライトなどが利用可能

またOS XやLinux,WindowsでVisual Studio以外のエディタを利用している方は,Node.jsのパッケージとしてTypeScriptのコンパイラをインストールできます。管理者権限を持ったコンソールで,またはsudoを付けて次のコマンドを実行してください。

% npm install -g typescript

このコマンドを実行してインストールが完了すると,TypeScriptコンパイラであるtscコマンドを実行できるようになります。

コードを書いてコンパイルする

Visual Studioでは,プロジェクトを新規作成するときにTypeScriptのテンプレートを選択するとTypeScript用のプロジェクトが作成され,TypeScriptのファイルの編集が可能になります。そしてTypeScriptのファイルを編集すると,自動的にコンパイルが行われてJavaScriptファイルが生成されます。

Node.jsのパッケージとしてtscコマンドをインストールした場合は,お好みのテキストエディタでTypeScriptのファイル(拡張子は.tsを作成し,そのファイル名をtscコマンドの引数として渡せばコンパイルされます。

% tsc script.ts

tscコマンドを実行すると,引数に指定した.tsファイルと同名の.jsファイルが生成されます。しかし,開発中に何度も書き換える場合,編集するたびにtscコマンドを実行するのは面倒です。そのため,tscコマンドには変更を監視して自動でコンパイルする--watchオプションが用意されています。

% tsc --watch script.ts

--watchオプションを指定してtscコマンドを実行すると終了せずにそのまま待機状態になり,ファイルを編集すると自動的にコンパイルされます。

著者プロフィール

沢渡真雪(さわたりまゆき)

普段はASP.NETやPerlでWebアプリケーションを書くのが主。興味の向きはWindows一般から.NET Framework,Perl(Plaggerとか)やMac OS Xなど。

URLhttp://www.misuzilla.org/