Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular 2 最新リリースを試してみた
Search
OKUNOKENTARO
November 22, 2015
Programming
7
2.7k
Angular 2 最新リリースを試してみた
ng-kyoto Angular Meetup #3 にて発表した資料です。
OKUNOKENTARO
November 22, 2015
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
170
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
650
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.3k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
Other Decks in Programming
See All in Programming
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
510
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
740
Jakarta EE meets AI
ivargrimstad
0
570
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
GoとPHPのインターフェイスの違い
shimabox
2
210
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
120
Ça bouge du côté des animations CSS !
goetter
2
160
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
Swift Testingのモチベを上げたい
stoticdev
2
150
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
230
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Building Adaptive Systems
keathley
40
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Practical Orchestrator
shlominoach
186
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
It's Worth the Effort
3n
184
28k
GitHub's CSS Performance
jonrohan
1030
460k
Automating Front-end Workflow
addyosmani
1369
200k
Transcript
Angular 2 最新リリースを試してみた ng-kyoto Angular Meetup #3 / Nov 22,
2015
• 奥野 賢太郎 はちさん • 京都市出身 • ng-kyoto代表 •
armorik83
Angular 2の進捗どうですか
• beta 0リリースまでのマイルストーン • 52% (2015/11/22現在) • だいぶAPIは安定した • と思いきや、細部はまだBreaking
Changesある • 大枠は、ほぼ決着 Angular 2 alpha.46
• Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの
• @Input • @Output 主要API
その前に前提知識
• Angular 2はTypeScriptからの利用を想定して 設計されている (ES6, ES5でも書けるように作られてる) • Decorators構文を多用 • Decorators構文については過去の登壇資料を参照
https://speakerdeck.com/armorik83/es7-decorators TypeScript & Decolators
@Directive
• Custom Elementsを作る • AngularJSのDirectiveに相当 • restrict: 'AE'と指定したときのDirective • AngularJSでのDirective名の指定から2ではselector宣言と
なり、要素名・属性名を記述しやすくなった @Directive
AngularJS 1.4 Directive DMBTT"UUSJCVUF/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11 EJSFDUJWF BUUSJCVUF/BNF
\ SFUVSO\ SFTUSJDU" DPOUSPMMFS"UUSJCVUF/BNF$POUSPMMFS ^ ^ JO)5.- EJWBUUSJCVUFOBNFEJW 要素名 実装
Angular 2 Directive !%JSFDUJWF \ TFMFDUPS<BUUSJCVUFOBNF> ^ DMBTT"UUSJCVUF/BNF%JSFDUJWF\ 㹋鄲
^ JO)5.- EJWBUUSJCVUFOBNFOBNF 要素名(セレクタ指定なので属性なら[ ]でくくる)
@Component
• @Directiveと同じくCustom Elementsを作る • templateかtemplateUrlが必須 • テンプレートを持つDirectiveを作るなら @Componentを使えばよい • ng-controllerは廃止
• 基本的には、いくつものComponentの組み合わせで アプリケーションを構築していく @Component
AngularJS 1.4 Directive (with template) DMBTT&MFNFOU/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11
EJSFDUJWF FMFNFOU/BNF \ SFUVSO\ SFTUSJDU& UFNQMBUFQIFMMPQ DPOUSPMMFS&MFNFOU/BNF$POUSPMMFS ^ ^ JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート 実装
Angular 2 Component !$PNQPOFOU \ TFMFDUPSFMFNFOUOBNF UFNQMBUFA QIFMMPQ A ^
DMBTT&MFNFOU/BNF$PNQPOFOU\ 㹋鄲 ^ JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート
@Input
• Custom Elementsに入力インタフェースを提供する • つまり独自要素に属性を追加できる • AngularJSでいうisolatedScopeやbindToControllerに相当 • @Inputアノテーションを使えば記述が簡単 @Input
AngularJS 1.4 bindToController DMBTT4PNF$POUSPMMFS\ DPOTUSVDUPS \ UIJTWBMVFGPP ^ ^ BOHVMBSNPEVMF
"11 EJSFDUJWF TPNF \ SFUVSO\ SFTUSJDU& UFNQMBUFQ\\4PNFWBMVF^^Q DPOUSPMMFS4PNF$POUSPMMFS DPOUSPMMFS"T4PNF TDPQF\^ CJOE5P$POUSPMMFS\WBMVF!^ ^ ^ JO)5.- TPNFWBMVFGPPTPNF 入力の定義
Angular 2 Input !$PNQPOFOU \ TFMFDUPSTPNF UFNQMBUFA Q\\WBMVF^^Q A ^
DMBTT4PNF$PNQPOFOU\ !*OQVU WBMVFTUSJOH PO*OJU WPJE\ UIJTWBMVFGPP ^ ^ JO)5.- TPNFWBMVFGPPTPNF 入力、およびプロパティの定義
@Output
• Custom Elementsに出力インタフェースを提供する • 独自要素から発するイベントを自由に定義できる • Angular 2の目玉であり個人的に一番気になってるAPI • AngularJSの$broadcast,
$emitは廃止 • @Outputアノテーションで記述 @Output
Angular 2 Output !$PNQPOFOU \ TFMFDUPSUPEP UFNQMBUFA CVUUPO DMJDL PO$MJDL
FWFOU $PNQMFUFCVUUPO A ^ DMBTT5PEP$PNQPOFOU\ !0VUQVU DPNQMFUFOFX&WFOU&NJUUFS PO$MJDL NPVTF&WFOU WPJE\ UIJTDPNQMFUFOFYU NPVTF&WFOU ^ ^ JO)5.- UPEP DPNQMFUF PO$PNQMFUF FWFOU UPEP 出力の定義 出力に対する受け取り
• カレンダー、ダイアログボックス、ポップアップといった UIパーツ毎の細々とした制御の実装に • $scope.$emitより構造変更に強く、Fluxに組み込むには 大袈裟すぎる場面で、パーツ内で完結させたい場合に有用 • MouseEvent, KeyboardEventなどを、一旦扱いやすい インタフェースに整えてから外部への公開が可能
• RxJSのObservable準拠で、受け取る側のフィルタリングが楽 • たとえばスクロールやマウス制御などでのthrottle Angular 2 Output は何が嬉しいか
• Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの
• @Input • @Output まずはこの4つが理解できればOK
• UIインタラクションの実装 • @Input, @Outputによるbindとemit • NgAnimateとCSS Transitionによる視覚効果 • ロジックとデータフローの実装
• FluxアーキテクチャはAngular 2においても適用可能 • @Injectableを用いたDIベースのビジネスロジック利用 Application architecture
Angular 2のその他の特徴
• 例のNew Router • アプリケーションのルートに @RouteConfigアノテーションで記述 • Pathに対して、紐付けるComponentを指定 Component Router
@RouteConfig([ {path: '/home', component: HomeComponent, name: 'Home'} ]) class MyApp { } // in HTML <router-outlet><!-- ͜͜ʹඳը --></router-outlet>
• AngularJSでの$http, $resource辺りに相当 • Angular 2 DIに適した形のfetch • 実体はXMLHttpRequestのラップ •
戻り値がPromiseではなくObservableな点が魅力 Http
• AngularJSで便利だったビルトイン・ディレクティブも健在 • ng-class, ng-style, ng-if, ng-for (1でのng-repeat) • フォーム実装を強力に支援するng-formが追加
• Angular 2は単方向バインディング • だが、AngularJSの特徴だった双方向バインディング ng-modelも残っている Built-in Directives
• Promise, EventEmitterを搭載(別途Polyfillする必要なし) • フィルタを実現できるPipes • onInit, onChanges, onDestroyといったLifecycle Hooks
• 生のDOMElementを直接扱える禁断のRef • そのComponent内にのみ適用されるCSS Styles, StyleUrls • DIとKarma, Protractorを活かしたテストの書きやすさ • これぞAngularの正当進化!! And more...
はじめよう Angular 2
• Qiita Angular 2 Advent Calendar 2015準備中! • まだ枠も空いているので、Angular 2試して感想を書くのに最適
• http://qiita.com/advent-calendar/2015/angular2 • それでも空いてる日はng-kyotoのオーガナイザが 頑張って埋めます 告知
Angular 2 最新リリースを試してみた ありがとうございました