TypeScript and ALM presentaion

1. TypeScriptとALM
かめがわ かずし(@kkamegawa / id:kkamegawa)

2. 自己紹介
亀川 和史(かめがわ かずし) / 会社員 /TFSUGスタッフ
5月から関西で生活してます。ここではお初です
Twitter:@kkamegawa https://twitter.com/kkamegawa/
Facebook: https://www.facebook.com/kkamegawa/
blog: http://kkamegawa.hatenablog.jp
Microsoft MVP for Visual Studio ALM(2012/7～)
今どきのソースコード管理
http://www.atmarkit.co.jp/ait/articles/1303/01/news082.html
はじめてのTeam Foundation Server 現在発売中(Kindle版で)
http://www.shuwasystem.co.jp/products/7980html/4046.html

3. 実際TypeScriptってどのくらい役立つ？
TFS 2012のWeb UIを作ったとき、JavaScriptのバグに結構悩まされた
TypeScriptを試してみたらものすごく役立った
→13個のバグが見つかった
http://blogs.msdn.com/b/bharry/archive/2012/10/24/typescript-a-real-
world-story-of-adoption-in-tfs.aspx
Eric Gammaのチームで手動書き換え
→300line/hのペースで書き換えたが、80000行書き換えるのは大変だった
ので、ツール作った

4. Agenda
ALMってなに？

5. ALMって？
Application Lifecycle Managementの略
アプリケーションの計画～開発～運用までと、チームコラボレー
ション
http://www.visualstudio.com/explore/app-lifecycle-management-vs
DevOpsと何が違う？
→プロジェクトの計画と終了までを含むかどうか(DevOpsは開発と運
用のサイクル)

6. Agenda
ALMってなに？
TypeScriptとビルド
TypeScriptとデバッグ
TypeScriptとデプロイ
運用

7. Visual Studio Online / TFSを
使ったことのある方？

8. Visual Studio Online
現在メンテナンス中
(6/10 10:00～16 23:00/UTC)

9. デモ中に使えなかったら
ごめんなさい(__)

10. ALMを実現するためのインフラ
ビルド機能
ソースコード管理
テスト計画と管理
バグトラッキング
など…
あ
開発
発行 運用
調査

11. ビルドしてますか？

12. TypeScriptのコマンドラインコンパイル
Tsc.exeでtsファイルをコンパイル。
(Visual Studio 2013に同梱)
型定義ファイル(d.ts)も同時に生成可能
WebアプリケーションならLESSとか
ASP.NETファイルもコンパイルするから
VSから直接お世話になることはあまり
ないかも
npmで入れるTypeScript(tsc.js)もあるよ

13. TypeScriptのビルド
TypeScriptを含むソリューションは
「開発者コマンドプロンプト(※)」
からmsbuildコマンド実行でOK
(パッケージは入れておいてね)
MSBuildは一般配布されているので、
JenkinsでもMSBuild入れればOK
http://www.microsoft.com/ja-
jp/download/details.aspx?id=40760
※:%comspec% /k ""C:¥Program Files (x86)¥Microsoft Visual Studio 12.0¥Common7¥Tools¥VsDevCmd.bat""

14. TFS / VS Online のビルド
オンプレミスでもクラウドでもやり方はほぼ同じ
(VS Onlineの場合UIが英語)
ビルドマシンはクラウドでもオンプレミスでも使える
MSDN Subscriptionではクラウドの場合60分まで
上限超えると$0.05 / 分
(サンプル程度でも1分使うので結構早く無くなる)
http://www.visualstudio.com/ja-jp/products/visual-studio-online-overview-
vs#AdditionalPageSections_2

15. ビルド定義比較
VS Online Team Foundation Server

16. ビルドサービスの仕組み
Visual StudioがサポートされているOSに
インストール可能
Windows 7,Windows 8.1などのクライア
ントOSもOK
Visual Studio Onlineのビルドエージェン
トとしても構成可能(最初はローカルで
始めたほうがいいかも)
Visual Studio
Online
Team Project
Collection
Internet
Local Network
ビルド
サーバ
コントローラ
エージェント

17. ビルド時の注意点
もちろんビルドサーバにTypeScriptコンパイラがあるか確認！
ビルドサーバーにVisual Studioが入っていない場合、MSBuildの定義のコピーが
必要
 C:¥Program Files (x86)¥MSBuild¥Microsoft¥VisualStudio¥v12.0¥web
 C:¥Program Files (x86)¥MSBuild¥Microsoft¥VisualStudio¥v12.0¥ WebApplications
