Downloaded 78 times
![コンパイラの実行
• オプション設定の変更で
保存時コンパイル
– [ツール] - [オプション] - [テキスト エディター] -
[TypeScript] - [プロジェクト]
– ［保存時にコンパイル］をチェック](https://image.slidesharecdn.com/visualstudiotypescript-140322014145-phpapp01/85/Visual-Studio-TypeScript-71-320.jpg)
Uploaded byNarami Kiyokura
Visual Studioで始めるTypeScript開発入門
MVP Copmmunity Camp 2014 広島会場の同名セッションの発表資料 当日のUst録画： 前半 ： http://www.ustream.tv/recorded/45150865 後半 ： http://www.ustream.tv/recorded/45152045
More Related Content
Similar to Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
- 1. Visual Studioで始める TypeScript開発入門！ きよくら ならみ 2014.03.22 MVPCommunity Camp 2014
- 2. 自己紹介 • きよくら ならみ –@kiyokura – http://kiyokura.hateblo.jp/ • 岡山生まれ岡山育ちのプログラマー – 現在は県内の某製造業で社内SE • NET系の開発やWebアプリ開発 – Microsoft MVP for ASP.NET/IIS
- 3. • Okayama ITEngineers Community – 通称OITECの運営スタッフ – 主にMS系のテクノロジを扱う勉強会など を、岡山で開催しています – site: oitec.vbstation.net • オープンラボ岡山 – 去年から主宰を引き継ぎました – 岡山でノンジャンルの技術系勉強会を開催 – site: olojp.net コミュニティ
- 4. 本セッションの目的 • TypeScriptの概要を知っていただく • VisualStudioを使ってTypeScriptの 開発・学習を行うための基礎知識を 知っていただく
- 5. 本セッションのゴール • TypeScriptの概要を知る • VisualStudioでTypeScriptをどのよ うに扱えるのかを知っていただく
- 6. 免責事項 • 本セッションは私、きよくらならみ個人 が調査・検証をした結果を発表するもの です • マイクロソフトおよびTypeScript開発者 コミュニティ等の公式の見解ではござい ません •万一本資料の記述の誤りに起因する損害 が生じた場合においても、発表者はその 責任を負いません 重要
- 7. バージョンについて • 本セッションの内容は、後述する、正式 版ではないバージョンのソフトウェアを もとにしたものです。 – 正式版やそれ以降のバージョンでは変更に なる可能性があります。 •検証に使用したバージョン – Visual Studio 2013 Update 2 CTP 2 – TypeScript 1.0 RC 重要
- 8. アジェンダ • TypeScript概要 • TypeScripton Visual Studio • まとめ • リソース・補足等
- 9.
- 10.
- 11. TypeScriptとは • プログラミング言語です • どんな言語？ •このパートでは、まず端的な特徴を お話ししたいと思います
- 12.
- 13. オフィシャルサイト曰く • TypeScript isa 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 isa language for application-scale JavaScript development
- 15.
- 16.
- 17. application-scale？ • （私の解釈） • 見栄えの制御 •入力値の検証 • ビジネス ロジック • アプリ全体 の制御
- 18. 規模の増大で問題なりやすい点 • 曖昧でもなんとなく動く – 動的型 –暗黙のセミコロン補完 • スコープ – グローバル汚染 – ブロックスコープが無い • プロトタイプベース – 独特で理解しにくい
- 19.
- 20. 2nd sentence TypeScript isa typed superset of JavaScript that compiles to plain JavaScript
- 21.
- 22. JSのtypedなスーパーセット • JSと互換がある –学習コストが低い • 既存のJSの利用も可能 •静的型付け • ECMAScript 6thの仕様先取り
- 23.
- 24. 3rd sentence • Anybrowser. Any host. Any OS. Open Source.
- 25.
- 26. あらゆる環境で動く • 動作環境＝ JSの動作環境 –ブラウザ – Packaged Web Apps • Windowsストア / PhoneGap / etc... – プラットホーム • node.js / Windows Scripting Host / etc...
- 27. オープンソース • Apache License2.0 • CodePlexでホスト –typescript.codeplex.com –VCSはgit
- 28. TypeScript • JavaScriptによるアプリケーションス ケールの開発に対応する為に設計された 言語 • JavaScriptのスーパーセットであり、” 静的型付け”が大きな特徴 コンパイルによりJavaScriptを生成 •様々なブラウザやプラットホームで動作 またオープンソースである 超訳 by kiyokura
- 29. 作ってるのは？ • Microsoftによるプロダクト –でもオープンソース • あのAndersHejlsbergも 関わっている –Turbo Pascal / Delphi / C# from wikipedia
- 30.
- 31. 言語としての大まかな特徴 • 基本構文はJavaScript • 静的型 •型推論 • クラスベースのオブジェクト指向 • ジェネリックス • アロー関数式 • Structural Subtyping – …等々キリが無いので本セッションでは軽くこの程度で許 してください – 詳細はググるbingると色々素敵な解説が出てきます
- 32. ざっくりまとめると • JSで厳しかったあたりを克服 – 静的型付け •コンパイル時の型チェック • ジェネリックス – クラスベース・オブジェクト指向 • クラス • インタフェース • 継承 – モジュール • 名前空間的な
- 33. ざっくりまとめると • 簡潔さや柔軟性も – any –型推論 – Structural Subtyping – アロー関数式 • 既存資産やJSのスキルの活用 – JSのスーパーセット – ECMAScript 6仕様の先行実装
- 34.
- 35.
- 36. 開発環境 • 開発環境は無償で構築可能 –Visual Studio –node.jsで動くコンパイラ •お好みのエディタ • Eclipse + プラグイン –ブラウザ上で • 公式サイトのplay ground • Visual Studio Online（monaco）
- 37. 開発環境 • エディタ/IDEのサポート（nodeのコンパイラ利用） –Sublime Text(*) –vim –emacs –WebMatrix3 –WebStrom(*) –Eclipse（プラグイン） –Visual Studio Online（monaco） *製品自体は有償
- 38.
- 39.
- 40. ここからは… • Visual Studioを使って •TypeScript開発の第一歩を踏み出す • そのための情報を紹介します
- 41.
- 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. おことわり • ここから先は、原則として下記環境 • VisualStudio Express 2013 for Web – 有償版でも基本的に同じです • Visual Studio 2013 update 2 CTP 2 を適用 – 2014.03.20時点の最新
- 46. Visual Studio Express2013 for Web によるTypeScript 開発環境構築
- 47. 環境構築のステップ • Visual StudioExpress 2013 for Webのイ ンストール • Visual Studio 2013 Update 2 CTP 2の適 用 – あくまでもCTPです – 本番環境等への適用はご自身の判断で行っ てください • コンパイラへをPath環境変数に設定 – 必須ではありません • でもやっておくと便利
- 48. Visual Studio Express2013 for Web • ダウンロードしてインストール –http://www.microsoft.com/ja- jp/download/details.aspx?id=40747
- 49. Visual Studio 2013Update 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」になりそ う？
- 51.
- 52.
- 53. 対応するプロジェクトの種類 • TypeScriptプロジェクト • Webアプリケーションプロジェクト • 以下は現時点では微妙 –Webサイトプロジェクト –Windowsストアアプリプロジェクト
- 54.
- 55.
- 56. TypeScriptプロジェクト • TypeScript +HTML + CSS
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 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.
- 68.
- 69. コンパイラの実行 • 未対応のプロジェクト –以下のどれか • コマンドラインから手動コンパイル •オプション設定の変更で保存時コンパイル • ビルドスクリプトに記述してビルド時にコ ンパイル
- 70. コンパイラの実行 • コマンドラインから手動コンパイル –手動でtsc.exeを実行 • あらかじめパスを通しておくと良い •パッケージマネージャーコンソールお勧め –もちろんcmdでも良い • 例：「tsc.exe hoge.ts」
- 71. コンパイラの実行 • オプション設定の変更で 保存時コンパイル – [ツール]- [オプション] - [テキスト エディター] - [TypeScript] - [プロジェクト] – ［保存時にコンパイル］をチェック
- 72. コンパイラの実行 • ビルドスクリプトに記述して ビルド時にコンパイル – csproj/ vbproj に記述 – 詳細は割愛 • すみません、Update 2 CTP 2で検証ができて いません…… • Webサイトプロジェクトでは不可 – なので実質的にはWindow ストアアプリ プロジェクトの場合のみ
- 73. エディタの対応 • シンタックスハイライト • アウトライン表示・非表示 •intellisense • リアルタイムエラー検出 • コード間移動 • などなど。 – 他にもVS共通の機能として色々
- 74.
- 75.
- 76. intellisense • コード補完 • 型情報の表示 •ドキュメントコメントの表示
- 77.
- 78.
- 79. コード間移動 • 定義へ移動 – クラスや関数などの定義へ移動 •戻る／進む – 定義へ移動等で移動した履歴を辿る • 全ての参照の検索 – 該当の識別の参照をすべてピックアップ
- 80. Update 2 CTP2時点では • まだちょっと機能が弱い – 学習には十分だが • まだ実装が始まったばかりなので期待 – まだCommunity Technology Previewです – すぐにJavaScriptで利用できる機能くらいには実 装されるのではなか（希望的観測） • 有償版なら… – Web Essentialsも併用 – ReSharperも8.2で対応
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89. こんな時どうしよう？ • 自作のJSのコードを使いたい • 著名なJSライブライを使いたい •自作ライブラリでインテリセンスを 活用したい
- 90.
- 91. JSのコードを使いたい • "全ての JavaScriptは TypeScript" • 但しそのままでは通らないケースも –型情報が無い
- 92.
- 93. 1. TypeScriptに移植する • コンパイルが通るよう改変する •こんな時 –既存のコードの一部をtsに取り込む –.jsファイルを.tsファイル移植 • 今後もTypeScriptとしてメンテナン スするならこちらがオススメ
- 94. そのまま移植してみる • そのまま移植してみると… • *.jsを*.tsにリネーム •tsファイルにコードを張り付ける • 案外そのまま行けたりする –但し型推論できないところはanyになる • 引数は基本any
- 95.
- 96.
- 97.
- 98.
- 99.
- 100. 2. 型宣言のみを別途行う • 既存のJSに手を入れない –利用するTSのコンパイルを可能に •こんな時 –今後もJSとしてメンテナンスされる –外部製のJSライブラリを利用する場合 • JS自体に手を入れることが出来ない のであればこちら
- 101. 型宣言ファイルを利用する • 型宣言（型定義）ファイル –Declaration File –変数・関数などの宣言する –拡張子： .d.ts –C言語のヘッダファイルのイメージ
- 102.
- 103.
- 104.
- 105. 定宣言の参照 • tsファイルに宣言参照を追加 /// <referencepath="hoge.d.ts" />
- 106.
- 107. コンパイラの-dオプション • tcs.exeのd.tsを出力するオプション –"-d "または " --declaration" –コンパイル時にd.tsも出力する • これを利用
- 108. 手順 • 対象のjsファイルをコピーしておく • jsファイルの拡張子をtsに変える •-dオプションでコンパイル • 出来上がったd.tsファイルを編集
- 109.
- 110.
- 111.
- 112.
- 113.
- 114. 著名なライブラリを使う時は… • 公開されている 型宣言を利用する –有志によりgithubで公開されている • borisyankov/DefinitelyTyped • 今後は… – TypeScriptが普及するとオフィシャルに提 供されるケースが増えるかも？ • NuGetで公開されている場合も
- 115.
- 116.
- 117.
- 118. JSDoc形式で記述 • /** ～*/のJSDoc形式 vsdoc形式では無い点に注意
- 119. ただし… • VS2013 Update2 CTP 2では対応が微妙 – @param程度しかまともに機能していない？ – 今後の改善に期待 • ビルド後のJsにもjsdocは付加される – 但しvsのJavaScriptエディタも対応が今一つ • 一応、コメント全文がそのまま表示されるので意 味はある – 今後の改善に期待
- 120.
- 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.
- 127. JavaScript is AssemblyLanguage
- 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
- 129.
- 130.
- 131.
- 132.
- 133. Visual Studio 2013 Update2 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. 重要：情報を探すときは… • バージョンに注意！ – VisualStudio – 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対応状況 • どちらにせよ… • Update2 CTP 2ではTypeScriptでのストアアプ リ開発は少し微妙な雰囲気 • 本格利用はちょっと待っても良いかも – きっとそのうち正式に対応するハズ • 多分… • こちらのMSDNマガジンの記事も参照 – 詳細はこちらの記事を参照 • http://msdn.microsoft.com/ja- jp/magazine/dn201754.aspx • 特に『Visual Studio の TypeScript 用オプション』の 項は目を通しておくと良いかも？ Update 2 CTP 2
- 140.
- 141. Web Essentialsについて • VS拡張のWebEssentialsが便利 – 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. デプロイについて • プロジェクトのデプロイ機能 – VS2013Update 2 CTP 2での対応 • Webアプリプロジェクト • TypeScriptアプリプロジェクト – TypeScriptを意識したデプロイをする • tsファイルを含めない • jsファイルを含める – MSBuildをカスタマイズすれば.mapをデ プロイパッケージに含めるとかも多分でき る – はず。きっと。 Update 2 CTP 2
- 143. MSBuildのパラメータとか • （このあたりは殆ど個人的メモ） –プロジェクトファイル等で参照してい る既定のMSBuildのプロパティ等はこの あたりのパスの下にある • C:¥ProgramFiles (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