![動的型付けから静的型付けへ
TypeScript Type System
• 静的型付けシステムの導入
• JavaScript のあいまいさを排除
• 安全性・可読性・生産性の向上 interface I { }
class C { }
• 型付けするか否かは自由 module M { }
• 動的型付けの利点も生かせる { s: string; }
number[]
() => bool
• any 型: すべての型の基本
• プリミティブ (基本) 型
• number, string, bool, null, undefined
• オブジェクト型
• class, module, interface
• void 型: 戻り値なしの関数で使用](https://image.slidesharecdn.com/vs2012-webseminar20130316p-130316090604-phpapp02/85/Visual-Studio-2012-Web-One-ASP-NET-TypeScript-30-320.jpg)
![クラスとモジュール
TypeScript Classes and Modules
• モジュール化の利点 interface I { }
• 疎結合化と相互影響の低減、再利用性の向上 class C { }
module M { }
• デバッグ、テスト、メンテナンスの容易性 { s: string; }
• 大規模開発への対応 number[]
() => bool
• ECMAScript 6 (草案) ベースの実装
• Class, Module, Arrow Function 構文
• オブジェクト指向プログラミングの導入
• ポピュラーなモジュールシステムもサポート (External Modules)
• CommonJS / AMD modules](https://image.slidesharecdn.com/vs2012-webseminar20130316p-130316090604-phpapp02/85/Visual-Studio-2012-Web-One-ASP-NET-TypeScript-32-320.jpg)
Visual Studio 2012 Web 開発 ～ One ASP.NET から TypeScript まで ～
- 1. Visual Studio 2012 Web 開発 ～ One ASP.NET から TypeScript まで ～ 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章 (いのうえ あきら) http://aka.ms/chack twitter.com/chack411
- 2. セッションのゴール Session Takeaways • Visual Studio 2012 の Web 開発新機能 を学ぶ • Web 開発の最新情報 を知る
- 3. アジェンダ Visual Studio 2012 Web Developments • Web 技術トレンドと ASP.NET • マルチデバイス エクスペリエンス • モダン Web アプリケーションとアーキテクチャの変化 • TypeScript • サービス連携とクライアント実装 • Web 開発をサポートする Visual Studio 2012 • まとめ ～ Visual Studio 2012 Web 開発の今後 ～
- 5. Productivity Future Vision 近未来の IT, Cloud, Web ... • 不可欠な Web 技術 (HTTP 1.1, HTML5, CSS3 ...) • Web API の進化と普及 (REST, JSON ...) • サーバー ロジック と クライアント UI の疎結合 • クライアント側実装の多様化 • HTML5, CSS3, ECMAScript 5 • マルチデバイス (PC, Tablet, Mobile …) • レスポンシブ Web デザイン
- 6. アプリ開発のための "Web 技術" マルチデバイス エクスペリエンスと Web 技術 • HTML5 / CSS3 • クロス プラットフォームにおける共通 UI マークアップ • JavaScript • 第一級のプログラミング言語としての進化と普及 • JavaScript ライブラリの普及やサーバー サイドへの応用 • Web API • 進む HTTP サービス (REST API) の利用と開発ニーズ • ネイティブ アプリ開発への応用 • Windows ストア アプリ開発 (WinRT, WinJS) • PhoneGap, Titanium ...
- 8. One ASP.NET ASP.NET Web Stack ※ One ASP.NET - Making JSON Web APIs with ASP.NET MVC 4 Beta and ASP.NET Web API : www.hanselman.com
- 9. http://nuget.org/ • NuGet (ぬげっと / にゅーげっと) – オープンソース ライブラリなどのパッケージ管理の 仕組み（インストール、更新、配布） – Visual Studio や WebMatrix などで標準採用 – NuGet ギャラリーを利用したパッケージの公開が可能
- 10. オープン ソース Git on CodePlex • 対象ソース コード • ASP.NET MVC 4 • Web API • Web Pages (Razor) • 開発への貢献 • Apache License 2.0 の元で公開 • Web または Git にて参照可能 • フィードバック、バグ修正、 新機能提案のサブミット • マイクロソフトのサポート • 製品としてサポートは継続 http://aspnetwebstack.codeplex.com/ • 開発チームによる厳格なレビュー
- 11. ASP.NET Web フォーム Improvements of ASP.NET Web Forms 豊富なサーバー コントロール イベント駆動型プログラミング • HTML5 対応プロジェクト テンプレート • NuGet パッケージ マネージャー対応 • URL ルーティング • モデル バインディング • 強く型付けされたデータ コントロール
- 12. ASP.NET MVC 4 Improvements of ASP.NET MVC 4 HTML ベースの UI 開発 Model-View-Controller パターン • HTML5 対応プロジェクト テンプレート • モバイル アプリケーション テンプレート • Display Modes とビューの切り替え • スクリプトの自動縮小化 & 結合処理 • Task, async, await による非同期アクション • Task-based Asynchronous Pattern (TAP)
- 13. マルチデバイス エクスペリエンス
- 14. マルチデバイス エクスペリエンス Devices, Platforms, Browsers • クロス デバイス • PC, スマートフォン, タブレット ... • クロス プラットフォーム • iOS, Android, Windows ... • クロス ブラウザー • Web 標準と HTML5 / CSS3 • 実装レベル差異への対応
- 15. レスポンシブ Web デザイン Mobile Web Experience • CSS3 メディア クエリによるスタイルとレイアウト変更 • デザイン中心のマルチデバイス対応手法 • 共通した HTML マークアップによる UI エクスペリエンスの提供
- 16. jQuery Mobile スマートフォン対応 UI ライブラリ • ASP.NET MVC モバイル アプリケーション テンプレート
- 17. モバイル デバイス判別とビューの切り替え モバイル デバイスへの対応 • ASP.NET MVC 4 Display Modes によるモバイル デバイスの判別 • モバイル向けビュー (*.mobile.*) へ自動切り替え
- 18. マルチデバイス対応手法の選択 Design and Mobile Experience • レスポンシブ Web • デザイン重視 • デスクトップとスマートフォンで共通した Web サイトの提供 • jQuery Mobile • タッチ操作重視 • スマートフォンに特化した Web サイトの提供 • デバイス判別とビューの切り替え • デバイス毎に最適化した Web サイトの提供
- 19. モダン Web アプリケーションと アーキテクチャの変化
- 20. モダン Web アプリ エクスペリエンス Single Page Application Architecture ASP.NET HTML View HTTP Async View Model REST Web API JSON クライアント XML サーバー
- 21. Project Silk and Liike Project Silk (シルク) Client-Side Web Development for Modern Browsers モダン ブラウザのための クライアント サイド Web 開発ガイダンス http://silk.codeplex.com/ Project Liike (リーケ) Building Modern Mobile Web Apps モダン モバイル ブラウザのための クライアント サイド Web 開発ガイダンス http://msdn.microsoft.com/en-us/library/hh994907
- 22. シングル ページ アプリケーション Single Page Application (SPA) • 特徴 • 単一ページ構成のクライアント中心実装 SPA • 優れた Web UX とマルチデバイス対応 • JavaScript, Web API や HTML5 を活用
- 23. シングル ページ アプリケーション構成 Single Page Application (SPA) /Home/Index HTML, CSS Web UI /Home/Index HTML/CSS/JS Todo List MVC 4 Todo Item Data Services /api/todolist jQuery*.js JSON/XML knockout.js /api/todo Web API Entity Framework クライアント サーバー
- 24. "JavaScript is the Assembly Language of the Web" by Scott Hanselman.
- 25. JavaScript (ECMAScript 3) の課題点など Problems of JavaScript • 大規模開発になるほどコードが複雑に • デバッグ・テスト工数の増加 • プロトタイプベース OO 言語 • 変数スコープのへの理解 • 静的な型指定が不要 • ...
- 26. TypeScript Any browser. Any host. Any OS. Open Source.
- 27. TypeScript Any browser. Any host. Any OS. Open Source. • JavaScript (ECMAScript 5) のスーパーセットとなる 新しいプログラミング言語 (現在は 0.8.3 Preview) • TypeScript コードは JavaScript コードへコンパイル • コンパイラも TypeScript で書かれている (tsc.ts → tsc.js) • 静的型付け、クラス、モジュールをサポート class Point { x: number; • ECMAScript 6 (草案) をベース y: number; constructor(x: number, y: number) { this.x = x; • コンパイラー及び開発環境 } this.y = y; • Visual Studio 2012 プラグイン dist() { return Math.sqrt( http://go.Microsoft.com/fwlink/?LinkID=266563 this.x * this.x + this.y * this.y ); • Node.js Package Manager (npm) } static origin = new Point(0, 0); • WebMatrix 2 }
- 28. TypeScript : 2 つの入り口 Official Web Sites www.typescriptlang.org typescript.codeplex.com クイック スタート ソースコード サンプル ドキュメント
- 30. 動的型付けから静的型付けへ TypeScript Type System • 静的型付けシステムの導入 • JavaScript のあいまいさを排除 • 安全性・可読性・生産性の向上 interface I { } class C { } • 型付けするか否かは自由 module M { } • 動的型付けの利点も生かせる { s: string; } number[] () => bool • any 型: すべての型の基本 • プリミティブ (基本) 型 • number, string, bool, null, undefined • オブジェクト型 • class, module, interface • void 型: 戻り値なしの関数で使用
- 31. 静的型付け記述例 (プリミティブ型) TypeScript Type System Example // Any // Boolean var x: any; // 明示的 var b: bool; // 明示的 var y; // y: any と同じ var yes = true; // yes: bool = true と同じ var z: { a; b; }; // z: { a: any; b: any; } と同じ var no = false; // no: bool = false と同じ function f(x) { // f(x: any): void と同じ console.log(x); // Number } var x: number; // 明示的 var y = 0; // y: number と同じ var z = 123.456; // z: number = 123.456 と同じ // Null var n: number = null; // 基本型は Null 設定可 var x = null; // x: any = null と同じ // String var s: string; // 明示的 var empty = “”; // empty: string = “” と同じ // Undefined var abc = ‘abc’; // abc: string = “abc” と同じ var n: number; // n: number = undefined と同じ var x = undefined; // x: any = undefined と同じ
- 32. クラスとモジュール TypeScript Classes and Modules • モジュール化の利点 interface I { } • 疎結合化と相互影響の低減、再利用性の向上 class C { } module M { } • デバッグ、テスト、メンテナンスの容易性 { s: string; } • 大規模開発への対応 number[] () => bool • ECMAScript 6 (草案) ベースの実装 • Class, Module, Arrow Function 構文 • オブジェクト指向プログラミングの導入 • ポピュラーなモジュールシステムもサポート (External Modules) • CommonJS / AMD modules
- 33. Interface, Class, Module 記述例 TypeScript Interface, Classes and Modules Example // Interface // Class interface Mover { class Greeter { move(): void; greeting: string; getStatus(): { speed: number; }; constructor (message: string) { } this.greeting = message; } interface Shaker { greet() { shake(): void; return "Hello, " + this.greeting; getStatus(): { frequency: number; }; } } } interface MoverShaker extends Mover, Shaker { var greeter = new Greeter(“world”); getStatus(): { speed: number; greeter.greet(); frequency: number; }; } // Module (Internal) interface Person { module Sayings { FullName: string; export class Greeter { Age: number; ... } } function greeter(person: Person) { } } var greeter = new Sayings.Greeter("world");
- 34. "No one writes JavaScript anymore. They write jQuery."
- 35. 型定義ファイル: *.d.ts Typing for Libraries • 各種ライブラリの変数, オブジェクト, API の定義ファイル • *.d.ts として環境毎に定義される • 現在用意されている主な定義ファイル (TypeScript Source Code より) • lib.d.ts – ECMAScript APIs, DOM APIs ... • jquery.d.ts – jQuery • jqueryui.d.ts – jQuery UI • winjs.d.ts – WinJS • winrt.d.ts – WinRT • node.d.ts – node.js • 下記、定義ファイル リポジトリ でも多数公開されている https://github.com/borisyankov/DefinitelyTyped • その他、NuGet ギャラリーからも入手可能
- 36. TypeScript で jQuery を使う Typing for the jQuery • TypeScript ソースコードなどから jquery.d.ts を入手 • typings¥jquery.d.ts または samples¥jquery¥jquery.d.ts • *.ts ファイルに jquery.d.ts 参照を追加 /// <reference path="jquery.d.ts" /> ... • インテリセンス (コード補完) も有効 (Visual Studio 2012)
- 37. TypeScript ロードマップ Compiler and Language Improvements • 0.9.x • Generics • Improve compiler performance • Improvements to type system to help model a larger variety of JS libraries • Align with ECMAScript 6 • Usability improvements to VS plugin • 1.x • Async/Await, Mixins, Protected access • ES6-compatible codegen
- 39. ASP.NET Web API New Framework for HTTP Services RESTful サービス構築のためのフレームワーク MVC 4 プロジェクト テンプレートの一部として提供 • URL ルーティング • モデル バインディング • スキャフォールディング (w/ Entity Framework) • OData クエリパラメータ (Microsoft.AspNet.WebApi.Odata)
- 40. ASP.NET SignalR Async library for .NET リアルタイム・非同期・双方向通信ライブラリ NuGet パッケージとして提供 • クライアント - サーバー間の永続的コネクション • トランスポートの自動ネゴシエーション • WebSocket, Server-Sent Events, Forever Frames, Long Polling • サーバーからクライアントへのプッシュや RPC 通信 • 1 サーバーあたり数千の接続を非同期で処理
- 41. Demo: SignalR ShootR ShootR http://signalrshootr.cloudapp.net/
- 42. センサー クラウド with ASP.NET センサー デバイス必須のクラウド コンピューティング時代へ • クラウド コンピューティング • サーバー サイドでの利用からクライアント サイドでの利用へ • センサーが生み出すデータの活用とクラウド連携 • GPS 位置情報, ジャイロ, 温度, 湿度 ... • クラウド連携による無限の可能性 • 通信インフラの進化と普及 • 高速ネットワーク • 常時オンライン Productivity Future Vision http://www.microsoft.com/office/vision/
- 43. バーチャル WMM w/ Kinect on Cloud Kinect with ASP.NET SignalR and Windows Azure HTTP HTTP Cloud Services ASP.NET SignalR HTML5 Web .NET Console Application Application Azure Service Bus (or Redis) http://wmm.cloudapp.net/
- 44. Web 開発をサポートする Visual Studio 2012
- 45. コーディング支援機能 Improvements of Editors • インテリセンス・コード スニペットの強化 • HTML5 / CSS3 スキーマ対応 • 開始タグと終了タグの同期リネーム • CSS カラー ピッカー • ベンダー プレフィックスとメディア クエリー • ECMAScript 5 / HTML5 APIs サポート • アウトライン表示
- 46. さらに進化した Web 開発 IDE Improvements of Web Development • Page Inspector (ページ インスペクター) • HTML, CSS の確認と検査 • サーバー サイド コード連動 • ページのプレビュー • 画像のサムネイル表示 • デバッグ用ブラウザーの 切り替え機能
- 47. Web アプリのデバッグ Improvements of Debugging Tools • JavaScript コンソール • JavaScript エラーの確認 • 入力プロンプトによるスクリプト実行 • DOM Explorer • 対話形式の HTML, CSS の表示と操作 • IIS Express • 開発向けに最適化された軽量 Web サーバー • これまでの ASP.NET 開発サーバーに代わり既定で使用される
- 48. Web アプリのテスト Improvements of Testing Tools • JavaScript の単体テスト • Jasmine / QUnit をテスト エクスプローラーに統合可能 • 拡張機能: Chutzpah※ test adapter for Visual Studio 2012 • Web パフォーマンスとロード テストのプロジェクト • 容易なパフォーマンスとストレス テストの実施 • 同時アクセス ユーザー数や使用ブラウザーなどをシミュレート ※ フツパ
- 49. Web アプリの発行 Web Publishing Improvements • 発行時の Web.config の変換とプレビュー機能 • 変換前と変換後の Web.config を IDE で比較可能に • 容易になった Windows Azure への発行 • Windows Azure Web サイト, クラウド サービス • SQL データベースへのマイグレーション • TFS (Team Foundation Service) の利用 • TFS を利用したプロジェクト管理とソーシャル開発 • Windows Azure への発行と継続的インテグレーション
- 50. Visual Studio 2012 Web 開発の今後
- 51. Web アプリ開発のトレンド これからの Web アプリケーションで考えなければならないこと • マルチデバイス対応 • Web アプリか？ ネイティブ アプリか？ • HTTP 通信ペイロード削減 • レスポンシブ Web デザイン • デザイン・開発ツールの選択 • モダン Web アプリケーション • Single Page Application (SPA) アーキテクチャ • AJAX 処理における SEO 対策やブラウザ履歴管理やオフライン実行への対応 • HTTP REST サービス (Web API) • リアルタイム コミュニケーション
- 52. One ASP.NET ASP.NET Web Stack
- 55. © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.