Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AtScriptの近況と将来
わかめ まさひろ
ng-japan
AtScriptの近況と将来
わかめ まさひろ
ng-japan
!?
TypeScriptとAngularJS 1.3
わかめ まさひろ
AtScriptの近況と将来
わかめ まさひろ @vvakame
appengine
TypeScript
AngularJS
Masahiro Wakame
DefinitelyTyped
変更行数が多いのは
tsc本体を入れてた時期があったせい
ECMAScript?
ESと略す場合が多い
ECMAScript
• JavaScriptの元となる仕様のこと!
• DOMの仕様とかは入ってない!
• 最近のブラウザは 5 をサポート!
• そろそろ 6 の仕様が確定(今RC2
http://kangax.github.io/comp...
AtScript?
AtScript
• AtScript == ES6+A!
• A == Annotations (Decorators)!
• AnnotationsはES6に含まれない!
• Super set of TypeScript!
• type ...
TypeScript?
TypeScriptの特長
• TypeScriptはJavaScriptを拡張した言語!
• 静的型付け!!
• ECMAScript 6規格の文法を取り込み中!
• 読みやすい変換後JavaScript!
• Java, C# とかに優しい...
静的型付け
• 静的解析で多くの整合性検査が可能!
• 不整合があったらコンパイルエラー!
• var foo: number = “bar”;!
• ↑エラー!!
• 大規模・大人数 になるほど利点 !
• Java・C# などが有名
ES6 compat
http://goo.gl/q2W5dU
既存資産の活用
• JSのライブラリが使いたい!!
• jQuery!
• AngularJS!
• mocha!
• etc…!
• TypeScript用に別途型情報を用意する
↑ちょっとめんどい
DefinitelyTyped
definitely/déf(ə)nətli/
→define
副詞more ∼; most ∼
2 明確に, はっきりと〈断る述べる決めるなど〉.
type/ta p/
語源は「打ってできた形型」
(形)typica...
型定義ファイル .d.ts
Over 1000!
// Type definitions for Angular JS 1.3+

// Project: http://angularjs.org

// Definitions by: Diego Vilar <http://github.c...
それを使う
///<reference path='../typings/angularjs/angular.d.ts' />

///<reference path='../typings/angularjs/angular-route.d....
2015/03/05
TypeScript!?
http://goo.gl/TQKqYb
AtScript to TypeScript
• TypeScriptに必要な要素が入る!
• 作りたいのはAngularJS本体(のはず!
• TypeScriptのsuper setを作るのは難しい!
• TypeScriptの開発速度が早...
まとめ
• いまからTypeScriptやっとくか!
TypeScript syntax
赤字部分=TypeScript固有
ES6部分の多さに注目
Type Annotations
http://goo.gl/jKVeHw
var str1: string = "string";
var str2: number = "string"; // エラー!
var str3 = "string...
Classes
http://goo.gl/l3zjBi
class Hoge {
name: string;
constructor(name: string) {
this.name = name;
}
hello(): string {
...
Interfaces
http://goo.gl/0WA3zb
interface Hoge {
str: string;
num: number;
}
!
var obj: Hoge = {
str: "string",
num: 1
};
...
Arrow Functions
http://goo.gl/XFyQRB
var hello = (word: string) => console.log("Hello, " + word);
hello("TypeScript");
!
/...
internal modules
http://goo.gl/V4ZDRa
module app {
export class Sample {
hello(word = "TypeScript") {
return `Hello, ${wor...
Generics
http://goo.gl/Hh1Aly
class Container<T> {
constructor(public data: T) { }
}
!
var a = new Container("str");
var b...
続きはWebで!
http://goo.gl/mcF92t
http://goo.gl/Htqn5E
書籍もよろしく!
http://goo.gl/QiXe8t
始めよう!
sample: http://goo.gl/x6gG7Z
お断り
流行より
わかりやすくて
動くもの
tools
• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!
• tslint!
• typedoc!
• dtsm (tsd)!
• LESS!
• unit test!
• moch...
tools
• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!
• tslint!
• typedoc!
• dtsm (tsd)!
• LESS!
• unit test!
• moch...
node.js
• JavaScript実行環境!
• この環境で色々なツールを動かす!
• https://nodejs.org/!
• github.com/hokaccha/nodebrew!
• 最近 io.js とかあるけどまぁnod...
grunt
• タスクランナー!
• npm install -g grunt-cli!
• 最近 gulp とかあるけどまぁ grunt で!
• http://gruntjs.com/
bower
• ライブラリの管理!
• AngularJS 含む!
• grunt 経由で使う!
• 最近 npm & browserify とかあるけど
LESS
• cssを生成するaltCSS的な言語!
• grunt 経由で使う!
• 別にcssでもscssでもお好きなのを…!
• 生cssはちょっと脳がついていけない
karma
• テストランナー!
• grunt 経由で使う!
• Chrome, Firefox, IE etc… を操れる!
• その他!
• mocha!
• power-assert
protractor
• E2Eテストランナー!
• grunt 経由で使う!
• jasmineにしとくと無難
with TypeScript
tools
• node.js!
• grunt!
• bower!
• wiredep!
• TypeScript!
• tslint!
• typedoc!
• dtsm (tsd)!
• LESS!
• unit test!
• moch...
TypeScript
• npm install -g typescript!
• npm install grunt-ts —save-dev!
• npm install grunt-typescript —save-dev
どれか1つ!
tslint
• TypeScript用lintツール!
• AST(抽象構文木)を検査する!
• TypeScript固有の事情も考慮されている
jshint, eslintは
僕は使ってません
typedoc
• JSDoc的なヤーツ!
• TypeScript専用!
• わりといい感じのドキュメントが出る
jshint, eslintは
僕は使ってません
grunt-typedoc
too old!!
grunt-typedoc
grunt-typedoc
!?
grunt-typedoc
今度直しときます…
dtsm
• 型定義ファイルの管理に!
• 作者 == vvakame!
• 実質DefinitelyTypedのダウンローダ!
• デファクトはtsdというツール!
• オプションが覚えられなかったので
作者→
エディタ
• Visual Studio!
• WebStorm!
• IntelliJ IDEA!
• Eclipse!
• Atom!
• Sublime Text!
• Emacs!
• Vim!
• etc, etc…
エディタ
• TypeScriptコンパイラ自体がIDE用API
持ってる!
• LanguageServiceと呼ばれる!
• VisualStudio同等の機能が実装しやすい!
• お好きなエディタで書きましょう
エディタ
• Visual Studio!
• WebStorm!
• IntelliJ IDEA!
• Eclipse!
• Atom!
• Sublime Text!
• Emacs!
• Vim!
• etc, etc…
Win
Mac
...
手順
• ライブラリ本体 える!
• 型定義ファイル える!
• コード書く!
• コンパイルとかする!
• atom-typescript任せも可!
• 動かす! 実演!
With AngularJS 1.3
sample: http://goo.gl/x6gG7Z
簡単なことさ
• TypeScriptは特別じゃない!
• ただのJavaScriptの延長線上にある!
• JS上のBest Practiceはそのまま通用する!
• TypeScriptで+αがあるかな!
https://github.co...
準備
• bower install angular angular-route!
• dtsm install angularjs/angular!
• dtsm install angularjs/angular-route
基礎知識
• 型の名前を覚えよう!見つけよう!!
• 適当にファイル内検索すればOK!
• 使いたいメソッド名!
• $apply, $on, $watch etc…!
• 使いたいDIオブジェクト名!
• $routeProvider, $fi...
お作法
• tsc —noImplicitAny オプションを使う!
• 常に!常にだ!最初からだ!!
• 型注釈は全力で書け!全力でだ!!
• DIベースだとあんまし推論できない!
• 型ベースのDIいい…(AngularDart?
プロジェクト構成
• 外部モジュールは使わない!
• es6 module が来たら考えよう!!
• 今は最終的にconcatだ!!!
• コンパイルの始点を決める!
• どのファイルからでもコンパイルでき
るようにしようとすると死ぬ
出力順制御問題
• 細かいJSファイルたくさん!!
• →結合順序で苦労する!
• TypeScriptコード内部に書くのが楽…!
• 循環参照問題!
• コンパイルの始点によって結果変わる!
• モジュール定義とモジュール利用が

逆になった...
プロジェクト構成
index.ts
angular.d.ts
foo/index.ts
foo/module.ts
foo/aController.ts
foo/bService.ts
←常にここコンパイル
 =毎回同じ結果
プロジェクトサンプル
README読んでね!
Windowsは…動くのか?
protractor
• 型定義ファイル干渉問題!
• angular.d.ts, protractor.d.ts同時使用不可!
• $ の定義がぶつかる!
• 全てが丸く収まる解決策なし!!
• e2eテストコードと本番コードを混ぜない!
•...
TypeScript Q&A
3ヶ月後には
全然違うこといってるかも
browserify使わないの?
使わない
まだbowerでよくね…?
僕は次の案件があったら
たぶん使うけど…
amd(require.js)使わないの
使わない
生成コードの制御が
地味にめんどい
細かい罠がちょいちょい…
具体的には値として使ってないとコードが消される
—target es6 は?
使わない
es6 module syntax
入ってから考えよう!
babel は?
使わない
es6 module syntax
入ってから考えよう!
SourceMapは?
使わないほうが…
SourceMapには
魔物が住むと聞く…
SourceMap
• 変換前と変換後ソースをマッピング!
• よーするにTypeScriptのままデバッグ!
• validationの仕様が入ってない!!
• 変換途中でぶっ壊れてもわからん!!
• クソが!!
• 多段変換のどこで壊れたか...
TypeScript専用ライブラリ
使ってない
そもそも存在してる?
$resource, ui-router 便利!
実践投入
Case A
• オンライン学習システム!
• 2013年1月頃!
• ほぼ出たてだけど実践投入!
• TypeScript 0.8.2!
• AngularJS 1.0.3 Dartは怖かった…
Case B
• 社内チケット管理システム!
• 2014年1月頃!
• 途中CoffeeScriptから移行!
• TypeScript 0.9.7!
• AngularJS 1.2.13
型がないと
改修が怖かった
Case C
• 社内共通基盤作成!
• 2014年7月!
• コンサル的に知見共有させていただいた!
• TypeScript 1.1.0-1!
• AngularJS 1.3.1 楽しかった
Case D
• の何か!
• 2014年8月ぐらいから…?!
• わかめ抜き案件!
• TypeScript 1.3.0!
• AngularJS 1.2.26 頑張ってるぽい
TypeScript+AngularJS 1.3 イケますよ!
優れたプロジェクト
テンプレートは必要そう
TypeScript API
LanguageService
• TypeScriptコンパイラのAPIが露出!
• AST(抽象構文木)とか取れる!
• 入力補完候補も取れる!
• フォーマッタも使える!
• 割りといろいろできる!
• unstable!
機能切り出し+α
AST解析+警告出力
案:Type base DI
class FooController {
constructor($window: ng.IWindowService) {
}
}
var FooController = (function () {
func...
案:実行時型検査
• コード→AST→ごにょる→コード生成!
• 開発・テスト時には実行時型検査ON!
• リリース時にはOFFにする!
• JSONの型チェックしたいよね…
案:Type Check in HTML
• AngularJSコードコンパイル後の型情報!
• routeProviderでの表記!
• HTMLでの記述!
• 静的に突き合わせてチェック可能??
Q&A
any questions?
ng-japan 2015 TypeScript+AngularJS 1.3
Upcoming SlideShare
Loading in …5
×

ng-japan 2015 TypeScript+AngularJS 1.3

16,797 views

Published on

http://ngjapan.org

Published in: Technology
  • Be the first to comment

ng-japan 2015 TypeScript+AngularJS 1.3

  1. 1. AtScriptの近況と将来 わかめ まさひろ ng-japan
  2. 2. AtScriptの近況と将来 わかめ まさひろ ng-japan !?
  3. 3. TypeScriptとAngularJS 1.3 わかめ まさひろ AtScriptの近況と将来
  4. 4. わかめ まさひろ @vvakame appengine TypeScript AngularJS Masahiro Wakame DefinitelyTyped
  5. 5. 変更行数が多いのは tsc本体を入れてた時期があったせい
  6. 6. ECMAScript? ESと略す場合が多い
  7. 7. ECMAScript • JavaScriptの元となる仕様のこと! • DOMの仕様とかは入ってない! • 最近のブラウザは 5 をサポート! • そろそろ 6 の仕様が確定(今RC2 http://kangax.github.io/compat-table/es5/ https://people.mozilla.org/~jorendorff/es6-draft.html
  8. 8. AtScript?
  9. 9. AtScript • AtScript == ES6+A! • A == Annotations (Decorators)! • AnnotationsはES6に含まれない! • Super set of TypeScript! • type annotations http://goo.gl/5z43FE http://goo.gl/Rs5rea from AngularJS team!
  10. 10. TypeScript?
  11. 11. TypeScriptの特長 • TypeScriptはJavaScriptを拡張した言語! • 静的型付け!! • ECMAScript 6規格の文法を取り込み中! • 読みやすい変換後JavaScript! • Java, C# とかに優しい言語仕様 from Microsoft
  12. 12. 静的型付け • 静的解析で多くの整合性検査が可能! • 不整合があったらコンパイルエラー! • var foo: number = “bar”;! • ↑エラー!! • 大規模・大人数 になるほど利点 ! • Java・C# などが有名
  13. 13. ES6 compat http://goo.gl/q2W5dU
  14. 14. 既存資産の活用 • JSのライブラリが使いたい!! • jQuery! • AngularJS! • mocha! • etc…! • TypeScript用に別途型情報を用意する ↑ちょっとめんどい
  15. 15. DefinitelyTyped definitely/déf(ə)nətli/ →define 副詞more ∼; most ∼ 2 明確に, はっきりと〈断る述べる決めるなど〉. type/ta p/ 語源は「打ってできた形型」 (形)typical, (副)typically 名詞複∼s/-s/ 1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort) ウィズダム英和辞典より I’m committer! definitelytyped.org github.com/borisyankov/DefinitelyTyped
  16. 16. 型定義ファイル .d.ts Over 1000!
  17. 17. // Type definitions for Angular JS 1.3+
 // Project: http://angularjs.org
 // Definitions by: Diego Vilar <http://github.com/diegovilar>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
 
 /// <reference path="../jquery/jquery.d.ts" />
 
 declare var angular: angular.IAngularStatic;
 
 // Support for painless dependency injection
 interface Function {
 $inject?: string[];
 }
 
 // Collapse angular into ng
 import ng = angular;
 // Support AMD require
 declare module 'angular' {
 export = angular;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // ng module (angular.js)
 ///////////////////////////////////////////////////////////////////////////////
 declare module angular {
 
 // not directly implemented, but ensures that constructed class implements $get
 interface IServiceProviderClass {
 new (...args: any[]): IServiceProvider;
 }
 
 interface IServiceProviderFactory {
 (...args: any[]): IServiceProvider;
 }
 
 // All service providers extend this interface
 interface IServiceProvider {
 $get: any;
 }
 
 interface IAngularBootstrapConfig {
 既存JSに型を後付けする http://goo.gl/xbjtzy
  18. 18. それを使う ///<reference path='../typings/angularjs/angular.d.ts' />
 ///<reference path='../typings/angularjs/angular-route.d.ts' />
 
 module App {
 "use strict";
 
 angular.module(
 "app",
 [“ngRoute”, “app.hello”],
 ($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider)=> {
 $routeProvider
 .when("/sample", {
 templateUrl: "/template/sample.html"
 })
 .otherwise({
 templateUrl: "/template/main.html"
 });
 $locationProvider.html5Mode(true);
 }
 )
 .run(($rootScope: ng.IRootScopeService, $routeParams: ng.route.IRouteParamsService)=> {
 false;
 })
 ;
 
 angular.module(
 "app.hello",
 [],
 ()=> {
 false;
 }
 )
 .service("sampleService", Service.SampleService)
 .controller("SampleTestController", Sample.TestController)
 ;

  19. 19. 2015/03/05
  20. 20. TypeScript!? http://goo.gl/TQKqYb
  21. 21. AtScript to TypeScript • TypeScriptに必要な要素が入る! • 作りたいのはAngularJS本体(のはず! • TypeScriptのsuper setを作るのは難しい! • TypeScriptの開発速度が早い! 楽をしよう!
  22. 22. まとめ • いまからTypeScriptやっとくか!
  23. 23. TypeScript syntax 赤字部分=TypeScript固有 ES6部分の多さに注目
  24. 24. Type Annotations http://goo.gl/jKVeHw var str1: string = "string"; var str2: number = "string"; // エラー! var str3 = "string"; // 初期化子の型から型推論されstringを指定したのと等価 str3 = 1; // エラー! ! var b: boolean = true; var n: number = 1; ! var a: any = true; a = 1; // any は何でもOK!
  25. 25. Classes http://goo.gl/l3zjBi class Hoge { name: string; constructor(name: string) { this.name = name; } hello(): string { return "Hello, " + this.name; } } ! var obj = new Hoge("world"); window.alert(obj.hello());
  26. 26. Interfaces http://goo.gl/0WA3zb interface Hoge { str: string; num: number; } ! var obj: Hoge = { str: "string", num: 1 }; ! window.alert(obj.str + obj.num);
  27. 27. Arrow Functions http://goo.gl/XFyQRB var hello = (word: string) => console.log("Hello, " + word); hello("TypeScript"); ! // 返り値の型を明示する var hello2 = (word: string): void => console.log("Hello, " + word); // 参考:今まで通りの書き方 1 var hello3 = function (word: string) { console.log("Hello, " + word); }; // 参考:今まで通りの書き方 2 function hello4(word: string) { console.log("Hello, " + word); }
  28. 28. internal modules http://goo.gl/V4ZDRa module app { export class Sample { hello(word = "TypeScript") { return `Hello, ${word}`; } } } var obj = new app.Sample(); console.log(obj.hello("AngularJS")); var app; (function (app) { var Sample = (function () { function Sample() { } Sample.prototype.hello = function (word) { if (word === void 0) { word = "TypeScript"; } return "Hello, " + word; }; return Sample; })(); app.Sample = Sample; })(app ¦¦ (app = {})); var obj = new app.Sample(); console.log(obj.hello("AngularJS")); es6 module 普及したらbad practice
  29. 29. Generics http://goo.gl/Hh1Aly class Container<T> { constructor(public data: T) { } } ! var a = new Container("str"); var b = new Container(1); ! a.data.charAt(0); b.data.toExponential();
  30. 30. 続きはWebで! http://goo.gl/mcF92t http://goo.gl/Htqn5E 書籍もよろしく! http://goo.gl/QiXe8t
  31. 31. 始めよう! sample: http://goo.gl/x6gG7Z
  32. 32. お断り 流行より わかりやすくて 動くもの
  33. 33. tools • node.js! • grunt! • bower! • wiredep! • TypeScript! • tslint! • typedoc! • dtsm (tsd)! • LESS! • unit test! • mocha! • power-assert! • karma! • protractor! • その他細々…
  34. 34. tools • node.js! • grunt! • bower! • wiredep! • TypeScript! • tslint! • typedoc! • dtsm (tsd)! • LESS! • unit test! • mocha! • power-assert! • karma! • protractor! • その他細々…ここだけ!
  35. 35. node.js • JavaScript実行環境! • この環境で色々なツールを動かす! • https://nodejs.org/! • github.com/hokaccha/nodebrew! • 最近 io.js とかあるけどまぁnode.jsで
  36. 36. grunt • タスクランナー! • npm install -g grunt-cli! • 最近 gulp とかあるけどまぁ grunt で! • http://gruntjs.com/
  37. 37. bower • ライブラリの管理! • AngularJS 含む! • grunt 経由で使う! • 最近 npm & browserify とかあるけど
  38. 38. LESS • cssを生成するaltCSS的な言語! • grunt 経由で使う! • 別にcssでもscssでもお好きなのを…! • 生cssはちょっと脳がついていけない
  39. 39. karma • テストランナー! • grunt 経由で使う! • Chrome, Firefox, IE etc… を操れる! • その他! • mocha! • power-assert
  40. 40. protractor • E2Eテストランナー! • grunt 経由で使う! • jasmineにしとくと無難
  41. 41. with TypeScript
  42. 42. tools • node.js! • grunt! • bower! • wiredep! • TypeScript! • tslint! • typedoc! • dtsm (tsd)! • LESS! • unit test! • mocha! • power-assert! • karma! • protractor! • その他細々…
  43. 43. TypeScript • npm install -g typescript! • npm install grunt-ts —save-dev! • npm install grunt-typescript —save-dev どれか1つ!
  44. 44. tslint • TypeScript用lintツール! • AST(抽象構文木)を検査する! • TypeScript固有の事情も考慮されている jshint, eslintは 僕は使ってません
  45. 45. typedoc • JSDoc的なヤーツ! • TypeScript専用! • わりといい感じのドキュメントが出る jshint, eslintは 僕は使ってません
  46. 46. grunt-typedoc too old!!
  47. 47. grunt-typedoc
  48. 48. grunt-typedoc !?
  49. 49. grunt-typedoc 今度直しときます…
  50. 50. dtsm • 型定義ファイルの管理に! • 作者 == vvakame! • 実質DefinitelyTypedのダウンローダ! • デファクトはtsdというツール! • オプションが覚えられなかったので 作者→
  51. 51. エディタ • Visual Studio! • WebStorm! • IntelliJ IDEA! • Eclipse! • Atom! • Sublime Text! • Emacs! • Vim! • etc, etc…
  52. 52. エディタ • TypeScriptコンパイラ自体がIDE用API 持ってる! • LanguageServiceと呼ばれる! • VisualStudio同等の機能が実装しやすい! • お好きなエディタで書きましょう
  53. 53. エディタ • Visual Studio! • WebStorm! • IntelliJ IDEA! • Eclipse! • Atom! • Sublime Text! • Emacs! • Vim! • etc, etc… Win Mac Mac WebStorm(IntelliJ IDEA)は 我が道を行ってる…
  54. 54. 手順 • ライブラリ本体 える! • 型定義ファイル える! • コード書く! • コンパイルとかする! • atom-typescript任せも可! • 動かす! 実演!
  55. 55. With AngularJS 1.3 sample: http://goo.gl/x6gG7Z
  56. 56. 簡単なことさ • TypeScriptは特別じゃない! • ただのJavaScriptの延長線上にある! • JS上のBest Practiceはそのまま通用する! • TypeScriptで+αがあるかな! https://github.com/johnpapa/angular-styleguide https://github.com/angular/angular.js/wiki/Best-Practices
  57. 57. 準備 • bower install angular angular-route! • dtsm install angularjs/angular! • dtsm install angularjs/angular-route
  58. 58. 基礎知識 • 型の名前を覚えよう!見つけよう!! • 適当にファイル内検索すればOK! • 使いたいメソッド名! • $apply, $on, $watch etc…! • 使いたいDIオブジェクト名! • $routeProvider, $filter, $compile etc…
  59. 59. お作法 • tsc —noImplicitAny オプションを使う! • 常に!常にだ!最初からだ!! • 型注釈は全力で書け!全力でだ!! • DIベースだとあんまし推論できない! • 型ベースのDIいい…(AngularDart?
  60. 60. プロジェクト構成 • 外部モジュールは使わない! • es6 module が来たら考えよう!! • 今は最終的にconcatだ!!! • コンパイルの始点を決める! • どのファイルからでもコンパイルでき るようにしようとすると死ぬ
  61. 61. 出力順制御問題 • 細かいJSファイルたくさん!! • →結合順序で苦労する! • TypeScriptコード内部に書くのが楽…! • 循環参照問題! • コンパイルの始点によって結果変わる! • モジュール定義とモジュール利用が
 逆になったりするとエラー
  62. 62. プロジェクト構成 index.ts angular.d.ts foo/index.ts foo/module.ts foo/aController.ts foo/bService.ts ←常にここコンパイル  =毎回同じ結果
  63. 63. プロジェクトサンプル README読んでね! Windowsは…動くのか?
  64. 64. protractor • 型定義ファイル干渉問題! • angular.d.ts, protractor.d.ts同時使用不可! • $ の定義がぶつかる! • 全てが丸く収まる解決策なし!! • e2eテストコードと本番コードを混ぜない! • ↑これが全て…守れないなら泥まみれ
  65. 65. TypeScript Q&A 3ヶ月後には 全然違うこといってるかも
  66. 66. browserify使わないの? 使わない まだbowerでよくね…? 僕は次の案件があったら たぶん使うけど…
  67. 67. amd(require.js)使わないの 使わない 生成コードの制御が 地味にめんどい 細かい罠がちょいちょい… 具体的には値として使ってないとコードが消される
  68. 68. —target es6 は? 使わない es6 module syntax 入ってから考えよう!
  69. 69. babel は? 使わない es6 module syntax 入ってから考えよう!
  70. 70. SourceMapは? 使わないほうが… SourceMapには 魔物が住むと聞く…
  71. 71. SourceMap • 変換前と変換後ソースをマッピング! • よーするにTypeScriptのままデバッグ! • validationの仕様が入ってない!! • 変換途中でぶっ壊れてもわからん!! • クソが!! • 多段変換のどこで壊れたかわからん! 今からでも壊れ検出機能ブラウザに入れてくれ
  72. 72. TypeScript専用ライブラリ 使ってない そもそも存在してる? $resource, ui-router 便利!
  73. 73. 実践投入
  74. 74. Case A • オンライン学習システム! • 2013年1月頃! • ほぼ出たてだけど実践投入! • TypeScript 0.8.2! • AngularJS 1.0.3 Dartは怖かった…
  75. 75. Case B • 社内チケット管理システム! • 2014年1月頃! • 途中CoffeeScriptから移行! • TypeScript 0.9.7! • AngularJS 1.2.13 型がないと 改修が怖かった
  76. 76. Case C • 社内共通基盤作成! • 2014年7月! • コンサル的に知見共有させていただいた! • TypeScript 1.1.0-1! • AngularJS 1.3.1 楽しかった
  77. 77. Case D • の何か! • 2014年8月ぐらいから…?! • わかめ抜き案件! • TypeScript 1.3.0! • AngularJS 1.2.26 頑張ってるぽい
  78. 78. TypeScript+AngularJS 1.3 イケますよ! 優れたプロジェクト テンプレートは必要そう
  79. 79. TypeScript API
  80. 80. LanguageService • TypeScriptコンパイラのAPIが露出! • AST(抽象構文木)とか取れる! • 入力補完候補も取れる! • フォーマッタも使える! • 割りといろいろできる! • unstable!
  81. 81. 機能切り出し+α
  82. 82. AST解析+警告出力
  83. 83. 案:Type base DI class FooController { constructor($window: ng.IWindowService) { } } var FooController = (function () { function FooController($window) { this.$window = $window; } return FooController; })(); FooController.$inject = [ $window ];
  84. 84. 案:実行時型検査 • コード→AST→ごにょる→コード生成! • 開発・テスト時には実行時型検査ON! • リリース時にはOFFにする! • JSONの型チェックしたいよね…
  85. 85. 案:Type Check in HTML • AngularJSコードコンパイル後の型情報! • routeProviderでの表記! • HTMLでの記述! • 静的に突き合わせてチェック可能??
  86. 86. Q&A any questions?

×