サーバービルドするときエラーが出たらこの辺のフォルダをコピー
第3回「TFS自動ビルドを実践する」でも書いています
http://www.atmarkit.co.jp/ait/articles/1307/02/news054.html

18. デバッグしてますか？

19. TypeScriptとASP.NETデバッグ
ASP.NETプロジェクトの場合はVisual Studioにおまかせ
ごく普通にASP.NETの一部としてデバッグ可能
Web Essentials入れていればTypeScriptとJavaScriptが関連付けられて表示

20. Node.jsのデバッグしたい場合
なにはともあれNode.js Tools for
Visual Studio入れよう
https://nodejstools.codeplex.com/
プロジェクトテンプレートが追加
され、ちょっと便利に
Node.jsのプロファイラもついてく
る

21. はまりポイント
6/14時点でnode.js Tools for Visual Studioベータだからか安定してない？
(プロジェクトテンプレートそのままでも死ぬ)
TypeScriptコンパイラが出力するJavaScriptファイルがBOMつきUTF-8のた
め、そのままだとデバッグできない
1. 生成されたjsファイルをBOMなしUTF-8で保存しなおす
2. Node.jsの起動引数に --debug app.js のように明示的に指定
(BOM有UTF-8あれなのはわかるけど、node.jsで何とかしてほしい…)
JavaScriptにUTF-8 BOM入れるのはストアアプリのためみたい
→BOMがないとWACK(検証ツール)が不合格になる

22. デプロイしてますか？

23. IISへのデプロイ
管理サービスの有効化 / サーバー証明書の準備(発行にhttpsを使うため)
MsdeployのインストールとWeb Deployment Serviceの実行確認
 Web Platform Installer(IISマネージャ起動時に聞いてくるあれ)
 http://www.iis.net/downloads/microsoft/web-deploy から入手
インストール時独自証明書入れたくない場合
 自前CA認証局(イントラネット向き)
 外部からサーバ証明書購入(一般向き)

24. TypeScriptとデプロイ
ターゲットがIISで、Visual Studioを使っている場合、Web発行が楽
 TFSのビルド時に継続的インテグレーションでデプロイ
 VS OnlineでWeb Sitesに自動デプロイ
 発行対象台数が多くなると、ちょっと考える
Node.jsだとビルドの終了時そのままコピー
 ビルドサーバーの実行アカウントに気を付けて(TFSでもJenkinsでも同じ)
 LOCALSYSTEMやSYSTEMアカウントではネットワークアクセス不可なので、ビ
ルドサーバーの実行アカウントに気を付けて

25. モニタリングしてますか？

26. 性能分析
Visual Studio OnlineではApplication Insights(現在プレビュー)
NewRelicみたいなものと…
http://msdn.microsoft.com/ja-jp/library/dn481095.aspx
専用の拡張機能を入れればアプリケーション生成時にApplication Insights
用コードが埋め込まれる
TypeScriptのHTMLアプリケーションテンプレートは現在(6/14)未サポート
 ただし、ASP.NET Webプロジェクトを作って、TypeScriptを追加すればOK

27. TypeScriptとテストツール
 6/14現在NuGetからTypeScriptで検索するとこのく
らい。
 Jasmine tests
 TSTestAdapter
 Jasmineは現時点(6/14)では1.0に対応していないみ
たい。
 1.0で作成されたものがコンパイルエラーになる
 bool→booleanなどの0.9での非互換レベルに引っか
かったので、この辺見ればよい
https://typescript.codeplex.com/wikipage?title=Known
%20breaking%20changes%20between%200.8%20and
%200.9

28. 本日の環境
ドメイン
コントローラー
TFS2013
SQL Server
ThinkPad T440p/16GB Memory/Intel SSDの
Windows 8.1 Hyper-V仮想マシン上
Windows 8.1
Visual Studio
Windows
Server 2012 R2

29. まとめ
TypeScriptプロジェクトの開発から運用までさらっと流してみました
TypeScriptプロジェクトでも基本的にVisual StudioとTFS/Visual Studio
Onlineでプロジェクトの最初から終わりまでOK
node.jsとnode.js Tools for Visual Studio合わせて使うときはちょっと気を
付けて