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
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
私の後悔をAWS DMSで解決した話
hiramax
4
140
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
decksh - a little language for decks
ajstarks
4
21k
Langfuseと歩む生成AI活用推進
licux
3
300
Constant integer division faster than compiler-generated code
herumi
2
700
CSC305 Summer Lecture 12
javiergs
PRO
0
130
令和最新版手のひらコンピュータ
koba789
14
8k
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Language of Interfaces
destraynor
160
25k
Into the Great Unknown - MozCon
thekraken
40
2k
Building Applications with DynamoDB
mza
96
6.6k
Code Review Best Practice
trishagee
70
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
BBQ
matthewcrist
89
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Code Reviewing Like a Champion
maltzj
525
40k
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