Azure Web Sites + VS OnlineでブラウザだけでTypeScript開発

Windows Azure Web Sites（WAWS）は、ASP.NETだけでなく幾つかのスクリプト言語を動作させることができ、そのなかにはNode.jsも含まれています。一方、WAWS上にあるソースコードのIDEとして利用できる『Visual Studio Online（VS Online、コードネーム monaco）』はTypeScriptの.tsファイルにも対応しています。

ここでふと、『ということはWAWSとmonacoだけでゼロからTypeScript開発できるんじゃね？』などと思ってちょっと試してみたところ、あっさりできてしまいました。

「Windows Azure Web Site + monacoでTypeScript」の手順

ということで、ちょっとメモを残しておきます。

※試す際には、事前のWindows AzureとVisual Studio Onlineへのサインアップが必要になります（どちらも無料）

1.Web Siteの作成とVS Onlineの有効化

まずはAzure Web Sitesで空のサイトを新規に作成して……。

f:id:kiyokura:20140218212128p:plain

構成タブからVisaul Studio Onlineを有効にしておきます（設定を変更したら保存を忘れないように）。

f:id:kiyokura:20140218212203p:plain

2.VS Online上でファイル作成

Visaul Studio Onlineが有効になったら起動して、ファイルを追加していきます。まずはTypeScriptのファイルから。とりあえず名前はapp.tsにしてみます。

f:id:kiyokura:20140218212253p:plain

あんまりTypeScriptらしくないですがとりあえずこんなコードを書いてみました。型推論を使わずにわざわざ型名を書いてみたりしてることろが精一杯の抵抗（謎）

window.onload = () => {
  var pageTitle : string = "Hello TypeScript on monaco";
  var el : HTMLElement = document.getElementById('page-title');
  el.innerText = pageTitle;
}

ちなみに、こんな風にインテリセンスもちゃんと効きます*1。素敵ですね。 f:id:kiyokura:20140218212351p:plain

次にHTMLファイルも追加します。名前はindex.htmlにしておきます。とりあえずこんな内容。

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Test</title>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body>
    <h1 id="page-title"></h1>
  <body>
</html>

3.TypeScriptコンパイラのインストール

現状、TypeScriptをブラウザで実行するには、コンパイルしてJavaScriptにしてやる必要があります。つまりコンパイラが必要になります*2。そしてこれまた現時点でmonacoやAzure Web SitesにはTypeScriptコンパイラは標準で供えられていないません*3。

ですがWAWSではnode.jsが動いてますので、npmコマンドを使ってTypeScriptコンパイラをインストールしてやることができます。

まずはコンソールを起動します。左のへんにあるアイコンをクリックするか、ショートカットctrl + shift + cでコンソールを起動します。

f:id:kiyokura:20140218212546p:plain

そしておもむろにnpm install typescriptとタイプして実行。しばらく待つとインストールが終わります。 f:id:kiyokura:20140218212630p:plain

4.コンパイル実行

コンパイラさえ入ってしまえばこっちのものです。引き続きコンソールからtsc app.tsとか打ち込んでコンパイルしてやりましょう。ソースコードに問題がなければ、ファイルEXPLOREにapp.jsが追加されているはずです。 f:id:kiyokura:20140218212631p:plain

5.実行結果

最後にブラウザでhtmlファイルにアクセスすると、こんな感じでちゃんとスクリプトが実行されていることがわかります。

f:id:kiyokura:20140218212933p:plain

まとめ

ということで、拍子抜けするくらいあっさりとブラウザだけでTypeScriptを開発して実行する環境が整ってしまいました。

VS Onlineはもちろん、サーバサイドの言語に対してもインテリセンス等の機能を提供しています。.NETだけではなく、PHP/Python/Node.jsあたりなら普通にインテリセンス付きでコードを編集できて、しかもWebアプリであればAzure Web Sitesでそのまま実行可能です。当然のようにGitも使えますので、githubやBitBucketと連携しながらソース管理も問題ありません。

Azure Web SitesとVS Online、思ってた以上に面白い感じになるかも！

*1: TypeScript公式サイトのPlaygroundと同じ仕組みのはず

*2:将来的にも多分ブラウザでTypeScriptがネイティブで動く日は来ないんじゃないかという気はします。

*3:こっちはひょっとしたら、1.0がリリース以降だと標準搭載の可能性もあるかも？