• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AngularJS+TypeScript - AngularJS 1周年記念勉強会
 

AngularJS+TypeScript - AngularJS 1周年記念勉強会

on

  • 5,672 views

AngularJS1周年記念勉強会の発表資料

AngularJS1周年記念勉強会の発表資料
http://atnd.org/event/E0017295

Statistics

Views

Total Views
5,672
Views on SlideShare
5,330
Embed Views
342

Actions

Likes
22
Downloads
0
Comments
0

3 Embeds 342

http://under-siege.jugem.jp 291
https://twitter.com 46
http://localhost 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AngularJS+TypeScript - AngularJS 1周年記念勉強会 AngularJS+TypeScript - AngularJS 1周年記念勉強会 Presentation Transcript

    • AngularJS❤TypeScript わかめ まさひろ Wednesday, July 3, 13
    • わかめ まさひろ GAE Android TypeScript AngularJS @vvakame Wednesday, July 3, 13
    • • Google App Engine • Android • Google Apps などなど、 技術に特化した会社です。 Wednesday, July 3, 13
    • TypeScriptについて Wednesday, July 3, 13
    • JavaScriptなんてクソだ! • JavaScriptは確かに良い言語だよ • しかし腐ってる部分もたいへん多い • packageとかnamespaceとかない • 綺麗なコード書ける=上級者 • prototypeのOOP??ナニソレ • 型( ゚!゚)クレ 動的型付とかやだよ! • なのにブラウザ上で動くのはJSだけ Wednesday, July 3, 13
    • TypeScriptは神 • 可読性の高いJavaScriptに変換して実行する • ECMAScript6を意識 • 言語仕様的にはJSのSuperSet(上位セット)! • moduleある!classもある!継承もある! • 型もあるよ! • 既存の資産も捨てなくて済むよ! Wednesday, July 3, 13
    • TypeScript以外の選択肢 静的な型検査 JS変換後の可読性 TypeScript CoffeeScript Dart Haxe JSX 最適化されたJSを吐く…的 評価軸は入ってない事に注意 Wednesday, July 3, 13
    • TypeScript基本文法 Wednesday, July 3, 13
    • var hoge = "hoge"; hoge.arimasen(); hoge = "fuga"; hoge = 1; var fuga:any = "fuga"; fuga = 1; 変数について • 型指定が出来る • 右辺から自動的に推論される • メソッドなどの存在チェックがされる stringにarimasenメソッドはない stringにnumberは入れられない anyはなんでも!なるべく使わない TS Wednesday, July 3, 13
    • クラスについて • 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 http://goo.gl/G7t0U JS Wednesday, July 3, 13
    • 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 Wednesday, July 3, 13
    • 構造的部分型 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 •interface = 満たすべき仕様 • 仕様があってりゃえじゃないか •既存のJavaScriptコードとの互換性 http://goo.gl/oAArp Wednesday, July 3, 13
    • 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 Wednesday, July 3, 13
    • 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 Wednesday, July 3, 13
    • TypeScript周辺環境 Wednesday, July 3, 13
    • 既存資産の活用 • 型指定ファイルを作成 • .d.ts という拡張子 • http://goo.gl/jrvH5 • 普通のtsコンパイルで.d.tsの出力も可能 • サンプルが簡単に得られる! Wednesday, July 3, 13
    • 既存資産の活用 • AngularJS の場合 • angular.d.ts を利用 http://goo.gl/9NrZ4 interface IHttpService { // At least method and url must be provided... (config: IRequestConfig): IHttpPromise; get (url: string, RequestConfig?: any): IHttpPromise; delete (url: string, RequestConfig?: any): IHttpPromise; head(url: string, RequestConfig?: any): IHttpPromise; jsonp(url: string, RequestConfig?: any): IHttpPromise; post(url: string, data: any, RequestConfig?: any): IHttpPromise; put(url: string, data: any, RequestConfig?: any): IHttpPromise; defaults: IRequestConfig; // For debugging, BUT it is documented as public, so... pendingRequests: any[]; } Wednesday, July 3, 13
    • 開発環境 • VisualStudio  • 王道 • WebStorm  • JetBrains社 最近AndroidStudio出した • 現在 0.9 対応進行中! • goo.gl/2QAgV  • Macユーザにオススメ Wednesday, July 3, 13
    • with AngularJS Wednesday, July 3, 13
    • サーバと接続 • サーバから来るJSONもちゃんと型付する • できればクラスがいいと思う • $http周りはwrapしてGenerics使う Wednesday, July 3, 13
    • プログラムの構成 • Model, Service, Controllerはmoduleに分ける • 今の所 Model, Service, Controller で moduleは全部別 • ある程度の単位毎にさらにmoduleを切る • ControllerとかServiceとか Wednesday, July 3, 13
    • Controllerについて 1 • controllerはしっかりangular.moduleで登録 • 一覧性が高くなる & IDEで定義ジャンプ • Controllerはclassにする • プロパティ持ちたいので Wednesday, July 3, 13
    • Controllerについて 2 • Controller 1つにつき 1 module • 同じmoduleに$scope用interfaceを定義 • HTMLから使うメソッドは… • $scopeに直接関数を… • 一旦controllerにメソッド定義し$scopeに… • 代入作業が案外手間 (thisが!thisが!) Wednesday, July 3, 13
    • テストについて • テストが少し手間… • JSの手順そのままだと上手くいかないことが • .d.ts が貧弱なせい…? • JSで解説してるサイトがundocumentedな関 数使ってるのがわりーんだよチキショウ! • 一回テンプレが出来れば後は使い回しで Wednesday, July 3, 13
    • TypeScript利用事例 Wednesday, July 3, 13
    • TOPGATE社内利用例 + on GAE/Java Wednesday, July 3, 13
    • TOPGATE社内利用例 • 現在1案件で利用中 (完了 • 工数3人月くらい (プログラマ2名 • AngularJS + TypeScript | GAE/J  • サーバ側UnitTestでクライアント側UnitTest用 のテストデータを生成 • CIサーバではPhantomsJSを活用 Wednesday, July 3, 13
    • ヤバい! • サーバとのデータ受け渡し部分 • AngularJSのHTMLへの記述部分 • デバッグ少し大変 • マイナーライブラリの .d.ts は自作… Wednesday, July 3, 13
    • スゴい! • 設計変更やメソッドの変更に強い! • 複数人開発でも安心して開発できる • ロジックの実装に集中できる Wednesday, July 3, 13
    • 総括 TOPGATE社はTypeScriptを続けるよ! Wednesday, July 3, 13
    • 今後の課題 Wednesday, July 3, 13
    • なんとかしたい • AngularJSのHTML部分の静的なチェック • リファクタリング漏れが怖い… • DIの静的なチェック • scopeをscpoeにtypo→実行時エラー! 誰か作ってくれーーっ…!! Wednesday, July 3, 13
    • 参考 Wednesday, July 3, 13
    • 参考 • G+ TypeScript  • http://goo.gl/RINqk  • わかめはてブ • http://goo.gl/pUdoD  • TypeScript クイックガイド • http://phyzkit.net/typescript/ Wednesday, July 3, 13
    • 参考 • Playground  • http://goo.gl/dix4F  • Spec  • http://goo.gl/0PjYT  • DefinitelyTyped  • http://goo.gl/jrvH5  Wednesday, July 3, 13
    • ご清聴ありがとうございました。 教育案件や技術コンサル もやってます。 Wednesday, July 3, 13