Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular2実践入門
Similar to Angular2実践入門 (20)
More from Shumpei Shiraishi
More from Shumpei Shiraishi (20)
Recently uploaded
Recently uploaded (9)
Angular2実践入門
- 2. 自己紹介 • html5jファウンダー • HTML5 Experts.jp編集長 • 株式会社オープンウェブ・テクノロ ジー代表取締役 • TechFeedというサービスをはじめ ました
- 5. スターターキット作りました • https://goo.gl/WiM2zn – 短縮前: https://github.com/shumpei/angular2-webpack-starter-minimum • Angular2をWebpackで始めるための最小構成。 – 教育用途、もしくは開発環境を自作したい人向け • Out-of-boxを求めるなら以下がおすすめ – angular-seed・・・公式のスターターキット。全 部入り。 – angular-webpack-starter・・・それなりにコンパ クトで割と全部入り
- 6. 動かしてみる $ git clone https://github.com/shumpei/angular2- webpack-starter-minimum $ cd angular2-webpack-starter-minimum $ npm install $ npm start http://localhost:8080/webpack-dev-server/
- 7. Angular2の特徴 • TypeScriptを推奨 • コンポーネント指向 • ちょっとキモい • Angularっぽさ • やっぱりキモい
- 8. 特徴その1: TypeScript • ES.next全部 + 型 • 実験的なサポート扱いの「デコレー ター」は必須
- 9. コードを眺めてみる
- 10. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } app.component.ts
- 11. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } コンポーネント定義 （デコレーター） app.component.ts
- 12. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } <my-app>で 埋め込めるように app.component.ts
- 13. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } テンプレート ファイルのURL app.component.ts
- 15. コンポーネントを書いてみる
- 16. import {Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert- button.component.html' }) export class AlertButtonComponent { } alert-button.component.ts <button>Click me!</button> alert-button.component.html <my-alert-button>で 埋め込めるように
- 17. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent] }) export class AppComponent { } 使用するディレク ティブを宣言 app.component.ts <h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> alert-button.component.html ディレクティブを 利用
- 19. クリックイベントを捕捉してみる
- 20. <button (click)="onClick()">Click me!</button> キモい alert-button.component.ts export class AlertButtonComponent { onClick(): void { window.alert('Hello!'); } } alert-button.component.ts 対応するイベントハ ンドラ
- 21. 特徴その4: Angularっぽさ • サービス／DI／ディレクティブなど、 Angular1で使われてた用語／概念を引き 継いでいる – やり方は大きく変わったけど
- 22. サービスを書いてDIしてみる
- 23. import {Injectable} from 'angular2/core'; @Injectable() export class MyService { loadData(): string[] { return ['a', 'b', 'c']; } } DI可能なサービスの 定義 my.service.ts
- 24. ... import {MyService} from '../services/my.service'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent], providers: [MyService] }) export class AppComponent { private data: string[]; constructor(private myService: MyService) { this.data = myService.loadData(); } } プロバイダの指定 my.service.ts Inject!
- 25. 特徴その5: やっぱりキモい • テンプレート中では、以下の様な記法を 要素内に記述していくことになる。 – ( ), [ ], [( )], #, * – 全力出すとこんな感じ: • HTML/CSSをデコレーターで指定できる <input *ngIf="alive" [(ngModel)]="name" #name>
- 26. ループを書いてみる（ngFor)
- 27. ... <ul> <li *ngFor="#item of data">{{item}}</li> </ul> DI可能なサービスの 定義 app.component.html
- 29. @Component({ selector: 'my-app', template: ` <h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> <ul> <li *ngFor="#item of data">{{item}}</li> </ul> `, styles: [` h1 { color: red; } `], directives: [AlertButtonComponent], providers: [MyService] }) export class AppComponent {...} alert-button.component.ts app.component.ts HTMLもCSSも デコレータに埋め込 める
- 30. CSSもカプセル化される • @Componentデコレーターのstylesというプ ロパティにCSSを指定できる。 • そのCSSはコンポーネント内のみ有効 import {Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert- button.component.html', styles: [`* {color: blue;}`] }) export class AlertButtonComponent { } コンポーネント外に は影響しない
- 33. その1: ハードル高くない？ • 前提技術大杉。 – TypeScript (ES.next全部+型) – モジュールバンドラー – RxJS – そしてもちろんAngular2 • 意外とそうでもなかった（個人的には） – Angularの文脈を引き継いでいる – TypeScriptはJavaっぽい（白石は元Java屋） – RxJSは最初から詳しく知っている必要なし – Webpackの調整が一番時間かかった。。 • でもこれは誰か一人がやればいいこと
- 34. その2: 言語はどれを選ぶ？ • TypeScript一択、だと思う – ドキュメント完備 – 型があるのは嬉しい（コンパイル／コード補 完） – デコレーターが嬉しい • その他の選択肢について – JavaScript/Babel…止めはしない。 (が、きっとTSのほうが楽) – Dart…ごめんなさい
- 35. その3: バンドラーを何にする？ • TypeScriptを選んだのなら、モジュールバ ンドラー必須 import {Component} from 'angular2/core' ↓ (TypeScriptコンパイラ) var Component = require('angular2/core').Component; ↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変換) var component_1 = __webpack_require__(1);
- 36. その3: バンドラーを何にする？ • TechFeedではWebpackを選択 – 実績豊富 – なんでもできそう – 既に下調べが済んでいた • その他の選択肢について – Browserify…未調査 – System.js • 現在のところAngular2公式？ • 後発なため情報が少なめ • JSPMも組み合わせる必要あり？ • 参考文献 – http://webpack.github.io/docs/comparison.html – http://ilikekillnerds.com/2015/07/jspm-vs-webpack/
- 37. その4: エディタは何にする？ • TypeScript対応のものを（できればtslint も） – Atom+Plugins – Sublime Text+Plugins – Visual Studio Code – WebStorm • 元Java屋さんとしては、「IDE」にも心惹 かれる今日このごろ
- 38. その5: テンプレートを どこに書く？ Webpackを使えばこんなことも！ @Component({template: `code`}) // (1) @Component({templateUrl:'url'}) // (2) VS @Component({template:require('a.html')}) // (3) リクエスト数 ファイル数 HTML分離 エディタサ ポート 前処理 (1)埋め込み 少 少 × × × (2)URL 多 多 ○ ○ × (3)Webpack 少 少 ○ ○ ○
- 39. その6: テンプレートがキモい • 慣れろ • 新しいメンタルモデルを理解すれば、少しは楽に なる。 – こいつはHTMLじゃない。HTML Plusだ。 – タグの属性と(DOMの)プロパティはそもそも似て非 なるものだ。 – [ ]はプロパティを指している – 属性ってやつは、プロパティの初期化に過ぎない。 <!-- 属性でスタイルを指定 --> <div style="font-size: 16px"></div> <!-- プロパティでスタイルを指定 --> <div [style.fontSize]="16px"></div>
- 40. その7: Sassを使いたい • モジュールバンドラーの機能を駆使すれば、 Sass/Less/Stylus/PostCSSなども利用可能 @Component({styles:[require('comp.scss')]}) loaders: [ {test: /.scss$/, loaders: ['raw', 'sass?sourceMap', 'postcss'], exclude: /node_modules/} ... ] • Webpackでの設定例
- 41. その8: RxJSとのつきあい方 • RxJS（リアクティブプログラミング用ライブラリ） は、理解が必須ではないものの、限りなく必須に近い – HTTP, EventEmitterなどの頻出APIがRxJS前提なため • ObservableはES7にも提案されているので、この機会 に勉強しておくのは吉 – でも、奥深すぎ。。 • Angular2はRxJS5 (Beta)を使っているので要注意！ – ググッて先頭に出てくるのは4系 – 「ReactiveX」ってやつが5系です – 5系は、ドキュメントとかもまだまだ・・・
- 42. その9: ページネーションしたい • よくあるユースケースだけど、世界中が現在実装方法 を模索中 • ぼくらはObservableの簡単なラッパーを作りました – 以下はイメージを伝えるための擬似コード interface PagedObservable<T> extends Observable<T> { nextPage(): void; } class EntryService { getTimeline(): PagedObservable<Entry[]> } class TimelineComponent { timeline: PagedObservable<Entry[]>; more() { this.timeline.nextPage(); } }
- 43. その10: UIフレームワーク 使いたい！ • TechFeedではIonic2を採用 – Angular2で完全にリライトされている – Angular2開発の参考にもなる • その他（調査中） – Onsen UI 2.0 – angular-material2 – ng2-bootstrap
- 44. その11: コンポーネント設計 • コンポーネントの粒度や、振る舞いや状態をどこ に配置するかは、現在熱い話題 • 「Presentational and Container Components」が 議論の土台 – だが、やはり悩ましい – 「全部外側に移譲する」ってこと？めんどくさすぎ ない？ – Google MapsやYoutubeの埋め込みプレーヤー、「い いね！」ボタンなどは良いコンポーネントの例に思 える。スマートだけど再利用性高い。 • 「必要になるまで分割するな」 – 個人的に、唯一の正解と思えていること
- 45. おまけ
- 47. ご清聴ありがとうございました。