Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Microsoft発のaltJS「TypeScript」+Visual Studioで楽々クライアントサイド開発

さらに使いやすく便利になった「Visual Studio」を始めよう! 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/01/30 14:00

 TypeScriptは、マイクロソフトによって開発が進められているスクリプト言語で、コンパイルすることでJavaScriptに変換される、いわゆるaltJS(JavaScriptの代替言語)の一種。2012年10月に最初に発表された後、1年半を経て、2014年4月に初の正式版1.0がリリースされたばかりの、比較的新しい言語です。本稿では、最初にこのTypeScriptが登場するに至った背景と、言語としての基本的な構文規則を、そして後半では、Visual StudioでTypeScriptを利用する方法について解説していきます。

目次

対象読者

 今回の対象読者は、以下のとおりです。

  • JavaScriptによるクライアントサイド開発に携わってきた方
  • TypeScript、CoffeeScript、Dartなど、altJS技術に興味のある方

必要な環境

  • Visual Studio Community 2013、または他エディション

JavaScriptの問題点

 まず、JavaScriptは決して開発生産性の高い言語ではありません。

 例えばJavaScriptにはクラスという概念はありません。代わりに、JavaScript固有のプロトタイプという機能を使って、クラスのようなものを定義する必要があります。これはクラスベースのオブジェクト指向言語に慣れてきた大概の開発者にとって、なじみにくい機能の一つです。また、ある程度の規模のアプリを開発するには欠かせないパッケージ/名前空間の概念もありません。

 さらに、JavaScriptはデータ型に寛容な言語です。寛容、といえば聞こえは良いものの、本格的な開発では、その寛容さがあいまいさを生み、結果としてバグの潜在的な原因になるおそれがあります。

 にも関わらず、JavaScriptを使い続けなければならないのはなぜか。それは、JavaScriptがブラウザ上で動作する唯一の言語であり、当面、選択の余地がないからです。しかも、「HTML5の普及」をはじめ、「Flash/SilverlightなどRIA(Rich Internet Application)の衰退」、「SPA(Single Page Application)の浸透」などの要因から、近年、Webアプリでクライアント開発が占める割合はいや増しています。JavaScriptの開発生産性を補う手段の提供は急務であったわけです。

 もっとも、これだけ普及しているJavaScriptをいきなり別の言語で挿げ替えるのは現実的ではありません。次期JavaScriptと呼ばれるECMAScript 6も検討されていますが(注1)、これが正式リリースされ、対応ブラウザが十分に普及するには、まだまだ時間が必要でしょう。

 そこで登場するのが、altJS(JavaScriptの代替言語)と呼ばれるアプローチです。JavaScriptに薄い皮(言語)を被せてしまい、JavaScript特有の使いにくさを覆い隠してしまおうという考え方です。例えばaltJSの多くでは、C#、Javaライクなクラスベースのオブジェクト指向構文を利用できます。

 altJSは、一般的には、コンパイラーによってあらかじめJavaScriptに変換されたものが実行されますので、標準的なブラウザだけで動作します。プラグインなどのインストールは必要ありません。

図1 altJSによるソース実行の流れ

 その中では、いよいよclassキーワードも追加される予定です。

altJSとTypeScript

 代表的なaltJSには、Rails 3.1以降で標準搭載されたことから一挙に普及したCoffeeScriptをはじめ、Googleが開発したDart、JavaScriptだけでなくJava/C++/PHPなどにも変換可能なHaxe、そして、本稿で扱うTypeScriptなどがあります。それぞれが鎬を削っており、現時点では、デファクトスタンダードが確立するまでには至っていません。

 そのような状況を前提として、ではありますが、著者がTypeScriptをaltJSの本命と考える理由をいくつか挙げておきます。

(1)JavaScriptのスーパーセットである

 ざっくりと言ってしまうならば、TypeScriptは、JavaScriptの標準仕様であるECMAScript 5に対して、静的な型付けとクラスベースのオブジェクト指向を加えた「JavaScriptのスーパーセット」です。よって、既存のJavaScriptのコードが、ほぼそのまま(比較的少ない修正で)TypeScriptのコードとして動作します。

 オブジェクト指向構文は、次期ECMAScript 6の仕様を先取りした内容になっていますので、TypeScriptを学ぶということは次世代のJavaScriptを学ぶということにも繋がります。

(2)開発環境の選択肢が豊富である

 マイクロソフト発のaltJSということで、まず、Visual Studioとの親和性はピカイチです。本稿後半でも述べるように、自動コンパイル機能をはじめ、構文ハイライト、Intellisense、デバッグ機能など、開発に必要な機能が手厚くサポートされています。

 ただし、TypeScriptをサポートしているのは、なにもVisual Studioだけではありません。Node.jsでもコンパイラーがパッケージ提供されていますし、Sublime TextWebStormEclipseなど、メジャーな開発環境がすでにTypeScriptをサポートしており、また、多くの開発者がこれを利用しています。TypeScriptは、.NET開発者のためだけの言語ではありません。

(3)開発生産性を向上する型システム

 TypeScriptは、その名のとおり、型付けされたJavaScriptです。JavaScriptではあいまいであった型を、TypeScriptでは宣言時に明示するのが基本です(ただし、必須ではありません)。これを「静的型付け」と言います。

 この型システムによって、TypeScriptは統合開発環境との親和性に優れます。C#/Javaなどの言語では当たり前であった型チェック、コード補完の恩恵を当たり前のように享受できます。これまでは実行するまで検出できなかった問題を、コンパイル時、もしくはエディター上でのタイプ時に認識できるため、デバッグ時の負担が大幅に軽減されます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:さらに使いやすく便利になった「Visual Studio」を始めよう!
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5