1. N分で作る
TypeScript で Node.js
Visual Studio編
@TANAKA_733

2. @tanaka_733 (自己紹介)
 お仕事
 Ruby, Java, Node.js, Lua とかでPaaSをごにょっている人
 趣味
 C#な開発
 Windows Phone (7/8)
 Windows Store Apps
 Kinect
 ブログ
 銀の光と碧い空

3. @tanaka_733 (自己紹介)
 お仕事
 Ruby, Java, Node.js, Lua とかでPaaSをごにょっている人
 趣味
 C#な開発
 Windows Phone (7/8)
 Windows Store Apps
TypeScript やるしかない！！！
 Kinect

4. TypeScript で Node.js
 昔書いた記事のブラッシュアップ版
 http://techblog.hilife-jp.info/2012/10/nodejs-typescript/
 今回はVisual Studioで
 Ts ファイルからjs ファイルへは同じtsc コマンドなのでほかのエディタでも基本同じ
 準備
 Visual Studio 2012 (VS Express for Web か VS professional Edition以上)
 TypeScript VS Plugin (v0.8.2)
 http://www.microsoft.com/en-us/download/details.aspx?id=34790
 Node (v0.8.17), nvmw を使用しています
 https://github.com/hakobera/nvmw
 Git client
 http://code.google.com/p/msysgit/downloads/list?q=net+installer

5. プロジェクト作成
0.8.2 から Visual C#から
TypeScriptの下に

6. BOM問題
 Visual Studioのテキストファイルのデフォルトエンコードは、
SHIFT-JISもしくはUTF-8 BOM付きの模様
 Node.js のライブラリまわりでよくはまることが…
 デフォルトの設定はなさそう
 めんどいですが、1つ1つ保存しなおし。
 よりよい方法があったら教えてください <m(__)m>

7. ファイル > 名前を付けて保存
UTF-8 シグネチャなし
(BOMなしのこと)
ここを押して、
エンコードを選択

8. TypeScript定義ファイルを取ってこよう
 https://github.com/borisyankov/DefinitelyTyped
が更新頻度が高いのでおすすめ。
 > git clone https://github.com/borisyankov/DefinitelyTyped.git

9. その1 Hello World
 app.ts を消して一から書き直し。
 まずは、これを書いて定義ファイルを参照可能にする
 ///<reference path='DefinitelyTyped/node/node.d.ts'/>
import http = module('http')
http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

10. こんな感じInteliSense が効きます

11. node.js を起動する
 > node app.js

12. その2 パッケージ＆PaaSにデプロイ
 npm: node のパッケージ管理システム
 package.json をいつも通り記述 (UTF-8 ボムなしで保存)
{
"name": “typescript-sample"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "3.0.0"
, "ejs": ">= 0.8.3"
, "jade": ">= 0.27.7“
}
}

13. npm install でパッケージをインストール
 > npm install を実行

14. app.ts を書き換え
///<reference path='DefinitelyTyped/node/node.d.ts'/>
///<reference path='DefinitelyTyped/express/express.d.ts' />
///<reference path="DefinitelyTyped/underscore/underscore.d.ts" />
import http = module('http')
import url = module("url") コンパイルエラーでるの
import routes = module("./routes/index") は、あとで追加します
import express = module('express')
var app = <express.ServerApplication> express()
var port = process.env.VCAP_APP_PORT || 1337; 後半のPaaSに
// 続く デプロイして
クラウド上で動くときに
使います

15. app.ts を書き換え
app.configure(function () {
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
//express3
app.set('view options', {
layout: false
});
app.use(express.bodyParser({}));
app.use(express.methodOverride());
app.use(express.static(__dirname + '/public'));
});
//続く

16. app.ts を書き換え
app.configure('development', function () {
app.use(express.errorHandler({ dumpExceptions:
true, showStack: true }));
});
app.configure('production', function () {
app.use(express.errorHandler());
});
// Routes
app.get('/', routes.index);
app.listen(port);
console.log('Server running at http://127.0.0.1:' + port + '/');

17. routes フォルダを作成して、index.ts追加
///<reference path='/DefinitelyTyped/express/express.d.ts' />
import express = module("express")
export function index(req: any, res: any) {
res.render('index',
{ title: 'Page Title', testArray: ["1", "2", "3", "4"] })
}

18. views フォルダ追加してViewを定義
 jade は素人なのでもっといい書き方があるかも
 このjade (ejsも) VSの補完は効かないし、
BOMなしで保存しなおさないといけないので、
VS以外のエディタでやるのがいいような…
 views/layout.jade (ファイルはもう一つ次のページに)
!!! 5
html
head
title PageTitle
body
#container
#header
block mainContent

19. views フォルダ追加してViewを定義
 views/index.jade
extends layout
block mainContent
h1= title
p Welcome to #{title}
ul
- each test in testArray
li
a(href= "/user/"+test)
b= test

20. 実行
 > node app.js

21. PaaSにデプロイ
 最近は、node.js が動くPaaSが増えてきました
 Azure Web Site, Heroku などなど
 今回は 変わったとこで、Uhuru Cloud を使ってみます
 OSS なPaaS CloudFoundryを使ったサービスの1つ
 CloudFoundry自体はRuby を中心に書かれています
 CloudFoundry本家でもNode.js使えます
 Uhuru は .NET も動かせるのが違うところ

22. Uhuru Cloud の登録
 http://uhurusoftware.com/ からユーザー登録

23. コマンドラインツールのセットアップ
 要Ruby 1.9.2 以上
 http://support.uhurusoftware.com/entries/21454287-deploying-and-
managing-apps-with-command-line
> ruby --version
ruby 1.9.2p290 (2011-07-09) [i386-mingw32]
> gem update –system
> gem install vmcu
> vmcu target services.uhurucloud.com
Successfully targeted to Uhuru AppCloud [http://services.uhurucloud.com]
> vmcu login
> vmcu cloud-team Webの管理画面から
OneTimeToken 発行して入力

24. コマンドラインツールからデプロイ
> cd <ProjectFolder> 本当はビルド成果物(js)とjadeファイルだけで十分
> vmcu push hello-typescript --runtime node08
アプリ名はグローバルで一意なので
# 以下プロンプトは全部デフォルトのままEnterでOK 適当に変えてください

25. (参考)プロンプト
>vmcu push hello-typescript --runtime node08
Would you like to deploy from the current directory? [Yn]:
Detected a Node.js Application, is this correct? [Yn]:
Application Deployed URL [hello-typescript.uhurucloud.com]:
Memory reservation (128M, 256M, 512M, 1G, 2G) [64M]:
How many instances? [1]:
Bind existing services to 'hello-typescript'? [yN]:
Create services to bind to 'hello-typescript'? [yN]:
Would you like to save this configuration? [yN]:
Creating Application: OK
Uploading Application:
Checking for available resources: OK
Processing resources: OK
Packing application: OK
Uploading (2M): OK
Push Status: OK
Staging Application 'hello-typescript': OK
Starting Application 'hello-typescript': OK

26. アプリにアクセス
URL は <appname>.uhurucloud.com
hello-typescript なら hello-typescript.uhurucloud.com

27. おつかれさまでした
 ここまでのサンプルは Github においています