プロ生ちゃんと学ぶ！ TypeScript入門（1）
TypeScriptってどんなもの？ プロ生ちゃんと始めてみよう！
TypeScriptが気になる人は、本連載で楽しく優しく学ぼう。TypeScriptの特徴から、Atomエディター開発環境の構築まで紹介。
プロ生ちゃん、TypeScriptに興味を持つ
きよくら（以下、き） あれ、慧ちゃん、何やっているの？
暮井 慧（以下、慧） 実は、TypeScriptに興味があって、やってみようかと思って。
き へー、急にどうしたの？
慧 前から気になってたんだけど、最近、「グーグルがAngularJS 2をマイクロソフトのTypeScriptで開発」とかニュースでもよく見かけるようになって、やってみたいなーって。きよくらさんは、TypeScriptに詳しいの！？
き んー、詳しい……というにはちょっと気が引けるけど、TypeScriptは出てきたときからウォッチしていたし、今は仕事で普通に使っているかな。
慧 じゃあ、私に教えて！
き 教える……っていうと、何だかおこがましいけど。せっかくだから、一緒にやってみよう！
きよくら ならみ
大都会岡山の片隅でエンタープライズ向けのWebアプリケーションに携わっているソフトウェアエンジニア。
・Microsoft MVP for ASP.NET/IIS
・Twitter: @kiyokura
・Blog: http://kiyokura.hateblo.jp/
暮井 慧
都内の公立高校に通う女子高生。部活は、情報処理研究会。プログラミング生放送のキャラクター「プロ生ちゃん」として活動中！
・Twitter: @pronama
・Website: http://pronama.jp/kei
TypeScriptってどんなもの？
き はじめに、TypeScriptについて、少し整理しておこうか。慧ちゃんはTypeScriptについて、どんなことを知っているのかな？
慧 そうだね、文法とかはよく知らないんだけど、こんな言語だ、っていうのは前に教えてもらったことがあるよ！
- JavaやC#に近い感覚のプログラミング言語
- コンパイルすると、JavaScriptのソースコードになる
- オープンソース
き お、さすがによく知っているね！ その認識でまずは問題ないと思うよ。TypeScriptは、より大規模で複雑なプログラミングや汎用的な用途を想定して、JavaScriptの弱点や使いにくい点を改善したプログラミング言語だ。
JavaScript互換
き そしてTypeScriptで書いたソースコードは、コンパイラーによってJavaScriptのコードに翻訳（＝コンパイル）される。つまり、現在JavaScriptコードが動作する環境は全て、TypeScriptで書いたコードも動作する環境と言い換えてもいい。
言語仕様の特徴的なところを挙げるなら、こんな感じかな？
- JavaScriptと互換性を持つスーパーセット
- 静的型付け
- クラスベースのオブジェクト指向
慧 JavaScriptとの互換性がよく分からないんだけど、JavaScriptと同じ書き方もできるの？
き そうだね。例えば、基本的な制御構文や文法はほとんどJavaScriptそのものだ。誤解を恐れずにいえば、「JavaScriptに便利な機能が追加された言語」というふうに、まずは捉えてもいいかもしれないね。例えば下のソースコードを見てみて。
|
function playOmikuji() {
return "大吉";
}
|
慧 JavaScriptで書いたナイスなおみくじだね。
き これは一見JavaScriptそのものだけど、TypeScriptのソースコードとして正常にコンパイル可能だ。jQueryなど既存の外部のライブラリもそのまま使えると思ってもらって問題ない*1。
- *1 型定義ファイルを利用することで、既存のJavaScriptのライブラリをTypeScriptから、そのまま利用可能となっている。
静的型付け
慧 JavaScriptを知っていたら、安心して始められるね！ でも逆に「TypeScriptならでは」という特徴も知りたいな！
き JavaScriptと比較したとき、最も特徴的な差は、「Type」という名前にもある通り、ズバリ「静的型付け」じゃないかな。例えば、次のJavaScriptのソースコードを見てみよう
|
1
2
3
4
|
function getBMI(weight, tall) {
return weight / (tall * tall);
}
var b = getBMI("a", "b"); // 結果はNaN
|
慧 BMIの計算だね！ 4行目（5行目 ※2015/5/29訂正）のaとbは数字じゃないから計算できないんだね。けど、JavaScriptだと実行してみないと分からないよね……。
き そうだね。もし数字以外の引数でgetBMI関数を呼ばれないようにしたかったら、例えば引数のチェック処理を入れるとかしないとダメだよね。でもリスト3のようにTypeScriptでこんなふうに書くと、コンパイルでエラーとなって、そもそも実行以前の問題になる。
|
1
2
3
4
|
function getBMI(weight: number, tall: number) {
return weight / (tall * tall);
}
var b = getBMI("a", "b"); // コンパイルエラーになる
|
き また、型情報があることで、動的型付け言語であるJavaScriptに比べて、エディターやIDE（統合開発環境）のサポートを受けやすいという特徴もあるよ。
慧 コード補完やエラー表示ができるってこと！？
き その通り。Visual StudioのようなIDEはもちろんだけど、例えば僕が最近使い始めたAtomというエディターでも、図1や図2みたいな感じでエラー表示やコード補完ができるんだ。
慧 お～。いいね！ TypeScriptに、もっと興味が出てきたよ！
き じゃあ、せっかくだから、ちょっと試してみようか。まずはTypeScriptを使う環境を整えてみよう。
TypeScriptの開発環境ってどんな感じ？
慧 TypeScriptでプログラミングするには、具体的に何を用意したらいいの？
き いくつか方法があるけど、慧ちゃんは普段、どんな環境を使っているの？
慧 いろいろかなー。でも今は、さっき見せてくれたAtomってエディターが気になってるよ。
き Atomには、TypeScriptをサポートするプラグインがあって、TypeScriptの力をたくさん引き出すことができるんだ。
慧 よし、Atomで決まり！ あ、でも参考までに他にどんな環境があるか、ちょっと聞いてみたいな。
Visual Studio
き まずは、マイクロソフトのVisual Studio。バージョンやエディションでサポート状況が異なるけど、現行の最新の正式版、Visual Studio 2013 Update 4では、Express for WebおよびCommunityといった無償版、Professional以上の有償版の両方で、TypeScript開発が標準サポートされている。コンパイラーだけでなくエディターやデバッガーなど、たくさんの機能が利用できる。ただし、動作するプラットフォームはWindowsだけだ。
コマンドラインツール
き 一方、一番シンプルなのは、単体のコンパイラーであるtsc。これはJavaScriptで書かれたコマンドラインツールで（※より正確には、このコンパイラー自身もTypeScriptで記述されて、JavaScriptにコンパイルされた形で提供されています）、Node.jsというサーバーサイドJavaScriptの実行環境上で動作する。Node.jsが動けば動作するから、MacやLinuxでも動作するよ。もちろんWindowsでも動作する。Node.jsのパッケージ管理システムnpmで提供されているから、導入も簡単だ。
慧 いわゆる「黒い画面」で動くってわけだね！
Webブラウザーで動く開発環境
き 面白いところでは、Webブラウザーで動作する環境もある。公式サイトにある「Play Ground」がそれで、ブラウザー上でTypeScriptを書くと、コンパイルされたJavaScriptコードがすぐに出力されて、そのまま実行することもできる。コード補完なども利用できて簡単にプログラミングできるよ。
慧 おー、たしかに面白い！
その他の環境
き さらに、TypeScriptではコンパイラー自身の他に、構文解析やコンパイルを行うための仕組みがJavaScriptのライブラリとして提供されている。これらを呼び出したり内包したりする形で、いろいろなエディターやIDEがTypeScriptをサポートしている。
IDE製品だとJetBrains社のWebStormが標準で対応しているし、EclipseにもTypeScriptをサポートするプラグインが存在する。またSublime TextやEmacs、vimなどでもコード補完やコンパイルなどをサポートするプラグインが開発されているみたいだね。
慧 んーと、結局のところ、どんな環境でもTypeScriptの開発はできるってこと？
き そうだね。開発環境の面でも、TypeScriptのハードルは低いと思うよ。少なくともすでにJavaScriptのプログラミングしているのであれば、特別にTypeScriptに対する機能が無い環境であっても、コンパイラーさえ動かせばいいんだしね。
AtomでTypeScript開発環境を整える
き さて、そろそろAtomでTypeScriptを開発する環境を作ってみようか。
慧 やってみよう！
Atomのインストール
き まずはAtomについて少し紹介しておこう。AtomはGitHubが提供する無料でオープンソースソフトウェア（OSS）のテキストエディターで、プラグインを使って機能を拡張したり自由にカスタマイズできたりと、拡張性の高さがウリのひとつになっている。
慧 私のテーマもあるんだよ！
き そ、そうなんだ（＾＾； プラットフォームもWindows／Mac OS X／Linux／FreeBSDと対応しているから、環境を選ばない点もうれしいね。
慧 Atomのインストールは、公式サイト（英語だけどインストールは簡単）の［Download ……］ボタンを押してインストール用のファイルをダウンロードし、それを実行すればいいだけみたいだね。
プラグイン「atom-typescript」のインストール
き 次に、AtomでTypeScriptプログラミングを快適に行うための、プラグインをインストールしよう。Atom用のTypeScriptサポートプラグインはいくつかあるみたいだけど、今回はatom-typescriptというプラグインを使ってみることにする。
慧 どうやってインストールしたらいいの？
き Atomにはプラグインの管理機能が備わっているので、とっても簡単なんだ。
（メニューバーにある）［Package］メニューの［Settings View］の［Open］から［Install］タブを選択し、［Install Package］のテキストボックスに「atom-typescript」と入力し、Enterキーを押すと、検索が始まる。検索結果として表示された「atom-typescript」プラグイン情報の［install］ボタンをクリック。しばらく待てば、インストール完了だ（図3）。
慧 簡単だね！
AtomでTypeScriptプログラミング
き インストールが終わったら、コードを書いてみよう。まずは［File］メニューから［New File］を選択して新規ファイルをエディターで開き、次に［File］－［Save］を実行して、今回は「bmi.ts」という名前でファイルを保存する。これによって、Atomウィンドウの右下に表示されているモードが、［Plain Text］から［TypeScript］に切り替わる。そして次のソースコードを入力してみて。さっきのコードとほとんど同じだよ。
|
1
2
3
4
5
|
function getBMI(weight: number, tall: number): number {
return weight / (tall * tall);
}
var bmi = getBMI(65, 1.75);
|
「型アノテーション」で型の指定
慧 普通のJavaScriptみたいだけど、:numberっていうのは、初めて見る書き方だね。これがTypeScriptの構文なの？ numberってことは、数値型ってこと？
き その通り。これは「型アノテーション（型注釈）」といって、TypeScriptで型を明示するときの書式なんだ。ご明察の通り、weight: numberは「weightは数値型とする」という意味だね。
コード補完とエラー表示機能
慧 あっ、入力するとコード補完されたよ！（図4）。
き これはatom-typescriptが提供している機能だね。
ちなみに、このようにならない場合は、先ほどの［File］メニューの［Settings］から［Packages］タブを開いて、atom-typescriptプラグインが正しく有効（Enable）になっているかチェックしてみて。
慧 いいね！ これなら間違えることもないし、入力も楽ちん！
き ついでだから、わざとエラーになるように入力してみよう。5行目のところの65を、ダブルクォートで囲んでみよう。
var bmi = getBMI("65", 1.75); // わざとエラーになるようにしてみる
慧 あ、赤線でエラーメッセージが出たよ（図5）。
き こんな感じでエラー箇所に分かりやすくメッセージが表示されるし、ウィンドウの下部にもエラーがまとめて表示されるんだ。
慧 これならちょっとしたミスで悩まなくてもいいね！
JavaScriptにコンパイル
き じゃあ、コードを元に戻して、ファイルを保存してみよう。
慧 はーい。あ、何か出たよ！（図6）
き これは見ての通り、このatom-typescriptプラグインでは、ファイルを保存すると、自動的にコンパイルを実行してJavaScriptファイルを生成してくれるんだ。このメッセージはそのコンパイルが正常に終了したというお知らせだね。
ファイル保存先のフォルダーを見てごらん。コンパイル結果のJavaScriptファイル「bmi.js」ができているよ（図7）。
き これでatom-typescriptプラグインが正常に動作していることが確認できたね。
慧 いい感じ！
■
（続く。次は「TypeScriptの基本」から実際にTypeScriptを学んでいくよ！）
Build Insider × プロ生ちゃんの壁紙ダウンロード
プロ生サイトで特別壁紙がダウンロードできます。
1. 【現在、表示中】≫ TypeScriptってどんなもの？ プロ生ちゃんと始めてみよう！
TypeScriptが気になる人は、本連載で楽しく優しく学ぼう。TypeScriptの特徴から、Atomエディター開発環境の構築まで紹介。
2. TypeScriptの基本のキ。JavaScriptをベースに「TypeScriptをつまみ食い」しよう！
TypeScriptの基本中の基本である「型」「クラス」「インターフェース」をプロ生ちゃんと学ぼう。「今、TypeScriptやって損しない？」という疑問・不安についても回答する。
3. TypeScriptの機能と文法、まずはこの3つを押さえよう！ 構造的部分型、ジェネリクス、アロー関数式
TypeScriptには多くの機能や文法があり、最新の1.5～1.6でさらに追加された。開発の実践を始める前に、数ある機能の中から最低限、「構造的部分型」「ジェネリクス」「アロー関数式」の3つを押さえておこう。
