TypeScript ファースト ステップ
~ Any browser. Any host. Any OS. Open Source. ~
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (い...
セッションのゴール
Session Takeaways
 JavaScript と Web 技術のこれまで を振り返る
 TypeScript の全体像 を学ぶ
アプリ開発のための
Web 技術
モダン Web アプリ エクスペリエンス
Single Page Application Architecture
クライアント サーバー
Scripting
Engine
REST
JSON
XML
HTML
View
Model
HTTP
...
アプリ開発のための "Web 技術"
マルチデバイス エクスペリエンスと Web 技術
• HTML5 / CSS3
• クロス プラットフォームにおける共通 UI マークアップ
• JavaScript
• 第一級のプログラミング言語としての...
アプリケーション プラットフォームの変化
(Hardware + OS) ≒ (Browser + JavaScript)
アプリケーション プラットフォームの変化
(Hardware + OS) ≒ (Browser + JavaScript)
アプリケーション プラットフォームの変化
(Hardware + OS) ≒ (Browser + JavaScript)
.hoge {
color: red;
background-color: #b6ff00;
border-radius...
"JavaScript is the
Assembly Language of the Web"
by Scott Hanselman.
JavaScript (ECMAScript 3) の課題点など
Problems of JavaScript
• 大規模開発になるほどコードが複雑に
• デバッグ・テスト工数の増加
• プロトタイプベース OO 言語
• 変数スコープのへの理...
TypeScript
Any browser. Any host. Any OS. Open Source.
TypeScript
Any browser. Any host. Any OS. Open Source.
• JavaScript (ECMAScript 5) のスーパーセットとなる
新しいプログラミング言語 (現在は 0.9.0.1)
...
TypeScript : 2 つの入り口
Official Web Sites
www.typescriptlang.org typescript.codeplex.com
クイック スタート
サンプル
ソースコード
ドキュメント
TypeScript : Playground
ブラウザベースで手軽に体験
TypeScript の開発環境 #1
Compiler and Development Tool
• node.js パッケージ (npm)
• node.js のインストール: http://nodejs.org/
• TypeScript...
TypeScript の開発環境 #2
Compiler and Development Tool
• WebMatrix 3 (http://www.microsoft.com/web/)
• 拡張機能ギャラリーから “TypeScript ...
TypeScript の開発環境 #3
Compiler and Development Tool
• TypeScript for Visual Studio 2012 (VS プラグイン)
• http://go.microsoft.com...
TypeScript Type System
動的型付けから静的型付けへ
TypeScript Type System
• 静的型付けシステムの導入
• JavaScript のあいまいさを排除
• 安全性・可読性・生産性の向上
• 型付けするか否かは自由
• 動的型付けの利点も生かせる
...
静的型付け記述例 (プリミティブ型)
TypeScript Type System Example
// Any
var x: any; // 明示的
var y; // y: any と同じ
var z: { a; b; }; // z: {...
TypeScript Classes, Modules
クラスとモジュール
TypeScript Classes and Modules
• モジュール化の利点
• 疎結合化と相互影響の低減、再利用性の向上
• デバッグ、テスト、メンテナンスの容易性
• 大規模開発への対応
• ECMAScript...
Interface, Class, Module 記述例
TypeScript Interface, Classes and Modules Example
// Interface
interface Mover {
move(): void...
ジェネリクス の利用
Generics : Parameterized Types
• ジェネリクスの導入 (v.0.9)
• パラメータ化した型の利用
• Java, C#, C++ などの静的型付け言語では一般的
class Human<T...
TypeScript with jQuery
"No one writes JavaScript anymore.
They write jQuery."
型定義ファイル: *.d.ts
Typing for Libraries
• 各種ライブラリの変数, オブジェクト, API の定義ファイル
• *.d.ts として環境毎に定義される
• 現在用意されている主な定義ファイル (TypeScri...
TypeScript で jQuery を使う
Typing for the jQuery
• TypeScript ソースコードなどから jquery.d.ts を入手
• typings¥jquery.d.ts または samples¥jq...
Roadmap & Summary
TypeScript ロードマップ
Compiler and Language Improvements
• 0.9.0
• Generics
• Overload on constants
• "export ="
• Improve com...
まとめ: TypeScript
Summary
Web アプリケーションをスケールさせるために ...
• JavaScript 開発の必要性
• JavaScript の OOP やモジュール化への対応
• デバッグ・テスト工数の削減
• C...
まとめ: TypeScript
Summary
Web アプリケーションをスケールさせるために ...
TypeScript
Any browser. Any host. Any OS. Open Source.
関連リソース
Resources
• Welcome to TypeScript
• http://www.typescriptlang.org/
• TypeScript Home: CodePlex
• http://typescript....
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 ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Source. ~

2,246

Published on

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,246
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Source. ~

  1. 1. TypeScript ファースト ステップ ~ 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. モダン Web アプリ エクスペリエンス Single Page Application Architecture クライアント サーバー Scripting Engine REST JSON XML HTML View Model HTTP View Async Web API
  5. 5. アプリ開発のための "Web 技術" マルチデバイス エクスペリエンスと Web 技術 • HTML5 / CSS3 • クロス プラットフォームにおける共通 UI マークアップ • JavaScript • 第一級のプログラミング言語としての進化と普及 • JavaScript ライブラリの普及やサーバー サイドへの応用 • Web API • 進む HTTP サービス (REST API) の利用と開発ニーズ • ネイティブ アプリ開発への応用 • Windows ストア アプリ開発 (WinRT, WinJS) • PhoneGap, Titanium ...
  6. 6. アプリケーション プラットフォームの変化 (Hardware + OS) ≒ (Browser + JavaScript)
  7. 7. アプリケーション プラットフォームの変化 (Hardware + OS) ≒ (Browser + JavaScript)
  8. 8. アプリケーション プラットフォームの変化 (Hardware + OS) ≒ (Browser + JavaScript) .hoge { color: red; background-color: #b6ff00; border-radius: 8px; }
  9. 9. "JavaScript is the Assembly Language of the Web" by Scott Hanselman.
  10. 10. JavaScript (ECMAScript 3) の課題点など Problems of JavaScript • 大規模開発になるほどコードが複雑に • デバッグ・テスト工数の増加 • プロトタイプベース OO 言語 • 変数スコープのへの理解 • 静的な型指定が不要 • ...
  11. 11. TypeScript Any browser. Any host. Any OS. Open Source.
  12. 12. TypeScript Any browser. Any host. Any OS. Open Source. • JavaScript (ECMAScript 5) のスーパーセットとなる 新しいプログラミング言語 (現在は 0.9.0.1) • TypeScript コードは JavaScript コードへコンパイル • コンパイラも TypeScript で書かれている (tsc.ts → tsc.js) • 静的型付け、クラス、モジュールをサポート • ECMAScript 6 (草案) をベース • コンパイラー及び開発環境 • Visual Studio 2012 プラグイン http://go.Microsoft.com/fwlink/?LinkID=266563 • Node.js Package Manager (npm) • WebMatrix 3 class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } dist() { return Math.sqrt( this.x * this.x + this.y * this.y ); } static origin = new Point(0, 0); }
  13. 13. TypeScript : 2 つの入り口 Official Web Sites www.typescriptlang.org typescript.codeplex.com クイック スタート サンプル ソースコード ドキュメント
  14. 14. TypeScript : Playground ブラウザベースで手軽に体験
  15. 15. TypeScript の開発環境 #1 Compiler and Development Tool • node.js パッケージ (npm) • node.js のインストール: http://nodejs.org/ • TypeScript のインストール: • TypeScript のコンパイル: • TypeScript コンパイラの実体 • … ¥npm¥node_modules¥typescript¥bin¥tsc.js
  16. 16. TypeScript の開発環境 #2 Compiler and Development Tool • WebMatrix 3 (http://www.microsoft.com/web/) • 拡張機能ギャラリーから “TypeScript Tools” をインストール
  17. 17. TypeScript の開発環境 #3 Compiler 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 で プレビュー (分割ウィンドウ) が利用可能
  18. 18. TypeScript Type System
  19. 19. 動的型付けから静的型付けへ TypeScript Type System • 静的型付けシステムの導入 • JavaScript のあいまいさを排除 • 安全性・可読性・生産性の向上 • 型付けするか否かは自由 • 動的型付けの利点も生かせる • any 型: すべての型の基本 • プリミティブ (基本) 型 • number, string, boolean, null, undefined, enum • オブジェクト型 • class, module, interface • void 型: 戻り値なしの関数で使用 interface I { } class C { } module M { } { s: string; } number[] () => boolean
  20. 20. 静的型付け記述例 (プリミティブ型) TypeScript Type System Example // Any var x: any; // 明示的 var y; // y: any と同じ var z: { a; b; }; // z: { a: any; b: any; } と同じ 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 と同じ // Boolean var b: boolean; // 明示的 var yes = true; // yes: boolean = true と同じ var no = false; // no: boolean = false と同じ // String var s: string; // 明示的 var empty = “”; // empty: string = “” と同じ var abc = ‘abc’; // abc: string = “abc” と同じ // Null var n: number = null; // 基本型は Null 設定可 var x = null; // x: any = null と同じ // Undefined var n: number; // n: number = undefined と同じ var x = undefined; // x: any = undefined と同じ // Enum enum Color { Red, Green, Blue } var myColor = Color.Red; Console.log(Color[myColor]); // Red
  21. 21. TypeScript Classes, Modules
  22. 22. クラスとモジュール TypeScript Classes and Modules • モジュール化の利点 • 疎結合化と相互影響の低減、再利用性の向上 • デバッグ、テスト、メンテナンスの容易性 • 大規模開発への対応 • ECMAScript 6 (草案) ベースの実装 • Class, Module, Arrow Function 構文 • オブジェクト指向プログラミングの導入 • ポピュラーなモジュールシステムもサポート (External Modules) • CommonJS / AMD modules interface I { } class C { } module M { } { s: string; } number[] () => bool
  23. 23. Interface, Class, Module 記述例 TypeScript Interface, Classes and Modules Example // Interface interface Mover { move(): void; getStatus(): { speed: number; }; } interface Shaker { shake(): void; getStatus(): { frequency: number; }; } interface MoverShaker extends Mover, Shaker { getStatus(): { speed: number; frequency: number; }; } interface Person { FullName: string; Age: number; } function greeter(person: Person) { } // Module (Internal) module Sayings { export class Greeter { ... } } var greeter = new Sayings.Greeter("world"); // Class class Greeter { greeting: string; constructor (message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter(“world”); greeter.greet();
  24. 24. ジェネリクス の利用 Generics : Parameterized Types • ジェネリクスの導入 (v.0.9) • パラメータ化した型の利用 • Java, C#, C++ などの静的型付け言語では一般的 class Human<T> { constructor(public name: T) { } Talk(): T { return this.name; } } var me = new Human<string>("Taro Yamada"); alert(me.Talk()); interface A { a: string; } interface B extends A { b: string; } interface C extends B { c: string; } interface G<T, U extends B> { x: T; y: U; } var v1: G<A, C>; // Ok var v2: G<{ a: string }, C>; // Ok var v3: G<A, A>; // Error var v4: G<G<A, B>, C>; // Ok var v5: G<any, any>; // Ok var v6: G<any>; // Error var v7: G; // Error
  25. 25. TypeScript with jQuery
  26. 26. "No one writes JavaScript anymore. They write jQuery."
  27. 27. 型定義ファイル: *.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 ギャラリーからも入手可能
  28. 28. TypeScript で jQuery を使う Typing for the jQuery • TypeScript ソースコードなどから jquery.d.ts を入手 • typings¥jquery.d.ts または samples¥jquery¥jquery.d.ts • *.ts ファイルに jquery.d.ts 参照を追加 • インテリセンス (コード補完) も有効 (Visual Studio 2012) /// <reference path="jquery.d.ts" /> ...
  29. 29. Roadmap & Summary
  30. 30. TypeScript ロードマップ Compiler and Language Improvements • 0.9.0 • Generics • Overload on constants • "export =" • Improve compiler performance • Improvements to type system to help model a larger variety of JS libraries • 0.9.1 • 'typeof' support in type expression • Project integration support in VS plugin • 1.0 • Stabilization • 1.x • Async/Await, Mixins, Protected access • ES6-compatible codegen
  31. 31. まとめ: TypeScript Summary Web アプリケーションをスケールさせるために ... • JavaScript 開発の必要性 • JavaScript の OOP やモジュール化への対応 • デバッグ・テスト工数の削減 • C#, Java などの知識を生かした JavaScript 開発
  32. 32. まとめ: TypeScript Summary Web アプリケーションをスケールさせるために ... TypeScript Any browser. Any host. Any OS. Open Source.
  33. 33. 関連リソース 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/
  34. 34. Enjoy coding, Be happy with TypeScript.
  35. 35. © 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×