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
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
99
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
30
9.5k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
1.9k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
18
4.9k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.5k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
570
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
5.9k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
910
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.2k
Other Decks in Programming
See All in Programming
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
Laravel標準バリデーションでできること
hmb_ok
2
360
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
140
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
受託開発でGitLab CI を活用していく
xiombatsg
1
130
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
In The Pink: A Labor of Love
frogandcode
137
21k
Atom: Resistance is Futile
akmur
258
25k
Happy Clients
brianwarren
91
6.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Rails Girls Zürich Keynote
gr2m
91
13k
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 最新リリースを試してみた ありがとうございました