typescript and alm
DESCRIPTION
TypeScript and ALM presentaionTRANSCRIPT
![Page 1: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/1.jpg)
TypeScriptとALMかめがわかずし(@kkamegawa / id:kkamegawa)
![Page 2: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/2.jpg)
自己紹介亀川 和史(かめがわかずし) / 会社員 /TFSUGスタッフ
5月から関西で生活してます。ここではお初ですTwitter:@kkamegawa https://twitter.com/kkamegawa/Facebook: https://www.facebook.com/kkamegawa/
blog: http://kkamegawa.hatenablog.jpMicrosoft 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
![Page 3: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/3.jpg)
実際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行書き換えるのは大変だったので、ツール作った
![Page 4: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/4.jpg)
Agenda
ALMってなに?
![Page 5: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/5.jpg)
ALMって?Application Lifecycle Managementの略
アプリケーションの計画~開発~運用までと、チームコラボレーションhttp://www.visualstudio.com/explore/app-lifecycle-management-vs
DevOpsと何が違う?→プロジェクトの計画と終了までを含むかどうか(DevOpsは開発と運用のサイクル)
![Page 6: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/6.jpg)
Agenda
ALMってなに?
TypeScriptとビルド
TypeScriptとデバッグ
TypeScriptとデプロイ
運用
![Page 7: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/7.jpg)
Visual Studio Online / TFSを使ったことのある方?
![Page 8: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/8.jpg)
Visual Studio Online現在メンテナンス中
(6/10 10:00~16 23:00/UTC)
![Page 9: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/9.jpg)
デモ中に使えなかったらごめんなさい(__)
![Page 10: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/10.jpg)
ALMを実現するためのインフラビルド機能
ソースコード管理
テスト計画と管理
バグトラッキング
など…
あ開発
発行 運用
調査
![Page 11: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/11.jpg)
ビルドしてますか?
![Page 12: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/12.jpg)
TypeScriptのコマンドラインコンパイルTsc.exeでtsファイルをコンパイル。
(Visual Studio 2013に同梱)
型定義ファイル(d.ts)も同時に生成可能
WebアプリケーションならLESSとかASP.NETファイルもコンパイルするからVSから直接お世話になることはあまりないかも
npmで入れるTypeScript(tsc.js)もあるよ
![Page 13: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/13.jpg)
TypeScriptのビルドTypeScriptを含むソリューションは「開発者コマンドプロンプト(※)」からmsbuildコマンド実行でOK(パッケージは入れておいてね)
MSBuildは一般配布されているので、JenkinsでもMSBuild入れればOKhttp://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""
![Page 14: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/14.jpg)
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
![Page 15: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/15.jpg)
ビルド定義比較VS Online Team Foundation Server
![Page 16: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/16.jpg)
ビルドサービスの仕組みVisual StudioがサポートされているOSにインストール可能
Windows 7,Windows 8.1などのクライアントOSもOK
Visual Studio Onlineのビルドエージェントとしても構成可能(最初はローカルで始めたほうがいいかも)
Visual Studio Online
Team Project Collection
Internet
Local Network
ビルドサーバ
コントローラ
エージェント
![Page 17: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/17.jpg)
ビルド時の注意点もちろんビルドサーバに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
![Page 18: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/18.jpg)
デバッグしてますか?
![Page 19: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/19.jpg)
TypeScriptとASP.NETデバッグASP.NETプロジェクトの場合はVisual Studioにおまかせ
ごく普通にASP.NETの一部としてデバッグ可能
Web Essentials入れていればTypeScriptとJavaScriptが関連付けられて表示
![Page 20: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/20.jpg)
Node.jsのデバッグしたい場合なにはともあれNode.js Tools for
Visual Studio入れようhttps://nodejstools.codeplex.com/
プロジェクトテンプレートが追加され、ちょっと便利に
Node.jsのプロファイラもついてくる
![Page 21: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/21.jpg)
はまりポイント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(検証ツール)が不合格になる
![Page 22: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/22.jpg)
デプロイしてますか?
![Page 23: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/23.jpg)
IISへのデプロイ管理サービスの有効化 / サーバー証明書の準備(発行にhttpsを使うため)
MsdeployのインストールとWeb Deployment Serviceの実行確認Web Platform Installer(IISマネージャ起動時に聞いてくるあれ) http://www.iis.net/downloads/microsoft/web-deploy から入手
インストール時独自証明書入れたくない場合自前CA認証局(イントラネット向き)外部からサーバ証明書購入(一般向き)
![Page 24: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/24.jpg)
TypeScriptとデプロイターゲットがIISで、Visual Studioを使っている場合、Web発行が楽 TFSのビルド時に継続的インテグレーションでデプロイ VS OnlineでWeb Sitesに自動デプロイ発行対象台数が多くなると、ちょっと考える
Node.jsだとビルドの終了時そのままコピービルドサーバーの実行アカウントに気を付けて(TFSでもJenkinsでも同じ) LOCALSYSTEMやSYSTEMアカウントではネットワークアクセス不可なので、ビルドサーバーの実行アカウントに気を付けて
![Page 25: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/25.jpg)
モニタリングしてますか?
![Page 26: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/26.jpg)
性能分析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
![Page 27: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/27.jpg)
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
![Page 28: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/28.jpg)
本日の環境
ドメインコントローラー
TFS2013SQL Server
ThinkPad T440p/16GB Memory/Intel SSDのWindows 8.1 Hyper-V仮想マシン上
Windows 8.1Visual Studio
Windows Server 2012 R2
![Page 29: TypeScript And ALM](https://reader034.vdocuments.mx/reader034/viewer/2022042623/548fd5cfb479598e6a8b4f32/html5/thumbnails/29.jpg)
まとめTypeScriptプロジェクトの開発から運用までさらっと流してみました
TypeScriptプロジェクトでも基本的にVisual StudioとTFS/Visual Studio Onlineでプロジェクトの最初から終わりまでOK
node.jsとnode.js Tools for Visual Studio合わせて使うときはちょっと気を付けて