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/elementsをもうちょっと追いかけてみる
Search
Toshiya Tanaka
December 14, 2017
Programming
1
330
@angular/elementsをもうちょっと追いかけてみる
ng-sake#10のLT資料
https://qiita.com/studioTeaTwo/items/13d3eed751781bf039fc
Toshiya Tanaka
December 14, 2017
Tweet
Share
More Decks by Toshiya Tanaka
See All by Toshiya Tanaka
hololens-meetup_20180218.pdf
studioteatwo
1
860
chat bot UI by Angular (ng-japan meetup)
studioteatwo
2
1.3k
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
530
ふつうの技術スタックでアート作品を作ってみる
akira888
0
200
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
610
Java on Azure で LangGraph!
kohei3110
0
170
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
820
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
130
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
260
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
KATA
mclloyd
30
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Cult of Friendly URLs
andyhume
79
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Optimizing for Happiness
mojombo
379
70k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
@angular/elementsΛ͏ͪΐͬͱ͍͔͚ͯΈΔ 2017/12/14 ng-sake LTࢿྉ @stutioTeaTwo
about me • TanakaToshiya • @studioTeaTwo • ϋϯυϧωʔϜຊ໊ͷΠχγϟϧΑΓ T.T→T2→TeaTwo •
angularࠓ5݄͔Βɻڈreactɺଞ ʹpureMVCɾbackboneɾcreateJSͳͲ • ڈ·Ͱ5΄Ͳιγϟή͍ͬͯͨɻ ࠓίϯγϡʔϚܥͷwebαʔϏεΛ ࡞͍ͬͯ·͢ɻ
@angular/elementsͱ https://qiita.com/studioTeaTwo/items/13d3eed751781bf039fc هࣄॻ͖·ͨ͠ɻ ࡶʹݴ͏ͱWebComponentsʹ͢ΔPKGͰ͢ɻ
ࠓ͏ͪΐͬͱ͍͔͚ͯΈ·͢ɻ
@angular/elements ͷ͕͜͜Θ͔Βͳ͍Αʂ AngularMixAngularConnect2017ͷRobࢯͷϓϨθϯ༰ͱ @angular/elementsͷެ։༰ʹڑ͕͋Δɻ ɾRobࢯportable(࣋ͪӡͼ)ͱinterop(૬ޓӡ༻)Λશ໘ʹग़͢ ʮAngular Components outside of Angular
applicationsʯ ɾgkalpakࢯWebComponentsʹ͚ͬΒΕͨΑʂYeah! ʮAngular applications on Web Componentsʯ
ཁɺrobࢯ͕ϓϨθϯ͍ͯ͠ΔFancy-DatePicker Λ࡞ͬͯͱ͔·ͩͰ͖ͳ͍ͬͯ͜ͱͰ͢ɻ
ͳͥڑ͕͋Δͷ͔ʁ • Packaging&Deploy͕ఏڙ͞Ε͍ͯͳ͍ • Angularࣗ3rd-partyϥΠϒϥϦΛશ෦όϯυϧ͠ͳ͍ͱ͍͚ͳ͍ • όϯυϧαΠζඦKBʙMBͱ͔Ͷ • ͱݴ͏͔ɺAngularPJؒͰͷcomponent૬ޓӡ༻Ͱग़Δ •
2ճϨϯμʔͪ͠Ό͏ɻdouble-compilation • AngularࣗͷrenderͷޙʹWebComponentsͱͯ͠͏Ұճrender ͢Δ • ಉ͡DependencyΛγΣΞͰ͖ͳ͍ • ճආࡦ͋ΔˠPlatformRefͰγΣΞ͢Δ • ͔͠͠ɺવͳ͕Βόʔδϣϯҧ͏ͱΩϏγΠ
double-compilation ಉ͡Ϙλϯ͕2ͭͰ͖ͯΔ https://github.com/angular/angular/issues/20859#issuecomment-350535825
AngularͷϑϧڥͰɺ͔͠ಉ͡PJͰ WebComponentsinclude͠ͳ͍ͱɺ@angular/elements ಈ͔ͳ͍ͬͯ͜ͱͰ͢ɻ
FancyͳDatePicker! εϦϜͳαΠζʂ ϑϧAngularApplication! MBڃʂ ୯ମͰಈ͚ΔΑʂ શ෦ࠐΈࠐΈͰϏϧυͯ͠Ͷʂ
ʮݱࡏɺ@angular/elementsɺlabsͱ͍͏R&Dͷ PJͰల։͞Ε͍ͯ·͢ɻʯ
ͳΔ΄Ͳɺ͔֬ʹʮlab=ݚڀࣨʯஈ֊Ͱ͢Ͷ
ͱ͍͑ɺղܾʹ͍Ζ͍Ζಈ͍͍ͯΔ ɾ ৽ϨϯμϥʔivyμΠϨΫτʹ͜ͷ݅ʹӨڹͦ͠͏ ɾ ϓϥοτϑΥʔϜϑϦʔͰಈ͚ΔΑ͏ʹZoneൈ͖ͷ ChangeDetectionOption͕ొ͍ͯ͠Δ ɾ double-compilationطͰݚڀதɻmix-project·ͩະ ౿ͷʢuncharted territoryʣΒ͍͠
ݱࡏͷ@angular/elementsͷ࣮༰ طଘͷPJͱڥγΣΞ͢Δͭ ࠓͷAppΛؙ͝ͱWebComponentsԽ͢Δͭ
࣍registerAsCustomElementsͰهࣄॻ͜͏ͱࢥ ͍·͢ʢwillʣ