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

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

AltJSとTypeScriptとは

昨今,高度なWebアプリケーションやNode.jsによるサーバサイドアプリケーションなど,JavaScriptによるアプリケーションの開発が多く見られるようになってきました。それに伴い,アプリケーション開発の効率化のためのAltJSと呼ばれる言語(コンパイルするとJavaScriptを書き出す非JavaScript言語)たちが注目され,開発が盛んに行われています。TypeScriptはAltJSの1つです。

TypeScript以外にもさまざまなAltJSがあります。たとえばLLLightweight Languageを意識した書きやすいJavaScriptとしてのCoffeeScript注1)⁠国産で速度最適化を重視しているJSXJavaScript以外の言語への変換ができるHaxeなどです。TypeScriptは,よりよいJavaScriptというだけでなく大規模開発に向いているという特徴を持ち,それなりに複雑なプロジェクトで利用するケースなどで支持を集めています。静的な型付けがあること,素のJavaScriptやC#,Javaなどに似た構文なども特徴です。

TypeScriptの開発はC#やTurbo Pascalの開発者として有名なAnders Hejlsberg氏が中心となってMicrosoftで開発されました。

開発の中心はMicrosoftですが,コンパイラはNode.js上で動作するオープンソース(Apache License 2.0)として公開されています。フィードバックも受け入れる開かれたコミュニティになっていることも支持を集めているポイントでしょうか。

注1)
発売中のWEB+DB PRESS Plusシリーズフロントエンド開発徹底攻略の特集3で詳しく解説しています。参考にしてください。

TypeScriptを今すぐに試してみる

TypeScriptのインストールについてはのちほど解説しますが,そもそもインストールするのは面倒だ,雰囲気だけ味わってみたいという方も多いと思います。そのような方のために,TypeScriptの公式サイトにはTypeScriptを書けば即座にJavaScriptに変換/実行できるPlaygroundと呼ばれるページが用意されています。このあとのコードサンプルもPlaygroundで変換の確認ができるので,ぜひ動かしてみてください。

TypeScriptの特徴とメリット

TypeScriptが実際にどのような言語なのか,なぜ大規模な開発に向いているのか,その特徴やメリットを見ていきましょう。

TypeScriptのおもな特徴は次のとおりです。

  • 静的型付け言語であり,あいまいさを回避しやすい
  • ECMAScriptのスーパーセットで,かつECMA Script 6の機能を先取りしている
  • 変換しても平易なECMAScriptが出力される
  • 既存ライブラリとの相互運用のために外部に型定義ファイルを持てる

TypeScriptの文法

TypeScriptの文法は基本的にJavaScriptの言語部分(ブラウザのDOMなどの仕様を含まない)であるECMAScriptのスーパーセットになっています。つまり,JavaScriptのコードはそのままTypeScriptのコードになります。TypeScriptのコード例を次に示します。

function sayHello(message) {
    alert(message);
}
sayHello("Konnichiwa!");

このTypeScript のコードを変換すると次のJavaScriptのコードになります。

function sayHello(message) {
    alert(message);
}
sayHello("Konnichiwa!");

この2つのコードを比べるとわかりますが,変換の前後に違いはありません。このようにTypeScriptはECMAScriptをベースとしているため,比較的馴染みやすい文法となっています。裏を返せばJavaScriptという言語由来の部分も多くあるため,JavaScriptの知識をある程度必要とします。TypeScriptの文法の一部は現在策定中のECMAScript 6の機能を先取りして実装していますが,それらはECMAScript 5(または4)相当の文法に変換されます。

先ほどの変換例のとおり,TypeScriptのコンパイラは極力平易で人間が読みやすいECMAScriptを出力しようとします。

ではJavaScriptのコードをTypeScriptのコードにコピー&ペーストすればそのまま使えるかというと,そうとは限りません。先ほど特徴の1つとして挙げたように,TypeScriptは静的型付け言語なので,ライブラリやブラウザの機能を呼び出している部分のチェックで文法エラーになることがほとんどです。

TypeScriptは静的型付け言語

TypeScriptの特徴は,なんと言ってもその名にTypeとあるとおり,静的型付け言語であることです。WebでJavaScriptを書くことが主であった方々には,静的な型はあまり馴染みがないかもしれません。

静的型付け言語とは,あらかじめ変数などに型,つまり文字列であればstring数値であればnumberなどを宣言しておき,コンパイル時に型の整合性をチェックする言語です。実際にどうなるのか,先ほどのサンプルコードに型の宣言を追加した例を示します。

function sayHello(message : string) {
    alert(message);
}
sayHello("Konnichiwa!");

この例では,sayHello関数は引数として文字列しか受け取れないことを示すため,: stringという宣言を追加しています。たとえば最後のsayHello関数の呼び出しで引数に数値の1を指定してコンパイルすると「引数としてstring型を受け取るはずだけどnumber型が渡されていて,それを受け取るものはなかったよ」というエラーが発生します。変数の型も同様に宣言できて,意図しない値の格納を防げます。

var message: string; // string(文字列型)の変数を定義
message = 1;
// ↑ エラー: Cannot convert 'number' to 'string'.

このように実行前のチェックが可能になるのが静的型付け言語のメリットです。静的な型付けをするメリットはのちほどもう少し詳しく紹介します。なお,Playgroundなどで確認するとわかりますが,このコードの変換結果は型宣言をしなかった場合と同じになります。つまり,型情報はコンパイル時にのみ使われ,コンパイル後のコードには情報として残りません。

大規模開発をサポートする要素

TypeScriptには,大規模で複雑化するアプリケーションの開発を行いやすくする要素が含まれています。その1つは静的な型付けですが,その他にはクラス定義や名前空間といったモジュールの要素があります。C#やJava,Rubyなどの言語に触れたことがある方にとっては馴染み深いのではないでしょうかリスト1)⁠

リスト1 モジュールの例

module Sample {
    export class Greeter {
        message: string;
        constructor(message: string) {
            this.message = message;
        }
        sayHelloAfterSecond(): void {
            setTimeout(() => alert(this.message), 1000);
        }
    }
}
new Sample.Greeter('Konnichiwa!!').
sayHelloAfterSecond();

モジュールを利用すると,素のJavaScriptを書いていたときには開発者によってまちまちだったクラスの定義方法やモジュール分割が統一でき,開発者間での共有や読みやすさの向上が期待できます。プロジェクトの規模が拡大することがわかっている場合は大きなメリットになるでしょう。

著者プロフィール

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

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

URLhttp://www.misuzilla.org/

コメント

コメントの記入