TypeScript ファースト ステップ                         (Rev.2)~ Any browser. Any host. Any OS. Open Source. ~日本マイクロソフト株式会社デベロッパー & ...
セッションのゴールSession Takeaways  JavaScript と Web 技術のこれまで を振り返る  TypeScript の全体像 を学ぶ
アプリ開発のための    Web 技術
アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)
アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)
アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)     .hoge {         color: red;         background-color: #b6...
アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)     Memory        Graphics                       Storage     ...
"JavaScript is theAssembly Language of the Web"                    by Scott Hanselman.
JavaScript      (ECMAScript 3)   の課題点などProblems of JavaScript• 大規模開発になるほどコードが複雑に• デバッグ・テスト工数の増加• プロトタイプベース OO 言語• 変数スコープのへ...
TypeScriptAny browser. Any host. Any OS. Open Source.
TypeScriptAny browser. Any host. Any OS. Open Source.• JavaScript (ECMAScript 5) のスーパーセットとなる 新しいプログラミング言語 (現在は 0.8.3 Previ...
TypeScript : 2 つの入り口Official Web Sites www.typescriptlang.org   typescript.codeplex.com     クイック スタート                 ソースコ...
TypeScript : Playgroundブラウザベースで手軽に体験
TypeScript の開発環境 #1Compiler and Development Tool  • node.js パッケージ (npm)    • node.js のインストール: http://nodejs.org/    • Type...
TypeScript の開発環境 #2Compiler and Development Tool  • WebMatrix 2 (http://www.microsoft.com/web/)    • 拡張機能ギャラリーから “TypeScri...
TypeScript の開発環境 #3Compiler and Development Tool  • TypeScript for Visual Studio 2012 (VS プラグイン)    • http://go.microsoft....
TypeScript Type System
動的型付けから静的型付けへTypeScript Type System• 静的型付けシステムの導入  • JavaScript のあいまいさを排除  • 安全性・可読性・生産性の向上                         interf...
静的型付け記述例                                 (プリミティブ型)TypeScript Type System Example// Any                                    ...
TypeScript Classes, Modules
クラスとモジュールTypeScript Classes and Modules• モジュール化の利点                                interface I { }  • 疎結合化と相互影響の低減、再利用性の向上 ...
Interface, Class, Module 記述例TypeScript Interface, Classes and Modules Example// Interface                                 ...
TypeScript with jQuery
"No one writes JavaScript anymore.They write jQuery."
型定義ファイル: *.d.tsTyping for Libraries• 各種ライブラリの変数, オブジェクト, API の定義ファイル • *.d.ts として環境毎に定義される • 現在用意されている主な定義ファイル (TypeScript...
TypeScript で jQuery を使うTyping for the jQuery• TypeScript ソースコードなどから jquery.d.ts を入手 • typings¥jquery.d.ts または samples¥jque...
Roadmap & Summary
TypeScript ロードマップCompiler and Language Improvements• 0.9.x  • Generics  • Improve compiler performance  • Improvements to ...
まとめ: TypeScriptSummaryWeb アプリケーションをスケールさせるために ... • JavaScript 開発の必要性 • JavaScript の OOP やモジュール化への対応 • デバッグ・テスト工数の削減 • C#,...
まとめ: TypeScriptSummaryWeb アプリケーションをスケールさせるために ...               TypeScript          Any browser. Any host. Any OS. Open So...
関連リソースResources•   Welcome to TypeScript    •   http://www.typescriptlang.org/•   TypeScript Home: CodePlex    •   http://...
Enjoy coding, Be happy with TypeScript.
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~

3,630

Published on

TypeScript 0.8.3 対応版です。

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,630
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~

  1. 1. TypeScript ファースト ステップ (Rev.2)~ Any browser. Any host. Any OS. Open Source. ~日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部エバンジェリスト井上 章 (いのうえ あきら)blogs.msdn.com/chack twitter.com/chack411
  2. 2. セッションのゴールSession Takeaways  JavaScript と Web 技術のこれまで を振り返る  TypeScript の全体像 を学ぶ
  3. 3. アプリ開発のための Web 技術
  4. 4. アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)
  5. 5. アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)
  6. 6. アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript) .hoge { color: red; background-color: #b6ff00; border-radius: 8px; }
  7. 7. アプリケーション プラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript) Memory Graphics Storage Security Memory Management Subsystems Graphics Storage Cookies, Security SSL, Sandbox, Subsystems Management HTML, CSS, Canvas, Garbage Collection Web GL, Audio, Video IndexedDb, File API CORS Threading Threading Events Events Network Networking APIs APIs Web Workers DOM Events, WebSockets, XHR, GeoLocation, Callbacks Offline, Realtime Sensors
  8. 8. "JavaScript is theAssembly Language of the Web" by Scott Hanselman.
  9. 9. JavaScript (ECMAScript 3) の課題点などProblems of JavaScript• 大規模開発になるほどコードが複雑に• デバッグ・テスト工数の増加• プロトタイプベース OO 言語• 変数スコープのへの理解• 静的な型指定が不要• ...
  10. 10. TypeScriptAny browser. Any host. Any OS. Open Source.
  11. 11. TypeScriptAny 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 }
  12. 12. TypeScript : 2 つの入り口Official Web Sites www.typescriptlang.org typescript.codeplex.com クイック スタート ソースコード サンプル ドキュメント
  13. 13. TypeScript : Playgroundブラウザベースで手軽に体験
  14. 14. TypeScript の開発環境 #1Compiler and Development Tool • node.js パッケージ (npm) • node.js のインストール: http://nodejs.org/ • TypeScript のインストール: • TypeScript のコンパイル: • TypeScript コンパイラの実体 • … ¥npm¥node_modules¥typescript¥bin¥tsc.js
  15. 15. TypeScript の開発環境 #2Compiler and Development Tool • WebMatrix 2 (http://www.microsoft.com/web/) • 拡張機能ギャラリーから “TypeScript Tools” をインストール
  16. 16. TypeScript の開発環境 #3Compiler and Development Tool • TypeScript for Visual Studio 2012 (VS プラグイン) • http://go.microsoft.com/fwlink/?LinkID=266563 ※ Visual Studio Express 2012 for Web でも利用可能 • プロジェクト テンプレート • [新しいプロジェクト] – [TypeScript] – [HTML Application with TypeScript] • 新しい項目の追加 • [新しい項目...] – [Visual C#] – [TypeScript File] VS 拡張機能: Web Essentials 2012 で プレビュー (分割ウィンドウ) が利用可能
  17. 17. TypeScript Type System
  18. 18. 動的型付けから静的型付けへTypeScript Type System• 静的型付けシステムの導入 • JavaScript のあいまいさを排除 • 安全性・可読性・生産性の向上 interface I { } class C { } • 型付けするか否かは自由 module M { } • 動的型付けの利点も生かせる { s: string; } number[] () => bool• any 型: すべての型の基本• プリミティブ (基本) 型 • number, string, bool, null, undefined• オブジェクト型 • class, module, interface• void 型: 戻り値なしの関数で使用
  19. 19. 静的型付け記述例 (プリミティブ型)TypeScript Type System Example// Any // Booleanvar 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 と同じ// Nullvar 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 と同じ
  20. 20. TypeScript Classes, Modules
  21. 21. クラスとモジュール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
  22. 22. Interface, Class, Module 記述例TypeScript Interface, Classes and Modules Example// Interface // Classinterface 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");
  23. 23. TypeScript with jQuery
  24. 24. "No one writes JavaScript anymore.They write jQuery."
  25. 25. 型定義ファイル: *.d.tsTyping 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 ギャラリーからも入手可能
  26. 26. 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)
  27. 27. Roadmap & Summary
  28. 28. 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
  29. 29. まとめ: TypeScriptSummaryWeb アプリケーションをスケールさせるために ... • JavaScript 開発の必要性 • JavaScript の OOP やモジュール化への対応 • デバッグ・テスト工数の削減 • C#, Java などの知識を生かした JavaScript 開発
  30. 30. まとめ: TypeScriptSummaryWeb アプリケーションをスケールさせるために ... TypeScript Any browser. Any host. Any OS. Open Source.
  31. 31. 関連リソースResources• Welcome to TypeScript • http://www.typescriptlang.org/• TypeScript Home: CodePlex • http://typescript.codeplex.com/• TypeScript Language Specification • http://go.microsoft.com/fwlink/?LinkId=267121• Build 2012: Introducing TypeScript: A language for application-scale JavaScript development • http://channel9.msdn.com/Events/Build/2012/3-012• 日本 TypeScript ユーザー会 • https://groups.google.com/forum/#!forum/typescript-japan• Facebook: TypeScript グループ (wTypeScript) • https://www.facebook.com/groups/wTypeScript/
  32. 32. Enjoy coding, Be happy with TypeScript.
  33. 33. © 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 acommitment 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 INTHIS PRESENTATION.
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×