Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Angular 4→8対応にて学んだAngularでのバージョン追従作法 / Classi Angular Night 4
OKUNOKENTARO
October 03, 2019
Programming
0
930
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
okunokentaro
2
780
okunokentaro
7
2.4k
okunokentaro
1
2.8k
okunokentaro
19
5.9k
okunokentaro
0
160
okunokentaro
7
1.7k
okunokentaro
3
1.3k
okunokentaro
0
290
okunokentaro
0
460
Other Decks in Programming
See All in Programming
manfredsteyer
PRO
0
140
mackee
0
500
manfredsteyer
PRO
0
230
mitohato14
0
110
maito1201
1
820
legalforce
PRO
1
680
grapecity_dev
0
170
inoue2002
2
130
danilop
0
220
pirosikick
4
930
yasaichi
30
7.6k
panini
1
160
Featured
See All Featured
kneath
295
39k
samanthasiow
56
6.3k
trallard
14
710
bryan
100
11k
tanoku
86
8.5k
maggiecrowley
10
500
jcasabona
8
550
shlominoach
176
7.5k
ammeep
656
54k
sferik
610
54k
thoeni
4
590
brad_frost
157
6.4k
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