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??ナニソレ...
TypeScriptは神
• 可読性の高いJavaScriptに変換して実行する
• ECMAScript6を意識
• 言語仕様的にはJSのSuperSet(上位セット)!
• moduleある!classもある!継承もある!
• 型もあるよ!...
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;
変数について
• 型指定が出来る
• 右辺から自動的に推...
クラスについて
• TypeScriptはクラスベースなOOP!
class Test {
str:string;
constructor() {
this.str = "new";
}
showMessage():void {
alert(t...
module Sample {
export class Test {
static text = "Hello world";
}
class Internal {
}
}
alert(Sample.Test.text);
var Sampl...
構造的部分型
interface Settings {
method:string;
url:string;
cache?:bool;
}
var doAjax = (settings:Settings) => {
// あれやこれや
};
v...
class A {
constructor(public str:string, public num:number){}
}
class B {
constructor(private a:A, public bool:bool){}
get...
Generics
class ProcessedHttpPromiseImpl<T> {
constructor(
public promise:ng.IHttpPromise,
public preProcess:(data:any)=>T)...
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...
開発環境
• VisualStudio 
• 王道
• WebStorm 
• JetBrains社 最近AndroidStudio出した
• 現在 0.9 対応進行中!
• goo.gl/2QAgV 
• Macユーザにオススメ
Wednes...
with AngularJS
Wednesday, July 3, 13
サーバと接続
• サーバから来るJSONもちゃんと型付する
• できればクラスがいいと思う
• $http周りはwrapしてGenerics使う
Wednesday, July 3, 13
プログラムの構成
• Model, Service, Controllerはmoduleに分ける
• 今の所 Model, Service, Controller で
moduleは全部別
• ある程度の単位毎にさらにmoduleを切る
• C...
Controllerについて 1
• controllerはしっかりangular.moduleで登録
• 一覧性が高くなる & IDEで定義ジャンプ
• Controllerはclassにする
• プロパティ持ちたいので
Wednesday,...
Controllerについて 2
• Controller 1つにつき 1 module
• 同じmoduleに$scope用interfaceを定義
• HTMLから使うメソッドは…
• $scopeに直接関数を…
• 一旦controlle...
テストについて
• テストが少し手間…
• JSの手順そのままだと上手くいかないことが
• .d.ts が貧弱なせい…?
• JSで解説してるサイトがundocumentedな関
数使ってるのがわりーんだよチキショウ!
• 一回テンプレが出来れ...
TypeScript利用事例
Wednesday, July 3, 13
TOPGATE社内利用例
+
on
GAE/Java
Wednesday, July 3, 13
TOPGATE社内利用例
• 現在1案件で利用中 (完了
• 工数3人月くらい (プログラマ2名
• AngularJS + TypeScript | GAE/J 
• サーバ側UnitTestでクライアント側UnitTest用
のテストデータ...
ヤバい!
• サーバとのデータ受け渡し部分
• 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 ...
参考
Wednesday, July 3, 13
参考
• G+ TypeScript 
• http://goo.gl/RINqk 
• わかめはてブ
• http://goo.gl/pUdoD 
• TypeScript クイックガイド
• http://phyzkit.net/types...
参考
• Playground 
• http://goo.gl/dix4F 
• Spec 
• http://goo.gl/0PjYT 
• DefinitelyTyped 
• http://goo.gl/jrvH5 
Wednesday,...
ご清聴ありがとうございました。
教育案件や技術コンサル
もやってます。
Wednesday, July 3, 13
Upcoming SlideShare
Loading in...5
×

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

5,820

Published on

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

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

No Downloads
Views
Total Views
5,820
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

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

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

×