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
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.4k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.6k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.8k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
690
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
530
Devvox Belgium - Agentic AI Patterns
kdubois
1
110
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
980
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
710
Software Architecture
hschwentner
6
2.3k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
30k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for humans not robots
tammielis
254
26k
Context Engineering - Making Every Token Count
addyosmani
5
230
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Optimizing for Happiness
mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Writing Fast Ruby
sferik
629
62k
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 最新リリースを試してみた ありがとうございました