• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
 

Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで

on

  • 6,353 views

 

Statistics

Views

Total Views
6,353
Views on SlideShare
4,523
Embed Views
1,830

Actions

Likes
32
Downloads
0
Comments
0

6 Embeds 1,830

http://www.buildinsider.net 1541
https://twitter.com 264
http://triweb.hits.unisys.co.jp 20
http://tweetedtimes.com 2
http://plus.url.google.com 2
http://localhost 1

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

Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで Presentation Transcript

  • TypeScriptの基礎から実践・利用事例までわかめ まさひろ1
  • わかめ まさひろGAEAndroidTypeScriptAngularJS@vvakame2
  • • Google App Engine• Android• Google Appsなどなど、技術に特化した会社です。3
  • 普段の開発環境http://goo.gl/VBQic4
  • • Windows!! ! → VMwareに…• VisualStudio! → 持ってない• ゴメンナサイッ ○┐5
  • アンケート• jQueryバリバリです• JavaScriptバリバリです• Java or C#バリバリです• C言語ならまかせろー!• ハードウェアなら任せろー!6
  • TypeScriptって何?7
  • Webアプリの時代• Webアプリがどんどんリッチに• Google Maps • Google Drive • Facebook • 大規模開発の必要性• コードたくさん• 関係者多数• サーバの土管化 (JSON吐く機械)8
  • JavaScript sucks!• JavaScriptは確かに良い言語だよ• しかし腐ってる部分もたいへん多い• packageとかnamespaceとかない• 綺麗なコード書ける=上級者• prototypeのOOP??ナニソレ• 型( ゚"゚)クレ 動的型付とかやだよ!• なのにブラウザ上で動くのはJSだけ9
  • TypeScriptって?• Anders Hejlsberg開発• MSのC#の作者• JavaScriptに変換して実行する• ECMAScript6を意識• 未来が来ないなら俺が行く!• 現行ブラウザは 3.1 がほとんど• JavaScriptはイケてない!10
  • TypeScript the Great• JSのSuperSet(上位セット)だよ!• 全てのJSはTypeScriptである• 可読性の高い変換後JSコード• moduleある!classもある!継承もある!• 型もあるよ!• 既存の資産も捨てなくて済むよ!• TypeScriptはロックインもされない!11
  • 型がある• リファクタリングした時安心• IDEが賢くなる余地が大きい• シンボルのリネーム• メソッドシグニチャの変更• 100%アクセス可能な要素のみ補完• 作り始めた時の設計 != 最終的な設計12
  • TypeScript以外は?• まとめて alterJS と呼ばれる• CoffeeScript • Dart • JSX • Haxe 13
  • CoffeeScriptは?• Better JavaScript • インデントベース• 可読性の高い変換後JSコード• Railsで標準採用• classベースのOOP• 既存の資産も活かせる• TG社でも割りと使っています• 惜しむらくは型がない!14
  • Dartは?• Google先生が作ってる• 将来的にJavaScriptを完全に置き換え• 全く別言語からの変換• 変換後JSは人には読めない• Dartにロックインされる• IDEが並行で開発されている!!• 言語仕様が後発なのに芋っぽかった15
  • JSXは?• DeNAが作ってる• 動作速度最優先!強力な最適化!• それなりにES6っぽい見た目• 変換後JSはかなり読めない• 開発のリソースがちょっと足りなさげ16
  • Haxeは?• OCamlで書かれている• 言語仕様的にはかなり美しい• 変換後JSはかなり読めない• 色々な言語に変換できる• 優秀なIDEがWindowsにしかない17
  • まとめCoffeeScript 僕Python派閥なんで…Dart そもそもJavaScript捨てる予定だしーJSX 動作速度至上主義!Haxe 僕JS以外にも狙い定めてるし僕の言語仕様超美しいよ!なんてったってOCamlだしね!TypeScript JavaScript後進の優等生ざます18
  • 残念ながら…JavaScriptわからずに開発できるほど甘くはないJavaScriptも基本教養として学習が必要TypeScriptを踏み台にするのは大アリ19
  • TypeScript基本文法20
  • TypeScript基本文法• JavaScriptのSuperSet (上位セット)• JSのコードはTypeScriptとして正しい• ※嘘です• 型指定の追加が必要• 既存型にメソッド追加はエラーになるJSがそのまま動くわけではない…21
  • 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
  • var hoge = "hoge";hoge.arimasen();hoge = "fuga";hoge = 1;var fuga:any = "fuga";fuga = 1;変数について• 型指定の省略も可能• 右辺から自動的に推論される• メソッドなどの存在チェックがされるstringにarimasenメソッドはないstringにnumberは入れられないanyはなんでも!なるべく使わないTS23
  • クラスについて• 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
  • 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
  • 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
  • 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
  • 複雑な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
  • 引数について• 省略可能引数• デフォルト値付き引数• 可変長引数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
  • 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
  • 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
  • 構造的部分型• 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
  • 構造的部分型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
  • 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
  • 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
  • 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
  • enum• 一応あるよー、とだけ…• わかめ的には文字列で欲しい…• ↑Java脳 .name() .valueOf(String)TSenum Sample {A, B, C, D = 10}alert(Sample.B.toString());http://goo.gl/A9wfZ37
  • 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
  • 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
  • 実践!TypeScript40
  • 既存資産の活用• 型指定ファイルを作成• .d.ts という拡張子• http://goo.gl/jrvH5• 普通のtsコンパイルで.d.tsの出力も可能• Roadmapでは0.9.xで集積サイトが…• →2月くらいに記述が消えた(´・#・`)41
  • 既存資産の活用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
  • 既存資産の活用• 構造的部分型が大変良い!• 整合性があっていればちゃんと使える• JavaScriptの文化に馴染みやすいinterface Settings {method:string;url:string;}var doAjax = (settings:Settings) => { ... };doAjax({url: "http://topgate.co.jp/"});TS不足があればコンパイルエラーになるhttp://goo.gl/mv1To43
  • 開発環境• VisualStudio • 王道• WebStorm • JetBrains社 最近AndroidStudio出した• Macユーザにオススメ• わかめはWebStormしかわかりません44
  • サンプルコードを試す• git clone git://github.com/vvakame/typescript-project-sample.git• 上記ディレクトリ直下で• npm install• bower install• tsd install jquery• grunt test• grunt && node app.js45
  • npm• Node.js用パッケージ管理ツール• TypeScriptも使ってます!• 新規コマンドのインストール -g• プロジェクト単位の依存性解決• package.jsonに依存関係を書く46
  • grunt• Node.jsベースのタスク自動化ツール• npmでgrunt用タスクがたくさん!• プロジェクト内の設定共有も用意に• grunt-typescript などが便利• Gruntfile.js に設定を書く47
  • bower• フロントエンドのJavaScript用パッケージ管理ツール• bower.json に依存関係の設定を書く48
  • tsd• TypeScriptの型情報定義ファイル .d.ts の管理ツール• .d.ts については後述• まだまだ発展途上…49
  • 必要なもののインストール• npm install -g typescript• npm install -g grunt-cli tsd bower• phantomjs http://phantomjs.org/npm は nodebrew やchocolatey とかで入れる50
  • TypeScript利用事例51
  • TOPGATE社内利用例+onGAE/Java52
  • TOPGATE社内利用例• 現在1案件で利用中 (完了• 工数3人月くらい (プログラマ2名• AngularJS + TypeScript | GAE/J • サーバ側UnitTestでクライアント側UnitTest用のテストデータを生成• CIサーバではPhantomsJSを活用53
  • TOPGATE社内利用例• サーバとのデータ受け渡し• サーバ側モデルと 1:1 対応する形でクライアント側でもクラスを作成• get, set アクセサが大変役に立つ• Genericsが無かったので少し危なっかしい• エンバグ率が結構高い…54
  • TOPGATE社内利用例• 設計変更やメソッドの変更に強い!• エラーはコンパイル時に検出できる• 複数人開発でも安心して開発できる• JavaScriptよりスキルレベル差が出にくい• ロジックの実装に集中できる• データ欠けの出元を追い回す事が減った55
  • TOPGATE社内利用例• JSライブラリを使う時にまず .d.ts 書く所から始めないといけない率が高い• AngularJSのHTML記述部分が静的にチェックできない…• 割りとよくバグる• デバッグがJavaScriptより大変• SourceMapやconcatされたJSが相手…56
  • TOPGATE社内利用例• 総括• TOPGATE社はTypeScriptを続けるよ!57
  • これからのTypeScript58
  • 0.9の話• 現行は0.8.3です• bool 型が boolean になったり• Genericsが入ったり• その他色々• http://goo.gl/d7rYK• http://goo.gl/IFkxl59
  • 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
  • • .d.ts 用• 引数に応じて帰ってくるものの型が変わるSpecialized Signaturesinterface Document {createElement(tagName: string): HTMLElement;createElement(tagName: "div"): HTMLDivElement;createElement(tagName: "span"): HTMLSpanElement;createElement(tagName: "canvas"): HTMLCanvasElement;}61
  • 参考62
  • 参考• G+ TypeScript • http://goo.gl/RINqk • わかめはてブ• http://goo.gl/pUdoD • TypeScript クイックガイド• http://phyzkit.net/typescript/63
  • 参考• Playground • http://goo.gl/dix4F • Spec • http://goo.gl/0PjYT • DefinitelyTyped • http://vvaka.me/WYHzGT 64
  • ご清聴ありがとうございました。教育案件や技術コンサルもやってます。65