Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
Ähnlich wie Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで (20)
Mehr von Masahiro Wakame
Mehr von Masahiro Wakame (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
- 3. • Google App Engine • Android • Google Apps などなど、 技術に特化した会社です。 3
- 5. • Windows!! ! → VMwareに… • VisualStudio! → 持ってない • ｺﾞﾒﾝﾅｻｲｯ ○┐ 5
- 6. アンケート • jQueryバリバリです • JavaScriptバリバリです • Java or C#バリバリです • C言語ならまかせろー！ • ハードウェアなら任せろー！ 6
- 8. Webアプリの時代 • Webアプリがどんどんリッチに • Google Maps • Google Drive • Facebook • 大規模開発の必要性 • コードたくさん • 関係者多数 • サーバの土管化 (JSON吐く機械) 8
- 9. JavaScript sucks! • JavaScriptは確かに良い言語だよ • しかし腐ってる部分もたいへん多い • packageとかnamespaceとかない • 綺麗なコード書ける＝上級者 • prototypeのOOP？？ナニソレ • 型( ﾟ"ﾟ)ｸﾚ 動的型付とかやだよ！ • なのにブラウザ上で動くのはJSだけ 9
- 10. TypeScriptって？ • Anders Hejlsberg開発 • MSのC#の作者 • JavaScriptに変換して実行する • ECMAScript6を意識 • 未来が来ないなら俺が行く！ • 現行ブラウザは 3.1 がほとんど • JavaScriptはイケてない！ 10
- 11. TypeScript the Great • JSのSuperSet(上位セット)だよ！ • 全てのJSはTypeScriptである • 可読性の高い変換後JSコード • moduleある！classもある！継承もある！ • 型もあるよ！ • 既存の資産も捨てなくて済むよ！ • TypeScriptはロックインもされない！ 11
- 12. 型がある • リファクタリングした時安心 • IDEが賢くなる余地が大きい • シンボルのリネーム • メソッドシグニチャの変更 • 100%アクセス可能な要素のみ補完 • 作り始めた時の設計 != 最終的な設計 12
- 13. TypeScript以外は？ • まとめて alterJS と呼ばれる • CoffeeScript • Dart • JSX • Haxe 13
- 14. CoffeeScriptは？ • Better JavaScript • インデントベース • 可読性の高い変換後JSコード • Railsで標準採用 • classベースのOOP • 既存の資産も活かせる • TG社でも割りと使っています • 惜しむらくは型がない！ 14
- 15. Dartは？ • Google先生が作ってる • 将来的にJavaScriptを完全に置き換え • 全く別言語からの変換 • 変換後JSは人には読めない • Dartにロックインされる • IDEが並行で開発されている！！ • 言語仕様が後発なのに芋っぽかった 15
- 16. JSXは？ • DeNAが作ってる • 動作速度最優先！強力な最適化！ • それなりにES6っぽい見た目 • 変換後JSはかなり読めない • 開発のリソースがちょっと足りなさげ 16
- 17. Haxeは？ • OCamlで書かれている • 言語仕様的にはかなり美しい • 変換後JSはかなり読めない • 色々な言語に変換できる • 優秀なIDEがWindowsにしかない 17
- 21. TypeScript基本文法 • JavaScriptのSuperSet (上位セット) • JSのコードはTypeScriptとして正しい • ※嘘です • 型指定の追加が必要 • 既存型にメソッド追加はエラーになる JSがそのまま動くわけではない… 21
- 22. TypeScript基本文法 • 変数名の後に型指定が可能 • if文やfor文などの制御構文は同じ var hoge:string = "hoge"; if (hoge === "hoge") { alert("true!"); } var array = ["hoge", "fuga"]; for (var i = 0; i < array.length; i++) { alert(array[i]); } http://goo.gl/tYdgG TS 22
- 23. var hoge = "hoge"; hoge.arimasen(); hoge = "fuga"; hoge = 1; var fuga:any = "fuga"; fuga = 1; 変数について • 型指定の省略も可能 • 右辺から自動的に推論される • メソッドなどの存在チェックがされる stringにarimasenメソッドはない stringにnumberは入れられない anyはなんでも！なるべく使わない TS 23
- 24. クラスについて • JSはプロトタイプベースのOOP • 多くのプログラマに馴染みが薄い… • TypeScriptはクラスベースなOOP！ class Test { str:string; constructor() { this.str = "new"; } showMessage():void { alert(this.str); } } new Test().showMessage(); var Test = (function () { function Test() { this.str = "new"; } Test.prototype.showMessage = function () { alert(this.str); }; return Test; })(); new Test().showMessage(); TS JS http://goo.gl/G7t0U 24
- 25. class Test { constructor(public str:string = "new"){ } public showMessage():void { alert(this.str); } } var test = new Test(); test.str = "Hello"; test.showMessage(); クラスについて • 省略記法が色々 • コンストラクタの引数をプロパティに TS http://goo.gl/7Hi7T 25
- 26. var func1 = function (str = "World") { alert("Hello " + str); } var func2 = (str = "World") => { alert("Hello " + str); } func1(); // Hello World func2("にゃんこ"); // Hello にゃんこ // func1(1); 関数について • 書き方色々 • 通常のJSスタイル • アロー関数式 TS 型が合わないのでエラー http://goo.gl/ArVFH 26
- 27. class Sample { text = "Meow"; test() { var func1 = function () { alert(this.text); }; var func2 = () => { alert(this.text); }; func1(); // undefined func2(); // Meow } } new Sample().test(); アロースタイルは便利 • 1つ外側の this が利用可能 • 不都合がない限りアロースタイルで TS Sample.prototype.test = function () { var _this = this; var func1 = function () { alert(this.text); }; var func2 = function () { alert(_this.text); }; func1(); func2(); }; JS http://goo.gl/K6MU7 一部略 27
- 28. 複雑なJSのthis事情… • JavaScriptではthisが何を指すかは結構複雑 • アロースタイルの導入で多少楽ができる var hoge = { foo: "bar", print: function () { console.log(this.foo); } }; // 何かに所属している時のthisなので bar と表示 hoge.print(); var paramour = {foo: "NTR"}; // thisをすり替えられたので NTR と表示 hoge.print.call(paramour); JS http://goo.gl/fVMGK参考:Qiita 28
- 29. 引数について • 省略可能引数 • デフォルト値付き引数 • 可変長引数 var func1 = (str?:string) => alert(str); func1(); func1("Hello world"); var func2 = (str = "Hello world") => alert(str); func2(); func2("Hello world"); var func3 = (...strs:string[]) => alert(strs.join(" ")); func3(); func3("Hello", "world"); http://goo.gl/Bt83S 29
- 30. module Sample { export class Test { static text = "Hello world"; } class Internal { } } alert(Sample.Test.text); var Sample; (function (Sample) { var Test = (function () { function Test() { } Test.text = "Hello world"; return Test; })(); Sample.Test = Test; var Internal = (function () { function Internal() { } return Internal; })(); })(Sample || (Sample = {})); alert(Sample.Test.text); モジュールについて • C# のnamespace • Java のpackage • ネストも可能 TS http://goo.gl/R7IK8 JS 30
- 31. interface Animal { walk(); } interface Cat extends Animal { meow(); } class NorwegianForestCat implements Cat { walk() { alert("四足とことこ"); } meow() { alert("にゃーん"); } brushing() { alert("毛が長いですごしごし"); } } var doWalk = (animal:Animal) => animal.walk(); doWalk(new NorwegianForestCat()); インターフェースについて • C# や Java の interface と同じ TS http://goo.gl/RNH8J 31
- 32. 構造的部分型 • interface = 満たすべき仕様 • 仕様があってりゃえじゃないか TSinterface MusicPlayer { play(title:string); } var gameMusicPlayer = (player:MusicPlayer) => { player.play("Baba yetu"); } // MusicPlayerを実装している class Mp3Player implements MusicPlayer { play(title:string) { alert(title + "を再生します。"); } } gameMusicPlayer(new Mp3Player()); // MusicPlayerが要求するものを全て持っている class 路上音楽家 { play(title:string) { alert(title + "がご希望ですか！"); } } gameMusicPlayer(new 路上音楽家()); // 実はクラスじゃなくても仕様を満たせばOK gameMusicPlayer({ play: (title:string) => { alert(title + "の再生") } }); http://goo.gl/JpjF3 32
- 33. 構造的部分型 interface Settings { method:string; url:string; cache?:bool; } var doAjax = (settings:Settings) => { // あれやこれや }; var settings:Settings = { method: "POST", url: "http://topgate.co.jp/" }; doAjax(settings); TS • 実はかなり便利な考え方 • 既存のJavaScriptコードとの互換性 • 引数としての設定値の作成 http://goo.gl/oAArp 33
- 34. public, private • メソッドやプロパティをprivateに • コンパイル時チェックのみ • publicもprivateも生成されるJavaScriptに違い class Sample { private test1() {} public test2() {} } var sample = new Sample(); sample.test1(); sample.test2(); var Sample = (function () { function Sample() { } Sample.prototype.test1 = function () { }; Sample.prototype.test2 = function () { }; return Sample; })(); var sample = new Sample(); sample.test1(); sample.test2(); エラー TS JS http://goo.gl/5UTb2 34
- 35. class A { constructor(public str:string, public num:number){} } class B { constructor(private a:A, public bool:bool){} get str() { return this.a.str; } get num() { return this.a.num; } } var b = new B(new A("vvakame", 29), true); alert(b.str + " " + b.num + " " + b.bool); getter, setter • get, set アクセサが定義できる • サーバから貰った複数のデータを合成したり するのに思いのほか便利 TS http://goo.gl/V5pNv 35
- 36. cast • <any> 最強です 稀に使います • TypeScriptの利点が失われるので極力使用し ちゃあダメ！ TSclass A { } class B { } var b1:B = new A(); var b2:B = <B> new A(); var b3:B = <any> new A(); 両方エラー http://goo.gl/12KMc 36
- 37. enum • 一応あるよー、とだけ… • わかめ的には文字列で欲しい… • ↑Java脳 .name() .valueOf(String) TSenum Sample { A, B, C, D = 10 } alert(Sample.B.toString()); http://goo.gl/A9wfZ 37
- 38. interface Message { new (str:string):{ showMessage(); }; } var func = (messageClass:Message) => { new messageClass("Hello").showMessage(); }; class MessageImpl { constructor(public str:string){} showMessage() { alert(this.str); } } func(MessageImpl); 複雑な型 • new できる関数を表す型 • 以下のプロパティを持つ… TS http://goo.gl/0Tp8s 38
- 39. class Sample { show(str:string):void; show(num:number):void; show(obj:any) { if (typeof obj === "string") { alert("string:" + obj); } else if (typeof obj === "number") { alert("number:" + obj); } else { alert("object:" + obj); } } } new Sample().show("str"); new Sample().show(1); // new Sample().show({}); 複雑な型 • メソッドのオーバーロード TS http://goo.gl/GmJiV 39
- 40. 実践！TypeScript 40
- 41. 既存資産の活用 • 型指定ファイルを作成 • .d.ts という拡張子 • http://goo.gl/jrvH5 • 普通のtsコンパイルで.d.tsの出力も可能 • Roadmapでは0.9.xで集積サイトが… • →2月くらいに記述が消えた(´・#・`) 41
- 42. 既存資産の活用 interface IScope { // Documentation says exp is optional, but actual implementaton counts on it $apply(exp: string): any; $apply(exp: (scope: IScope) => any): any; $broadcast(name: string, ...args: any[]): IAngularEvent; $destroy(): void; $digest(): void; $emit(name: string, ...args: any[]): IAngularEvent; // Documentation says exp is optional, but actual implementaton counts on it $eval(expression: string): any; $eval(expression: (scope: IScope) => any): any; // Documentation says exp is optional, but actual implementaton counts on it $evalAsync(expression: string): void; $evalAsync(expression: (scope: IScope) => any): void; // Defaults to false by the implementation checking strategy • AngularJS の場合 • angular.d.ts を利用 http://goo.gl/9NrZ4 42
- 43. 既存資産の活用 • 構造的部分型が大変良い！ • 整合性があっていればちゃんと使える • JavaScriptの文化に馴染みやすい interface Settings { method:string; url:string; } var doAjax = (settings:Settings) => { ... }; doAjax({ url: "http://topgate.co.jp/" }); TS 不足があればコンパイルエラーになる http://goo.gl/mv1To 43
- 44. 開発環境 • VisualStudio • 王道 • WebStorm • JetBrains社 最近AndroidStudio出した • Macユーザにオススメ • わかめはWebStormしかわかりません 44
- 45. サンプルコードを試す • git clone git://github.com/vvakame/ typescript-project-sample.git • 上記ディレクトリ直下で • npm install • bower install • tsd install jquery • grunt test • grunt && node app.js 45
- 46. npm • Node.js用パッケージ管理ツール • TypeScriptも使ってます！ • 新規コマンドのインストール -g • プロジェクト単位の依存性解決 • package.jsonに依存関係を書く 46
- 47. grunt • Node.jsベースのタスク自動化ツール • npmでgrunt用タスクがたくさん！ • プロジェクト内の設定共有も用意に • grunt-typescript などが便利 • Gruntfile.js に設定を書く 47
- 48. bower • フロントエンドのJavaScript用パッケージ管理 ツール • bower.json に依存関係の設定を書く 48
- 49. tsd • TypeScriptの型情報定義ファイル .d.ts の管理 ツール • .d.ts については後述 • まだまだ発展途上… 49
- 50. 必要なもののインストール • npm install -g typescript • npm install -g grunt-cli tsd bower • phantomjs http://phantomjs.org/ npm は nodebrew や chocolatey とかで入れる 50
- 53. TOPGATE社内利用例 • 現在1案件で利用中 (完了 • 工数3人月くらい (プログラマ2名 • AngularJS + TypeScript | GAE/J • サーバ側UnitTestでクライアント側UnitTest用 のテストデータを生成 • CIサーバではPhantomsJSを活用 53
- 54. TOPGATE社内利用例 • サーバとのデータ受け渡し • サーバ側モデルと 1:1 対応する形でクライア ント側でもクラスを作成 • get, set アクセサが大変役に立つ • Genericsが無かったので少し危なっかしい • エンバグ率が結構高い… 54
- 55. TOPGATE社内利用例 • 設計変更やメソッドの変更に強い！ • エラーはコンパイル時に検出できる • 複数人開発でも安心して開発できる • JavaScriptよりスキルレベル差が出にくい • ロジックの実装に集中できる • データ欠けの出元を追い回す事が減った 55
- 56. TOPGATE社内利用例 • JSライブラリを使う時にまず .d.ts 書く所から 始めないといけない率が高い • AngularJSのHTML記述部分が静的にチェック できない… • 割りとよくバグる • デバッグがJavaScriptより大変 • SourceMapやconcatされたJSが相手… 56
- 59. 0.9の話 • 現行は0.8.3です • bool 型が boolean になったり • Genericsが入ったり • その他色々 • http://goo.gl/d7rYK • http://goo.gl/IFkxl 59
- 60. Generics class ProcessedHttpPromiseImpl<T> { constructor( public promise:ng.IHttpPromise, public preProcess:(data:any)=>T) { } success(callback:(data:T)=>void):ProcessedHttpPromise { this.promise.success((original:any)=> { var data:T = this.preProcess(original); callback(data); }); return this; } error(callback:HttpPromiseCallback):ProcessedHttpPromise { this.promise.error(callback); return this; } } var promise: ProcessedHttpPromiseImpl<Sample> = ...; promise.success((data) => { // data は Sample としてしっかり型チェックされる // Genericsがなかったらここは any で扱うしかない…！ data.test(); }); TS 60
- 61. • .d.ts 用 • 引数に応じて帰ってくるものの型が変わる Specialized Signatures interface Document { createElement(tagName: string): HTMLElement; createElement(tagName: "div"): HTMLDivElement; createElement(tagName: "span"): HTMLSpanElement; createElement(tagName: "canvas"): HTMLCanvasElement; } 61
- 62. 参考 62
- 63. 参考 • G+ TypeScript • http://goo.gl/RINqk • わかめはてブ • http://goo.gl/pUdoD • TypeScript クイックガイド • http://phyzkit.net/typescript/ 63
- 64. 参考 • Playground • http://goo.gl/dix4F • Spec • http://goo.gl/0PjYT • DefinitelyTyped • http://vvaka.me/WYHzGT 64