TypeScript And ALM

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

自己紹介
亀川和史(かめがわかずし) / 会社員 /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

実際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行書き換えるのは大変だった
ので、ツール作った

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

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

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

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

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

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

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

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""

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

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

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

ビルド時の注意点
もちろんビルドサーバに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

デバッグしてますか？

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

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

はまりポイント
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(検証ツール)が不合格になる

デプロイしてますか？

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

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

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

性能分析
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

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

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

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

TypeScript And ALM

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to TypeScript And ALM (20)

More from Kazushi Kamegawa (20)

TypeScript And ALM