Visual Studioで始めるTypeScript開発入門
22 likes14,713 views
MVP Copmmunity Camp 2014 広島会場の同名セッションの発表資料 当日のUst録画： 前半 ： http://www.ustream.tv/recorded/45150865 後半 ： http://www.ustream.tv/recorded/45152045
![コンパイラの実行
• オプション設定の変更で
保存時コンパイル
– [ツール] - [オプション] - [テキスト エディター] -
[TypeScript] - [プロジェクト]
– ［保存時にコンパイル］をチェック](https://image.slidesharecdn.com/visualstudiotypescript-140322014145-phpapp01/85/Visual-Studio-TypeScript-71-320.jpg)
More Related Content
What's hot (19)
Viewers also liked (14)
Similar to Visual Studioで始めるTypeScript開発入門 (20)
More from Narami Kiyokura (11)
Visual Studioで始めるTypeScript開発入門
- 1. Visual Studioで始める TypeScript開発入門！ きよくら ならみ 2014.03.22 MVP Community Camp 2014
- 2. 自己紹介 • きよくら ならみ – @kiyokura – http://kiyokura.hateblo.jp/ • 岡山生まれ岡山育ちのプログラマー – 現在は県内の某製造業で社内SE • NET系の開発やWebアプリ開発 – Microsoft MVP for ASP.NET/IIS
- 3. • Okayama IT Engineers Community – 通称OITECの運営スタッフ – 主にMS系のテクノロジを扱う勉強会など を、岡山で開催しています – site: oitec.vbstation.net • オープンラボ岡山 – 去年から主宰を引き継ぎました – 岡山でノンジャンルの技術系勉強会を開催 – site: olojp.net コミュニティ
- 4. 本セッションの目的 • TypeScriptの概要を知っていただく • Visual Studioを使ってTypeScriptの 開発・学習を行うための基礎知識を 知っていただく
- 5. 本セッションのゴール • TypeScriptの概要を知る • Visual StudioでTypeScriptをどのよ うに扱えるのかを知っていただく
- 6. 免責事項 • 本セッションは私、きよくらならみ個人 が調査・検証をした結果を発表するもの です • マイクロソフトおよびTypeScript開発者 コミュニティ等の公式の見解ではござい ません • 万一本資料の記述の誤りに起因する損害 が生じた場合においても、発表者はその 責任を負いません 重要
- 7. バージョンについて • 本セッションの内容は、後述する、正式 版ではないバージョンのソフトウェアを もとにしたものです。 – 正式版やそれ以降のバージョンでは変更に なる可能性があります。 • 検証に使用したバージョン – Visual Studio 2013 Update 2 CTP 2 – TypeScript 1.0 RC 重要
- 8. アジェンダ • TypeScript概要 • TypeScript on Visual Studio • まとめ • リソース・補足等
- 10. TypeScriptって何？
- 11. TypeScriptとは • プログラミング言語です • どんな言語？ • このパートでは、まず端的な特徴を お話ししたいと思います
- 13. オフィシャルサイト曰く • TypeScript is a language for application-scale JavaScript development. • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. • Any browser. Any host. Any OS. Open Source.
- 14. 1st sentence TypeScript is a language for application-scale JavaScript development
- 17. application-scale？ • （私の解釈） • 見栄えの制御 • 入力値の検証 • ビジネス ロジック • アプリ全体 の制御
- 18. 規模の増大で問題なりやすい点 • 曖昧でもなんとなく動く – 動的型 – 暗黙のセミコロン補完 • スコープ – グローバル汚染 – ブロックスコープが無い • プロトタイプベース – 独特で理解しにくい
- 20. 2nd sentence TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
- 22. JSのtypedなスーパーセット • JSと互換がある –学習コストが低い • 既存のJSの利用も可能 • 静的型付け • ECMAScript 6thの仕様先取り
- 23. JSへコンパイル • 最終的な生成物はJSのコード –しかもリーダブルなJSを出力 • 可読性が高く、人がメンテ可能 hoge.ts hoge.jsコンパイラ
- 24. 3rd sentence • Any browser. Any host. Any OS. Open Source.
- 26. あらゆる環境で動く • 動作環境＝ JSの動作環境 – ブラウザ – Packaged Web Apps • Windowsストア / PhoneGap / etc... – プラットホーム • node.js / Windows Scripting Host / etc...
- 27. オープンソース • Apache License 2.0 • CodePlexでホスト –typescript.codeplex.com –VCSはgit
- 28. TypeScript • JavaScriptによるアプリケーションス ケールの開発に対応する為に設計された 言語 • JavaScriptのスーパーセットであり、” 静的型付け”が大きな特徴 コンパイルによりJavaScriptを生成 • 様々なブラウザやプラットホームで動作 またオープンソースである 超訳 by kiyokura
- 29. 作ってるのは？ • Microsoftによるプロダクト –でもオープンソース • あのAnders Hejlsbergも 関わっている –Turbo Pascal / Delphi / C# from wikipedia
- 30. 言語仕様の概要
- 31. 言語としての大まかな特徴 • 基本構文はJavaScript • 静的型 • 型推論 • クラスベースのオブジェクト指向 • ジェネリックス • アロー関数式 • Structural Subtyping – …等々キリが無いので本セッションでは軽くこの程度で許 してください – 詳細はググるbingると色々素敵な解説が出てきます
- 32. ざっくりまとめると • JSで厳しかったあたりを克服 – 静的型付け • コンパイル時の型チェック • ジェネリックス – クラスベース・オブジェクト指向 • クラス • インタフェース • 継承 – モジュール • 名前空間的な
- 33. ざっくりまとめると • 簡潔さや柔軟性も – any – 型推論 – Structural Subtyping – アロー関数式 • 既存資産やJSのスキルの活用 – JSのスーパーセット – ECMAScript 6仕様の先行実装
- 34. 開発環境について
- 36. 開発環境 • 開発環境は無償で構築可能 –Visual Studio –node.jsで動くコンパイラ • お好みのエディタ • Eclipse + プラグイン –ブラウザ上で • 公式サイトのplay ground • Visual Studio Online（monaco）
- 37. 開発環境 • エディタ/IDEのサポート（nodeのコンパイラ利用） –Sublime Text(*) –vim –emacs –WebMatrix 3 –WebStrom(*) –Eclipse（プラグイン） –Visual Studio Online（monaco） *製品自体は有償
- 39. Part.2 TypeScript on Visual Studio
- 40. ここからは… • Visual Studioを使って • TypeScript開発の第一歩を踏み出す • そのための情報を紹介します
- 42. Visual Studio 2013ファミリ • Visual Studio 2013 – Visual Studio 2013 Update 2より • 更新プログラム適用でビルトインされる • 2014.03.20現在はCTP 2 – 『Express 2013 for Web』も対応 • 無償 – Windows ストアアプリ向けの 『Express 2013 for Windows』は微妙
- 43. Visual Studio 2012ファミリ • Visual Studio 2012 – アドオンで対応 • Express 2012は？ – 多分対応 • ただし現在新規に入手できないかも？ • ダウンロードサイトにVS2013しかない？ – MSDNからは落とせるが • 問題なければExpress 2013使ってください – ～ for WebはWindows 7にも入ります
- 44. Visual Studio Express版について • Expressは商用開発に利用可能 –機能限定版（ not 評価版 ）
- 45. おことわり • ここから先は、原則として下記環境 • Visual Studio Express 2013 for Web – 有償版でも基本的に同じです • Visual Studio 2013 update 2 CTP 2 を適用 – 2014.03.20時点の最新
- 46. Visual Studio Express 2013 for Web によるTypeScript 開発環境構築
- 47. 環境構築のステップ • Visual Studio Express 2013 for Webのイ ンストール • Visual Studio 2013 Update 2 CTP 2の適 用 – あくまでもCTPです – 本番環境等への適用はご自身の判断で行っ てください • コンパイラへをPath環境変数に設定 – 必須ではありません • でもやっておくと便利
- 48. Visual Studio Express 2013 for Web • ダウンロードしてインストール –http://www.microsoft.com/ja- jp/download/details.aspx?id=40747
- 49. Visual Studio 2013 Update 2 CTP 2 • 以下のダウンロードからダウンロー ドしてインストーラーを実行 – http://www.microsoft.com/ja- jp/download/details.aspx?id=42023
- 50. コンパイラにパスを通す • 必須ではない • 但し通しておくと楽 – 型定義ファイルの自作時 – 未対応のプロジェクトでの利用 • 1.0RCではパスは以下 – C:¥Program Files (x86)¥Microsoft SDKs¥TypeScript¥0.9¥ • 32bit OSでは『(x86)』は不要 – 正式版になると、多分「0.9」->「1.0」になりそ う？
- 52. まず押さえておく点 • 対応するプロジェクトの種類 • コンパイル方法 • エディタの基本機能
- 53. 対応するプロジェクトの種類 • TypeScriptプロジェクト • Web アプリケーションプロジェクト • 以下は現時点では微妙 –Webサイトプロジェクト –Windowsストアアプリプロジェクト
- 55. TypeScriptプロジェクト
- 56. TypeScriptプロジェクト • TypeScript + HTML + CSS
- 62. Web アプリケーションプロジェクト • TypeScriptプロジェクトと同様 –［追加］ダイアログにtsファイル –ファイル保存で自動コンパイル –TypeScriptファイルでステップ実行
- 64. Webサイトプロジェクト • テキストエディタは対応 – シンタックスハイライト – インテリセンス • 以下は現時点では未対応 – ［追加］でtsファイルは出てこない – 自動コンパイルされない • オプション設定で自動コンパイルは可能 • いくつか制限等アリ • 詳細は「補足資料」を参照 Update 2 CTP 2
- 65. Windowsストアアプリ • Visual Studioのエディションで状況が異なる • Express – 未対応？ – Update 2 CTP 2では、まったく機能しない • 以前のバージョンではそれなりに動作していたが… • Update 2 RTWで改善するかも？ • Professional以上 – 概ね、Webサイトプロジェクトと同様 • 詳細は「補足資料」を参照 Update 2 CTP 2
- 66. 基本機能
- 67. TypeScript開発の基本機能 • コンパイラの実行 • エディタの対応 • デバッグ機能
- 69. コンパイラの実行 • 未対応のプロジェクト –以下のどれか • コマンドラインから手動コンパイル • オプション設定の変更で保存時コンパイル • ビルドスクリプトに記述してビルド時にコ ンパイル
- 70. コンパイラの実行 • コマンドラインから手動コンパイル –手動でtsc.exeを実行 • あらかじめパスを通しておくと良い • パッケージマネージャーコンソールお勧め –もちろんcmdでも良い • 例：「tsc.exe hoge.ts」
- 71. コンパイラの実行 • オプション設定の変更で 保存時コンパイル – [ツール] - [オプション] - [テキスト エディター] - [TypeScript] - [プロジェクト] – ［保存時にコンパイル］をチェック
- 72. コンパイラの実行 • ビルドスクリプトに記述して ビルド時にコンパイル – csproj / vbproj に記述 – 詳細は割愛 • すみません、Update 2 CTP 2で検証ができて いません…… • Webサイトプロジェクトでは不可 – なので実質的にはWindow ストアアプリ プロジェクトの場合のみ
- 73. エディタの対応 • シンタックスハイライト • アウトライン表示・非表示 • intellisense • リアルタイムエラー検出 • コード間移動 • などなど。 – 他にもVS共通の機能として色々
- 76. intellisense • コード補完 • 型情報の表示 • ドキュメントコメントの表示
- 77. intellisense
- 79. コード間移動 • 定義へ移動 – クラスや関数などの定義へ移動 • 戻る／進む – 定義へ移動等で移動した履歴を辿る • 全ての参照の検索 – 該当の識別の参照をすべてピックアップ
- 80. Update 2 CTP 2時点では • まだちょっと機能が弱い – 学習には十分だが • まだ実装が始まったばかりなので期待 – まだCommunity Technology Previewです – すぐにJavaScriptで利用できる機能くらいには実 装されるのではなか（希望的観測） • 有償版なら… – Web Essentialsも併用 – ReSharperも8.2で対応
- 82. ステップ実行
- 87. 変数ウォッチ • 変数の書き換え
- 88. こんな時どうするの？
- 89. こんな時どうしよう？ • 自作のJSのコードを使いたい • 著名なJSライブライを使いたい • 自作ライブラリでインテリセンスを 活用したい
- 91. JSのコードを使いたい • "全ての JavaScript は TypeScript" • 但しそのままでは通らないケースも –型情報が無い
- 93. 1. TypeScriptに移植する • コンパイルが通るよう改変する • こんな時 –既存のコードの一部をtsに取り込む –.jsファイルを.tsファイル移植 • 今後もTypeScriptとしてメンテナン スするならこちらがオススメ
- 94. そのまま移植してみる • そのまま移植してみると… • *.jsを*.tsにリネーム • tsファイルにコードを張り付ける • 案外そのまま行けたりする –但し型推論できないところはanyになる • 引数は基本any
- 100. 2. 型宣言のみを別途行う • 既存のJSに手を入れない –利用するTSのコンパイルを可能に • こんな時 –今後もJSとしてメンテナンスされる –外部製のJSライブラリを利用する場合 • JS自体に手を入れることが出来ない のであればこちら
- 101. 型宣言ファイルを利用する • 型宣言（型定義）ファイル –Declaration File –変数・関数などの宣言する –拡張子 ： .d.ts –C言語のヘッダファイルのイメージ
- 105. 定宣言の参照 • tsファイルに宣言参照を追加 /// <reference path="hoge.d.ts" />
- 107. コンパイラの-dオプション • tcs.exeのd.tsを出力するオプション –"-d " または " --declaration" –コンパイル時にd.tsも出力する • これを利用
- 108. 手順 • 対象のjsファイルをコピーしておく • jsファイルの拡張子をtsに変える • -dオプションでコンパイル • 出来上がったd.tsファイルを編集
- 114. 著名なライブラリを使う時は… • 公開されている 型宣言を利用する – 有志によりgithubで公開されている • borisyankov/DefinitelyTyped • 今後は… – TypeScriptが普及するとオフィシャルに提 供されるケースが増えるかも？ • NuGetで公開されている場合も
- 115. 自動で型定義を探す
- 118. JSDoc形式で記述 • /** ～ */のJSDoc形式 vsdoc形式では無い点に注意
- 119. ただし… • VS2013 Update 2 CTP 2では対応が微妙 – @param程度しかまともに機能していない？ – 今後の改善に期待 • ビルド後のJsにもjsdocは付加される – 但しvsのJavaScriptエディタも対応が今一つ • 一応、コメント全文がそのまま表示されるので意 味はある – 今後の改善に期待
- 121. Web Essentials 2013 • 無償のプラグイン • Webに関連する便利な機能を実装 • Professional以上で利用可能 –Expressではアドオン利用に制限アリ
- 122. TypeScript関連機能 • プレビュー機能 • コードregion • d.tsのd&d対応
- 123. まとめ
- 124. TypeScriptとは • JavaScriptにコンパイルされる 静的型付けの言語 – JavaScriptのスーパーセット – クラスベースのオブジェクト指向 • マルチプラットホーム – JavaScriptが動くところで動く • オープンソース – git on CodePlex / Apache License 2.0
- 125. Visual StudioでのTypeScript • VSのビルトイン機能としてサポート – VS2013 Update 2 より • 各種機能 – 自動コンパイル – インテリセンス – デバッグ機能 • 機能が足りていない部分は今後に期待 – まだサポートが始まったばかり
- 126. TypeScriptに対する個人的見解 • もうどんどん使えばいいと思う –『型が指定が出来るJavaScript』レベ ルでもいいのでは • デメリットもほとんどない（と思う） –出力されるJavaScriptの可読性も高い • 納品はJavaScriptだけしてもいい
- 127. JavaScript is Assembly Language
- 128. JavaScript is Assembly Language • by Scott Hanselman – http://www.hanselman.com/blog/JavaScriptIsAs semblyLanguageForTheWebSematicMarkupIsDe adCleanVsMachinecodedHTML.aspx • JSの偉大な導師達「大体あってる」 – Mike Shaver / Brendan Eich / Douglas Crockford – http://www.hanselman.com/blog/JavaScriptisAs semblyLanguagefortheWebPart2MadnessorjustIn sanity.aspx
- 130. ご清聴ありがとうございました
- 131. リソース・補足等
- 133. Visual Studio 2013 Update 2 CTP 2 について • ダウンロードサイト – http://www.microsoft.com/ja- jp/download/details.aspx?id=42023 • サポート情報 – http://support.microsoft.com/kb/2927432/ja • マイクロソフト エバンジェリスト井上氏のblog – http://blogs.msdn.com/b/chack/archive/2014/ 02/27/typescript-1.0-rc-visual-studio-2013- update-2-ctp2-windows-azure-japan-geo.aspx
- 134. 重要：情報を探すときは… • バージョンに注意！ – Visual Studio – Visual Studio Update – TypeScriptプラグイン – Web Essentials • バージョンごとにいろいろかなり違う – TypeScript自体の機能 – VSのインテグレートの状況 • Webアプリプロジェクトでも、C＃のテンプレートでは対応してい るがVB.NETには無い等 – 機能が実装されている箇所 • TypeScriptプラグイン or Visual Studio or Web Essentials Update 2 CTP 2でおおむね固まった感はある
- 135. Webサイトプロジェクトの TypeScript対応状況 • プロジェクトテンプレートとしては TypeScript対応機能がビルトインされない – ファイルタイプの追加に出てこない – TypeScriptの自動ビルドが行われない • （規定では） • 使えないわけでは無い – 手動でファイルを追加 – オプション設定の変更で自動コンパイル • もしくは手動コンパイル – テキストエディタは対応 • シンタックスハイライト • インテリセンス Update 2 CTP 2
- 136. Webサイトプロジェクトの TypeScript対応状況 • オプションで保存時コンパイルを有効に するとsource mapが生成されない – そのままではブレークポイントの設定等が できない – source mapの生成を行いたい場合は、コ マンドラインからコンパイルを行う • tsc.exe hoge.ts --sourcemap • source mapファイルさえできていれば tsファイルでデバッグ実行可能 Update 2 CTP 2
- 137. Windowsストアアプリプロジェクトの TypeScript対応状況 • プロジェクトテンプレートとしては TypeScript対応機能がビルトインされない – ファイルタイプの追加に出てこない – TypeScriptの自動ビルドが行われない • （規定では） • Professional以上は手動設定等で開発は可能 – 詳細は後述 • Expressは（現時点のUpdate 2 CTP 2では）対応が微妙過ぎる – 以前のバージョンで出来ていたことができなくなっている – 拡張子tsのファイルを追加するとエラーが出る場合もある – 不具合の可能性もあるのでRTWで修正されることを期待 Update 2 CTP 2
- 138. Windowsストアアプリプロジェクトの TypeScript対応状況 • Professional以上は手動設定等で開発は 可能 – 手動でファイルを追加 – オプション設定の変更で自動コンパイル • もしくは手動コンパイル • プロジェクトファイルの設定変更でも行ける かも？ – 以前は出来たがUpdate 2 CTP 2では未確認 – テキストエディタは対応 • シンタックスハイライト • インテリセンス Update 2 CTP 2
- 139. Windowsストアアプリプロジェクトの TypeScript対応状況 • どちらにせよ… • Update 2 CTP 2ではTypeScriptでのストアアプ リ開発は少し微妙な雰囲気 • 本格利用はちょっと待っても良いかも – きっとそのうち正式に対応するハズ • 多分… • こちらのMSDNマガジンの記事も参照 – 詳細はこちらの記事を参照 • http://msdn.microsoft.com/ja- jp/magazine/dn201754.aspx • 特に『Visual Studio の TypeScript 用オプション』の 項は目を通しておくと良いかも？ Update 2 CTP 2
- 141. Web Essentialsについて • VS拡張のWeb Essentialsが便利 – Webに関するかなり便利な拡張機能集 • VSでWeb関連の開発を行うなら必須 – http://vswebessentials.com/ • TypeScript関連機能もある – Web Essentials 2013 v1.9時点のTypeScript関連機能 • Preview windowによりtsとjsを並べて表示 • Custom regions • 等々 – 詳細はこちら • http://vswebessentials.com/features/typescript • 注意：Update 2 CTP 2 の対応 – Web Essentials 2013 v1.9ではCTP2に未対応 – Nightly Buildで対応 • Web Essentials 2013 のNightly Buildの導入は下記を参照 • http://vswebessentials.com/download Update 2 CTP 2 v 1.9
- 142. デプロイについて • プロジェクトのデプロイ機能 – VS2013 Update 2 CTP 2での対応 • Webアプリプロジェクト • TypeScriptアプリプロジェクト – TypeScriptを意識したデプロイをする • tsファイルを含めない • jsファイルを含める – MSBuildをカスタマイズすれば.mapをデ プロイパッケージに含めるとかも多分でき る – はず。きっと。 Update 2 CTP 2
- 143. MSBuildのパラメータとか • （このあたりは殆ど個人的メモ） –プロジェクトファイル等で参照してい る既定のMSBuildのプロパティ等はこの あたりのパスの下にある • C:¥Program Files (x86)¥MSBuild¥Microsoft¥VisualStudio¥v 12.0¥TypeScript Update 2 CTP 2
- 144. Visual Studio Online (monaco) • ブラウザだけでTypeScriptの開発と ホストが可能 • 興味がある方はこちら参照 –http://kiyokura.hateblo.jp/entry/2014 /02/18/213150