• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,397
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
0
Comments
0
Likes
33

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. TypeScriptの基礎から実践・利用事例までわかめ まさひろ1
  • 2. わかめ まさひろGAEAndroidTypeScriptAngularJS@vvakame2
  • 3. • Google App Engine• Android• Google Appsなどなど、技術に特化した会社です。3
  • 4. 普段の開発環境http://goo.gl/VBQic4
  • 5. • Windows!! ! → VMwareに…• VisualStudio! → 持ってない• ゴメンナサイッ ○┐5
  • 6. アンケート• jQueryバリバリです• JavaScriptバリバリです• Java or C#バリバリです• C言語ならまかせろー!• ハードウェアなら任せろー!6
  • 7. TypeScriptって何?7
  • 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
  • 18. まとめCoffeeScript 僕Python派閥なんで…Dart そもそもJavaScript捨てる予定だしーJSX 動作速度至上主義!Haxe 僕JS以外にも狙い定めてるし僕の言語仕様超美しいよ!なんてったってOCamlだしね!TypeScript JavaScript後進の優等生ざます18
  • 19. 残念ながら…JavaScriptわからずに開発できるほど甘くはないJavaScriptも基本教養として学習が必要TypeScriptを踏み台にするのは大アリ19
  • 20. TypeScript基本文法20
  • 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/tYdgGTS22
  • 23. var hoge = "hoge";hoge.arimasen();hoge = "fuga";hoge = 1;var fuga:any = "fuga";fuga = 1;変数について• 型指定の省略も可能• 右辺から自動的に推論される• メソッドなどの存在チェックがされるstringにarimasenメソッドはないstringにnumberは入れられないanyはなんでも!なるべく使わないTS23
  • 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 JShttp://goo.gl/G7t0U24
  • 25. class Test {constructor(public str:string = "new"){}public showMessage():void {alert(this.str);}}var test = new Test();test.str = "Hello";test.showMessage();クラスについて• 省略記法が色々• コンストラクタの引数をプロパティにTShttp://goo.gl/7Hi7T25
  • 26. var func1 = function (str = "World") {alert("Hello " + str);}var func2 = (str = "World") => {alert("Hello " + str);}func1(); // Hello Worldfunc2("にゃんこ"); // Hello にゃんこ// func1(1);関数について• 書き方色々• 通常のJSスタイル• アロー関数式TS型が合わないのでエラー http://goo.gl/ArVFH26
  • 27. class Sample {text = "Meow";test() {var func1 = function () {alert(this.text);};var func2 = () => {alert(this.text);};func1(); // undefinedfunc2(); // Meow}}new Sample().test();アロースタイルは便利• 1つ外側の this が利用可能• 不都合がない限りアロースタイルでTSSample.prototype.test = function () {var _this = this;var func1 = function () {alert(this.text);};var func2 = function () {alert(_this.text);};func1();func2();};JShttp://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);JShttp://goo.gl/fVMGK参考:Qiita28
  • 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/Bt83S29
  • 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• ネストも可能TShttp://goo.gl/R7IK8JS30
  • 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 と同じTShttp://goo.gl/RNH8J31
  • 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 路上音楽家());// 実はクラスじゃなくても仕様を満たせばOKgameMusicPlayer({play: (title:string) => {alert(title + "の再生")}});http://goo.gl/JpjF332
  • 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/oAArp33
  • 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 JShttp://goo.gl/5UTb234
  • 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 アクセサが定義できる• サーバから貰った複数のデータを合成したりするのに思いのほか便利TShttp://goo.gl/V5pNv35
  • 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/12KMc36
  • 37. enum• 一応あるよー、とだけ…• わかめ的には文字列で欲しい…• ↑Java脳 .name() .valueOf(String)TSenum Sample {A, B, C, D = 10}alert(Sample.B.toString());http://goo.gl/A9wfZ37
  • 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 できる関数を表す型• 以下のプロパティを持つ…TShttp://goo.gl/0Tp8s38
  • 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({});複雑な型• メソッドのオーバーロードTShttp://goo.gl/GmJiV39
  • 40. 実践!TypeScript40
  • 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/9NrZ442
  • 43. 既存資産の活用• 構造的部分型が大変良い!• 整合性があっていればちゃんと使える• JavaScriptの文化に馴染みやすいinterface Settings {method:string;url:string;}var doAjax = (settings:Settings) => { ... };doAjax({url: "http://topgate.co.jp/"});TS不足があればコンパイルエラーになるhttp://goo.gl/mv1To43
  • 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.js45
  • 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
  • 51. TypeScript利用事例51
  • 52. TOPGATE社内利用例+onGAE/Java52
  • 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
  • 57. TOPGATE社内利用例• 総括• TOPGATE社はTypeScriptを続けるよ!57
  • 58. これからのTypeScript58
  • 59. 0.9の話• 現行は0.8.3です• bool 型が boolean になったり• Genericsが入ったり• その他色々• http://goo.gl/d7rYK• http://goo.gl/IFkxl59
  • 60. Genericsclass 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();});TS60
  • 61. • .d.ts 用• 引数に応じて帰ってくるものの型が変わるSpecialized Signaturesinterface 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
  • 65. ご清聴ありがとうございました。教育案件や技術コンサルもやってます。65