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 4→8対応にて学んだAngularでのバージョン追従作法 / Classi A...
Search
OKUNOKENTARO
October 03, 2019
Programming
0
1.8k
Angular 4→8対応にて学んだAngularでのバージョン追従作法 / Classi Angular Night 4
2019/10/3、Classi Angular Night #4 にて発表した資料です。
OKUNOKENTARO
October 03, 2019
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.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
680
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
750
リッチエディターを安全に開発・運用するために
unachang113
1
350
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
構文解析器入門
ydah
7
2k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
740
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
370
Vibe coding コードレビュー
kinopeee
0
400
TypeScriptでDXを上げろ! Hono編
yusukebe
4
920
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Navigating Team Friction
lara
188
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Music & Morning Musume
bryan
46
6.7k
Automating Front-end Workflow
addyosmani
1370
200k
Scaling GitHub
holman
461
140k
Transcript
"OHVMBSˠରԠʹֶͯΜͩ "OHVMBSͰͷόʔδϣϯै࡞๏ 0DU $MBTTJ"OHVMBS/JHIU !PLVOPLFOUBSP
୭ w Ԟݡଠ!PLVOPLFOUBSP w ΫϨεΣΞද w ϑϩϯ τΤϯ υ ɾ
όοΫΤϯ υ ɾ ΤϯδχΞ w "OHVMBSຊϢʔβʔձ OHLZPUPΦʔΨφΠβ
͜Ε·Ͱͷొஃ༰
ຊͷ༰ w ϨΨγʔΞϓϦέʔγϣϯͷϞμϯԽΛ࣮ࢪͨ͠ w ͲͷΑ ͏ʹܭըཱͯͯϨΨγʔΞϓϦέʔγϣϯΛҠ২͔ͨ͠ w ࠓޙͲ͏ ͍͖͍͔ͯͨ͠ɺ ԿΛݟਾ͑ͯखΛೖΕΔ͔
ϨΨγʔΞϓϦέʔγϣϯͷϞμϯԽ
ϨΨγʔΞϓϦέʔγϣϯͱ wʮϨΨγʔίʔ υվળΨΠ υʯ ͰϨΨγʔίʔ υΛ ςε τͷͳ͍ίʔ υͱఆ͍ٛͯ͠Δ w
ࠓճड़ΔϨΨγʔΞϓϦέʔγϣϯԼهΛࢦ͢ͷͱ͢Δ w ςε τ͕͋ͬͨΓͳ͔ͬͨΓ ͭͭ͠ w ͱʹ͔͘ݹ͘ w ͍ؒ୭ͷखՃΘͬͯͳ͍ͷ
ରͳʹ͔ w Նʹ։ൃ͕։࢝͞Εͨɺ ͱ͋Δཧը໘ w "OHVMBSΛར༻ w ࣌ͷݶΒΕͨਓһ ɾ Ͱָ͠
͘։ൃ ʢਪଌʣ w ࣗՆ·Ͱؔ༩͍ͯ͠ͳ͍
͔ͳΓ߈ΊͯΔ "OHVMBSͷϦ Ϧʔε݄
࣌ͷࣄ͕·͔ͬͨ͘ΒΜ w ελʔ τΞοϓ͋Δ͋Δ w ιϩϓϨʔ w ίϛ ο τϩά୭ಡ·ͳ͍ͷͰ؆ૉ
w ͦͦίʔ υ ϨϏϡʔ͢ΔΤϯδχΞ͕͍ͳ͍ w ͦͦࣾʹΤϯδχΞ͕Γͳ͍
ख͕ೖΒͳ͘ͳͬͨ w ʹͳΔʹͭΕίϛ ο τ͕ݮ͍ͬͯ͘ w ݄Λ࠷ޙʹ࣮ͦͷ·· w ݄ʹ"OHVMBS͔Βɽ ɽ
ʹରԠ w ͻͬͦ Γ ͱͰӡ༻͞Εଓ͚Δ
ϑϧϦ ϓϨʔε͔ɺ ϚΠάϨʔγϣϯ͔ w ݹ͗͢Δͷͱɺ ଞͷ༷ʑͳࣄ͋Γ৽όʔδϣϯͷ։ൃ͕ܾఆ w େͷػೳϑϧϦ ϓϨʔεͰ࣮ࢪ w
ίʔ υͷ৽Α Γ ɺ αʔϏε ɾ ཧը໘ࣗମͷ৽͕త w ͔͠͠Ұ෦ը໘Ϧ ϓϨʔεͷΛݟੵΔͱॏ͍ʜ w खೖΕ͞Ε͍ͯͳ͍͕ɺ ϚΠάϨʔγϣϯͰ͖ΔͳΒͦͷු͘ ʁ w ϚΠάϨʔγϣϯ ɾ ίε τͱ Ϧ ϓϨʔε ɾ ίε τͷఱṝʜ
ͬͯͯΑ͔ͬͨ"OHVMBS w "OHVMBS Ξοϓσʔ τʹؔ͢Δެࣜͷใɺ มߋհ͕ͱͯखް͍ϑ ϨʔϜϫʔΫ w Ͳͷόʔδϣϯ͔Βɺ Ͳͷόʔδϣϯʹ্͛Δͱ
Կ͕มΘͬͯԿΛ͖͢ͳͷ͔͕ཏ͞Ε͍ͯΔ
VQEBUFBOHVMBSJP https://update.angular.io/
ϚΠάϨʔγϣϯޭ ʂ w Ϧ ϓϨʔε͠ͳ͍Ұ෦ػೳɺ ϦχϡʔΞϧલޙͰఏڙ༰͕มΘΒͳ͍ͨΊ ϚΠάϨʔγϣϯͷ࠾༻Մೳੑ͕͋ͬͨ w "OHVMBSΛ࠾༻͍͓͔ͯͨ͛͠ͰˠՄೳͱஅ w
༷ॻͷແ͍ػೳͷ༷Ѳ͔Β࢝ΊͯϦ ϓϨʔε͢ΔΑ Γ ϚΠάϨʔγϣϯ͕ͩΖ͏ ͱஅ w ݁Ռతʹݱࡏ"OHVMBSͰݩؾʹಈ͍ͯ·͢
ϚΠάϨʔγϣϯܭը
Ͳ͏ͬͯਐΊΔ͔ w ͬͯͯΑ͔ͬͨ"OHVMBS w ͱݴ͏ ͷͷɺ ҰےೄͰ͍͔ͳ͍ w ܭըΛ࿅Δඞཁ͕͋Δ
खͰؤுΔ w ࣌"OHVMBS$-* ʢ݄ʣ w ࣗಈϚΠάϨʔγϣϯͯ͘͠ΕΔศརίϚϯ υ ng updateͷఏڙ"OHVMBS$-*
ʢ݄ʣ ͔Β w "OHVMBSˠා͍ w "OHVMBSˠ ˠΛܦͯҰ୴"OHVMBSܥʹண͢Δ w ౖ౭ͷίϛ ο τΛ͝հ
"OHVMBSˠͦͷલʹʜ w ͦͦ࣌ /PEFKTͷόʔδϣϯ͍ͭ͘ɺ OQN͍ͭ͘Ͱಈ͍͍ͯͨͷ͔͢Βෆ໌ w ։ൃڥͷ࠶ݱ͢Βࠔ w ͱ Γ͋͑ͣ։ൃ͕ࢭ·ͬͨ࣌ظ͔Βٯࢉͯ͠
ʮ/PEFKT͜ΕͩΖ͏ɺ ͦͷͱ͖ʹಉࠝ͞ΕΔOQN͜Εͷͣʯ ͱ͍͏ԾఆͰߏங w ڭ܇ ɿ .node-version, package.json engine, README.md ͳͲΛ ࠒ͔Βϝϯς͓ͯ͘͠
ΞʔΩςΫνϟͷζϨ w ϨΨγʔΞϓϦͷׂͷػೳ (JU)VCͷผϦϙδτ ϦʹͯϦ ϓϨʔε։ൃΛਐΊ͍ͯΔ w ཧը໘ͷ͏ ͪΘ͔ͣը໘͚ͩΛϚΠάϨʔγϣϯ͍ͨ͠ w
ͨͩ͠ Ϧ ϓϨʔεଆͷΞʔΩςΫνϟͱͷ߹ੑօແ
Ϟϊ Ϩϙ͔Βͷϋʔ υϑΥʔΫઓུ w ϨΨγʔΞϓϦ͔ΒࢠΞϓϦΛ࡞ΓϞϊ ϨϙߏΛऔΔ w ࢠΞϓϦͷΈ"OHVMBS
ͱਐΊΔ w ࢠΞϓϦ͕"OHVMBSʹϚΠάϨʔγϣϯྃͨ͠Β ৽ ɾ ΞϓϦͷࢠʹͳΔΑ ͏ϋʔ υϑΥʔΫ w ৽ ɾ ΞϓϦ͕ࢠΞϓϦͷίϯϙʔωϯ τΛ෦తʹऔΓࠐΉ w ʂ ʂ
ਤղ ϨΨγʔ Ϧ ϓϨʔε ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF Ϧ ϓϨʔε ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF Ϧ
ϓϨʔε ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF $PNQPOFOUͱ 4FSWJDF Ϧ ϓϨʔε
ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF $PNQPOFOUͱ 4FSWJDF Ϧ ϓϨʔε
ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF $PNQPOFOUͱ 4FSWJDF Ϧ ϓϨʔε
ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF $PNQPOFOUͱ 4FSWJDF Ϧ ϓϨʔε
ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
Ϧ ϓϨʔε ϨΨγʔࢠ $PNQPOFOUͱ 4FSWJDF ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ
4FSWJDF $PNQPOFOUͱ 4FSWJDF ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ
Ϧ ϓϨʔε ϨΨγʔࢠ ਤղ ϨΨγʔ ϨΨγʔࢠ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF $PNQPOFOUͱ
4FSWJDF ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ $PNQPOFOUͱ 4FSWJDF
Ϧ ϓϨʔε ਤղ ϨΨγʔ ϨΨγʔ͕͏ $PNQPOFOUͱ 4FSWJDF ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ $PNQPOFOUͱ
4FSWJDF
Ϧ ϓϨʔε ਤղ ͪΌΜͱઃܭ͞Εͨ ΞʔΩςΫνϟ $PNQPOFOUͱ 4FSWJDF
"OHVMBSˠ w ݹ͍ίʔ υελΠϧ༰ࣻͳ͘QSFUUJFSͰܗ w "OHVMBSˠ@angular/http͔Β@angular/common/http HttpClientͷҠߦَ͕ w ࣗۀ্ɺ ௨ࢉճͷHttpClientҠߦͩͬͨͷͰॗʑ
ͱਐΊΔ w ్தBOZͩΒ͚ͩͬͨͱ͜ΖΛܕ͚͍ͨ͠ؾ͙࣋ͪͬͱת͑Δ w ڭ܇ৗࠒBOZΘͣʹ͍Δ͠
"OHVMBSˠ w "OHVMBS$-*ొ w .angular-cli.json͔Βangular.jsonͷม͕ࢁ w ઌʹ$-*ͷΈαϙʔ τόʔδϣϯΛ্͔͛ͯΒ ng update
@angular/coreͰมରԠ w ຯʹ3Y+4ˠͷํ͕ॏ͍͜ͷϑΣʔζ w .pipe()ͷॻ͖͑Λͻͨ͢Βॗʑ ͱߦ͏ w େBOZͳ··ͳͷͰɺ ৗʹมߋͨ͠ΒରػೳΛखಈσόοά ʢςε τͳ͍ʣ
"OHVMBSˠ w OHVQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷΜ w ͳΜͱ"OHVMBS͔Βͷίϛ ο τΘ͔ͣͭ
"OHVMBSˠ w OHVQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷΜ w ͳΜͱ"OHVMBS͔Βͷίϛ ο τΘ͔ͣͭ
OHVQEBUFΛ৴͡Ζ w "OHVMBSਓձͬΆ͍͕ ʮ͔ͭͯͷϚΠάϨʔγϣϯࠎ͕ંΕͨʯ w ࠓͷ"OHVMBSͱʹ͔͘ w શવࠎંΕͳ͍ͷͰɺ ͪΌΜͱ࠷৽൛͕ग़ͨΒ֬อ্ͯ͛͠Α
͏ ʂ w ͪͳΈʹࠓճͷˠʹֻ͔ͬͨਓ ʢ˞ϏδωεѲ͕ࡁΜͰ͓Γը໘ͷΈҠ২ͱ͍͏݅ͳͷͰɺ ৗʹ͜ͷͰରԠͰ͖ͳ͍Ͱ͢ʣ
ࠓޙͷϦ ϑΝΫλ Ϧ ϯάํ
ͳʹͱ͋Εܕ͚ w BOZ͕͋· Γʹଟ͍ͷͰॱ࣍ܕ͚ w ಛʹ!0VUQVUͷnew EventEmitter<any>() ԿΛૹͬͯͲ͏͍ͬͯΔͷ͔ɺ ·ΔͰ͑ͳ͍ͷͰૣظʹखೖΕ w
3&45"1*Λୟ͘पลશମతʹBOZͰࠔΔͷͰखೖΕ w ৫͕ٸͷϑΣʔζ͔ΒظͷϑΣʔζʹҠͬͨͷͰ ࣌ؒΛ੯͠·ͣஸೡʹܕ͚
ͳϑΝΠϧΛআڈ w ͨͱ͑constructorͷॻ͔Ε͍ͯͳ͍4FSWJDF w Ұग़ͯ͜ͳ͍this w ͜͏͍ͬͨؔूͷΑ ͏ͳϢʔςΟ ϦςΟ ɾ
αʔϏεͲΜͲΜআڈ w ϝ ιο υΛ७ਮͳؔͱ ͯ͠Γग़ͯ͠୯ମςε τΛॆ࣮ͤ͞Δ
৽ΞʔΩςΫνϟʹԊΘͤΔ w େͷίʔ υ ʮಈ͍͍ͯΔͷͰͳ͍ʯ w Կ͕͔ͱ͍͏ ͱ ʮͳͥͦ͜ʹॻ͍ͨͷ͔ʯ
w ΞʔΩςΫνϟҙ͕ࣝݱࡏͱҟͳΔࠒͷίʔ υ ʢಛʹελʔ τΞοϓॳظͩͱʣ 'BUʹͳΓ͕ͪ w 'BUͳॲཧͦͷͷͷϦ ϑΝΫλ Ϧ ϯάΛͭͿͬͯɺ ߦ୯ҐͰϑΝΠϧׂ w ϑΝΠϧׂͱ ϑΝΠϧ໊͚͕ஸೡʹͳΔ͚ͩͰՄಡੑ͔ͳΓ্͕Δ w ܕ͚͕ेʹͳΕϑΝΠϧׂલޙͷίϯύΠϧอূͰ͔ͳΓ҆৺ײΛಘΔ
ݹ͍ίʔ υਖ਼ͳΜͱ͔ͳΔ w 'BUͳͷ͕ࢥߟΛࢭΊΔݪҼ w ߦͷݹ͍ίʔ υಡΊͳ͍ w Θ͔ͣߦͷݹ͍ίʔ υͩͬͨΒಡΊΔ
w ݹ͍ίʔ υͷϦ ϑΝΫλ Ϧ ϯάΑ Γɺ ࣮Λ͍͡Βͳ͍ϑΝΠϧׂͷ΄͏͕ අ༻ରޮՌ͕ߴ͘ɺ Τϯόάආ͚͍͢ w ຊʹՄಡੑʹ͕͋Δίʔ υͷϦ ϑΝΫλ Ϧ ϯάͷͨΊͳΒ ୯ମςε τΛશྗͰॻ͘
w ελʔ τΞοϓ͋Δ͋Δͱ ͯ͠ ॳظͷϓϩάϥϛϯάࢥͱɺ தظϑΣʔζͷࢥҰக͠ͳ͍ w ࣌ͷΤϯδχΞʹ ʮʹͳͬͯεϜʔζʹಡΊΔΑ ͏ʹॻ͚ʯ
ͱݴ͏ͷ͓ҧ͍ w ຊؾΛग़ͤͪΌΜͱϚΠάϨʔγϣϯͰ͖Δ w ͦͷͱ͖උͰ͖Δਓ͕ͪΌΜͱඋ͍ͯ͘͠ w ϘʔΠεΧ τͷεϩʔΨϯͷળߦΛҙࣝ ʢ ʰϓϩάϥϚ͕Δ͖ͷ͜ͱʱ Α Γʣ ૯ׅ
5IBOLZPV