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 Angular Night 4
Search
OKUNOKENTARO
October 03, 2019
Programming
0
1.7k
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
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
130
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
31
9.7k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.1k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.3k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.6k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
600
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
6.1k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
950
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.4k
Other Decks in Programming
See All in Programming
CSC307 Lecture 10
javiergs
PRO
0
310
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
유연한 Composable 설계
l2hyunwoo
0
380
Trial
cairolibrary720
1
130
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
CSC307 Lecture 13
javiergs
PRO
0
150
Terraformテスト入門
msato
0
540
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
継続的な活動で築く地方エンジニアの道
myamashii
2
360
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Typedesign – Prime Four
hannesfritz
37
2.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Optimizing for Happiness
mojombo
373
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Clear Off the Table
cherdarchuk
89
320k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Building Your Own Lightsaber
phodgson
101
5.9k
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