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

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

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

Agenda

ALMってなに？

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入れれば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""

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

本日の環境

ドメインコントローラー

TFS2013SQL Server

ThinkPad T440p/16GB Memory/Intel SSDのWindows 8.1 Hyper-V仮想マシン上

Windows 8.1Visual Studio

Windows Server 2012 R2

まとめTypeScriptプロジェクトの開発から運用までさらっと流してみました

TypeScriptプロジェクトでも基本的にVisual StudioとTFS/Visual Studio Onlineでプロジェクトの最初から終わりまでOK

node.jsとnode.js Tools for Visual Studio合わせて使うときはちょっと気を付けて