Angular 4→8対応にて学んだAngularでのバージョン追従作法 / Classi Angular Night 4

Slide 1

Slide 1 text

"OHVMBSˠରԠʹֶͯΜͩ "OHVMBSͰͷόʔδϣϯ௥ै࡞๏ 0DU $MBTTJ"OHVMBS/JHIU !PLVOPLFOUBSP

Slide 2

Slide 2 text

୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅ද w ϑϩϯ τΤϯ υ ɾ όοΫΤϯ υ ɾ ΤϯδχΞ w "OHVMBS೔ຊϢʔβʔձ  OHLZPUPΦʔΨφΠβ

Slide 3

Slide 3 text

͜Ε·Ͱͷొஃ಺༰

Slide 4

Slide 4 text

ຊ೔ͷ಺༰ w ϨΨγʔΞϓϦέʔγϣϯͷϞμϯԽΛ࣮ࢪͨ͠ w ͲͷΑ ͏ʹܭըཱͯͯϨΨγʔΞϓϦέʔγϣϯΛҠ২͔ͨ͠ w ࠓޙͲ͏ ͍͖͍͔ͯͨ͠ɺ ԿΛݟਾ͑ͯखΛೖΕΔ͔

Slide 5

Slide 5 text

ϨΨγʔΞϓϦέʔγϣϯͷϞμϯԽ

Slide 6

Slide 6 text

ϨΨγʔΞϓϦέʔγϣϯͱ͸ wʮϨΨγʔίʔ υվળΨΠ υʯ Ͱ͸ϨΨγʔίʔ υΛ  ςε τͷͳ͍ίʔ υͱఆ͍ٛͯ͠Δ w ࠓճड़΂ΔϨΨγʔΞϓϦέʔγϣϯ͸ԼهΛࢦ͢΋ͷͱ͢Δ w ςε τ͕͋ͬͨΓͳ͔ͬͨΓ ͭͭ͠ w ͱʹ͔͘ݹ͘ w ௕͍ؒ୭ͷख΋ՃΘͬͯͳ͍΋ͷ

Slide 7

Slide 7 text

ର৅͸ͳʹ͔ w ೥Նʹ։ൃ͕։࢝͞Εͨɺ ͱ͋Δ؅ཧը໘ w "OHVMBSΛར༻ w ౰࣌ͷݶΒΕͨਓһ ɾ ޻਺Ͱָ͠ ͘։ൃ ʢਪଌʣ w ࣗ෼͸೥Ն·Ͱؔ༩͍ͯ͠ͳ͍

Slide 8

Slide 8 text

͔ͳΓ߈ΊͯΔ "OHVMBSͷϦ Ϧʔε͸೥݄

Slide 9

Slide 9 text

౰࣌ͷࣄ৘͕·ͬͨ͘෼͔ΒΜ w ελʔ τΞοϓ͋Δ͋Δ w ιϩϓϨʔ w ίϛ ο τϩά͸୭΋ಡ·ͳ͍ͷͰ؆ૉ w ͦ΋ͦ΋ίʔ υ ϨϏϡʔ͢ΔΤϯδχΞ͕͍ͳ͍ w ͦ΋ͦ΋ࣾ಺ʹΤϯδχΞ͕଍Γͳ͍

Slide 10

Slide 10 text

ख͕ೖΒͳ͘ͳͬͨ w ೥຤ʹͳΔʹͭΕίϛ ο τ͕ݮ͍ͬͯ͘ w ೥݄Λ࠷ޙʹ࣮૷͸ͦͷ·· w ೥݄ʹ"OHVMBS͔Βɽ ɽ ʹରԠ w ͻͬͦ Γ ͱͰӡ༻͞Εଓ͚Δ

Slide 11

Slide 11 text

ϑϧϦ ϓϨʔε͔ɺ ϚΠάϨʔγϣϯ͔ w ݹ͗͢Δͷͱɺ ଞͷ༷ʑͳࣄ৘΋͋Γ৽όʔδϣϯͷ։ൃ͕ܾఆ w େ൒ͷػೳ͸ϑϧϦ ϓϨʔεͰ࣮ࢪ w ίʔ υͷ࡮৽Α Γ ΋ɺ αʔϏε ɾ ؅ཧը໘ࣗମͷ࡮৽͕໨త w ͔͠͠Ұ෦ը໘͸Ϧ ϓϨʔεͷ޻਺Λݟੵ΋Δͱॏ͍ʜ w खೖΕ͞Εͯ͸͍ͳ͍͕ɺ ϚΠάϨʔγϣϯͰ͖ΔͳΒ͹ͦͷ޻਺͸ු͘ ʁ w ϚΠάϨʔγϣϯ ɾ ίε τͱ Ϧ ϓϨʔε ɾ ίε τͷఱṝʜ

Slide 12

Slide 12 text

࢖ͬͯͯΑ͔ͬͨ"OHVMBS w "OHVMBS͸  Ξοϓσʔ τʹؔ͢Δެࣜͷ৘ใɺ มߋ఺঺հ͕ͱͯ΋खް͍ϑ ϨʔϜϫʔΫ w Ͳͷόʔδϣϯ͔Βɺ Ͳͷόʔδϣϯʹ্͛Δͱ  Կ͕มΘͬͯԿΛ͢΂͖ͳͷ͔͕໢ཏ͞Ε͍ͯΔ

Slide 13

Slide 13 text

VQEBUFBOHVMBSJP https://update.angular.io/

Slide 14

Slide 14 text

ϚΠάϨʔγϣϯ੒ޭ ʂ w Ϧ ϓϨʔε͠ͳ͍Ұ෦ػೳ͸ɺ ϦχϡʔΞϧલޙͰఏڙ಺༰͕มΘΒͳ͍ͨΊ  ϚΠάϨʔγϣϯͷ࠾༻Մೳੑ͕͋ͬͨ w "OHVMBSΛ࠾༻͍͓͔ͯͨ͛͠Ͱˠ͸Մೳͱ൑அ w ࢓༷ॻͷແ͍ػೳͷ࢓༷೺Ѳ͔Β࢝ΊͯϦ ϓϨʔε͢ΔΑ Γ  ϚΠάϨʔγϣϯ͕୹޻਺ͩΖ͏ ͱ൑அ w ݁Ռతʹݱࡏ"OHVMBSͰݩؾʹಈ͍ͯ·͢

Slide 15

Slide 15 text

ϚΠάϨʔγϣϯܭը

Slide 16

Slide 16 text

Ͳ͏΍ͬͯਐΊΔ͔ w ΍ͬͯͯΑ͔ͬͨ"OHVMBS w ͱ͸ݴ͏ ΋ͷͷɺ ҰےೄͰ͸͍͔ͳ͍ w ܭըΛ࿅Δඞཁ͕͋Δ

Slide 17

Slide 17 text

खͰؤுΔ w ౰࣌͸"OHVMBS$-* ʢ೥݄ʣ w ࣗಈϚΠάϨʔγϣϯͯ͘͠ΕΔศརίϚϯ υ  ng updateͷఏڙ͸"OHVMBS$-* ʢ೥݄ʣ ͔Β w "OHVMBSˠ͸ා͍ w "OHVMBSˠ ˠΛܦͯҰ୴"OHVMBSܥʹண஍͢Δ w ౖ౭ͷίϛ ο τΛ͝঺հ

Slide 18

Slide 18 text

"OHVMBSˠͦͷલʹʜ w ͦ΋ͦ΋౰࣌  /PEFKTͷόʔδϣϯ͍ͭ͘ɺ OQN͍ͭ͘Ͱಈ͍͍ͯͨͷ͔͢Βෆ໌ w ։ൃ؀ڥͷ࠶ݱ͢Βࠔ೉ w ͱ Γ͋͑ͣ։ൃ͕ࢭ·ͬͨ࣌ظ͔Βٯࢉͯ͠  ʮ/PEFKT͸͜ΕͩΖ͏ɺ ͦͷͱ͖ʹಉࠝ͞ΕΔOQN͸͜Εͷ͸ͣʯ   ͱ͍͏ԾఆͰߏங w ڭ܇ ɿ .node-version, package.json engine, README.md ͳͲΛ  ೔ࠒ͔Βϝϯς͓ͯ͘͠

Slide 19

Slide 19 text

ΞʔΩςΫνϟͷζϨ w ϨΨγʔΞϓϦͷׂͷػೳ͸  (JU)VCͷผϦϙδτ ϦʹͯϦ ϓϨʔε։ൃΛਐΊ͍ͯΔ w ؅ཧը໘ͷ͏ ͪΘ͔ͣը໘͚ͩΛϚΠάϨʔγϣϯ͍ͨ͠ w ͨͩ͠ Ϧ ϓϨʔεଆͷΞʔΩςΫνϟͱͷ੔߹ੑ͸օແ

Slide 20

Slide 20 text

Ϟϊ Ϩϙ͔Βͷϋʔ υϑΥʔΫઓུ w ϨΨγʔ਌ΞϓϦ͔ΒࢠΞϓϦΛ࡞ΓϞϊ Ϩϙߏ଄ΛऔΔ w ࢠΞϓϦͷΈ"OHVMBS ͱਐΊΔ w ࢠΞϓϦ͕"OHVMBSʹϚΠάϨʔγϣϯ׬ྃͨ͠Β  ৽ ɾ ਌ΞϓϦͷࢠʹͳΔΑ ͏ϋʔ υϑΥʔΫ w ৽ ɾ ਌ΞϓϦ͕ࢠΞϓϦͷίϯϙʔωϯ τΛ෦෼తʹऔΓࠐΉ w ׬੒ ʂ ʂ

Slide 21

Slide 21 text

ਤղ ϨΨγʔ਌ Ϧ ϓϨʔε਌ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 22

Slide 22 text

ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF Ϧ ϓϨʔε਌ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 23

Slide 23 text

ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF Ϧ ϓϨʔε਌ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 24

Slide 24 text

ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF $PNQPOFOUͱ  4FSWJDF Ϧ ϓϨʔε਌ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 25

Slide 25 text

ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF $PNQPOFOUͱ  4FSWJDF Ϧ ϓϨʔε਌ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 26

Slide 26 text

ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF $PNQPOFOUͱ  4FSWJDF Ϧ ϓϨʔε਌ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 27

Slide 27 text

ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF $PNQPOFOUͱ  4FSWJDF Ϧ ϓϨʔε਌ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 28

Slide 28 text

Ϧ ϓϨʔε਌ ϨΨγʔࢠ $PNQPOFOUͱ  4FSWJDF ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF $PNQPOFOUͱ  4FSWJDF ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ

Slide 29

Slide 29 text

Ϧ ϓϨʔε਌ ϨΨγʔࢠ ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF $PNQPOFOUͱ  4FSWJDF ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ $PNQPOFOUͱ  4FSWJDF

Slide 30

Slide 30 text

Ϧ ϓϨʔε਌ ਤղ ϨΨγʔ਌ ϨΨγʔ਌͕࢖͏  $PNQPOFOUͱ  4FSWJDF ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ $PNQPOFOUͱ  4FSWJDF

Slide 31

Slide 31 text

Ϧ ϓϨʔε਌ ਤղ ͪΌΜͱઃܭ͞Εͨ  ΞʔΩςΫνϟ $PNQPOFOUͱ  4FSWJDF

Slide 32

Slide 32 text

"OHVMBSˠ w ݹ͍ίʔ υελΠϧ͸༰ࣻͳ͘QSFUUJFSͰ੔ܗ w "OHVMBSˠ͸@angular/http͔Β@angular/common/http HttpClient΁ͷҠߦَ͕໳ w ࣗ෼͸ۀ຿্ɺ ௨ࢉճ໨ͷHttpClientҠߦͩͬͨͷͰॗʑ ͱਐΊΔ w ్தBOZͩΒ͚ͩͬͨͱ͜ΖΛܕ෇͚͍ͨ͠ؾ࣋ͪ͸͙ͬͱת͑Δ w ڭ܇ৗ೔ࠒBOZ͸࢖Θͣʹ͍Δ΂͠

Slide 33

Slide 33 text

"OHVMBSˠ w "OHVMBS$-*ొ৔ w .angular-cli.json͔Βangular.json΁ͷม׵͕ࢁ৔ w ઌʹ$-*ͷΈαϙʔ τόʔδϣϯΛ্͔͛ͯΒ  ng update @angular/coreͰม׵ରԠ w ஍ຯʹ3Y+4ˠͷํ͕ॏ͍͜ͷϑΣʔζ w .pipe()΁ͷॻ͖׵͑Λͻͨ͢Βॗʑ ͱߦ͏ w େ൒BOZͳ··ͳͷͰɺ ৗʹมߋͨ͠Βର৅ػೳΛखಈσόοά ʢςε τ͸ͳ͍ʣ

Slide 34

Slide 34 text

"OHVMBSˠ w OHVQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷ΋Μ w ͳΜͱ"OHVMBS͔Βͷίϛ ο τ͸Θ͔ͣͭ

Slide 35

Slide 35 text

"OHVMBSˠ w OHVQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷ΋Μ w ͳΜͱ"OHVMBS͔Βͷίϛ ο τ͸Θ͔ͣͭ

Slide 36

Slide 36 text

OHVQEBUFΛ৴͡Ζ w "OHVMBS࿝ਓձͬΆ͍͕  ʮ͔ͭͯͷϚΠάϨʔγϣϯ͸ࠎ͕ંΕͨʯ w ࠓͷ"OHVMBS͸ͱʹ͔͘਌੾ w શવࠎંΕͳ͍ͷͰɺ ͪΌΜͱ࠷৽൛͕ग़ͨΒ޻਺֬อ্ͯ͛͠Α ͏ ʂ w ͪͳΈʹࠓճͷˠʹֻ͔ͬͨ޻਺͸ਓ೔  ʢ˞Ϗδωε೺Ѳ͕ࡁΜͰ͓Γը໘ͷΈҠ২ͱ͍͏৚݅ͳͷͰɺ ৗʹ͜ͷ޻਺Ͱ͸ରԠͰ͖ͳ͍Ͱ͢ʣ

Slide 37

Slide 37 text

ࠓޙͷϦ ϑΝΫλ Ϧ ϯάํ਑

Slide 38

Slide 38 text

ͳʹ͸ͱ΋͋Εܕ෇͚ w BOZ͕͋· Γʹ΋ଟ͍ͷͰॱ࣍ܕ෇͚ w ಛʹ!0VUQVUͷnew EventEmitter()͸  ԿΛૹͬͯͲ͏࢖͍ͬͯΔͷ͔ɺ ·ΔͰ௥͑ͳ͍ͷͰૣظʹखೖΕ w 3&45"1*Λୟ͘पล΋શମతʹBOZͰ͸ࠔΔͷͰखೖΕ w ૊৫͕ٸ੒௕ͷϑΣʔζ͔Β௕ظ੒௕ͷϑΣʔζʹҠͬͨͷͰ  ࣌ؒΛ੯͠·ͣஸೡʹܕ෇͚

Slide 39

Slide 39 text

৑௕ͳϑΝΠϧΛআڈ w ͨͱ͑͹constructorͷॻ͔Ε͍ͯͳ͍4FSWJDF w Ұ౓΋ग़ͯ͜ͳ͍this w ͜͏͍ͬͨؔ਺ूͷΑ ͏ͳϢʔςΟ ϦςΟ ɾ αʔϏε͸ͲΜͲΜআڈ w ϝ ιο υΛ७ਮͳؔ਺ͱ ͯ͠੾Γग़ͯ͠୯ମςε τΛॆ࣮ͤ͞Δ

Slide 40

Slide 40 text

৽ΞʔΩςΫνϟʹԊΘͤΔ w େ൒ͷίʔ υ͸ ʮಈ͍͍ͯΔͷͰ໰୊ͳ͍ʯ w Կ͕໰୊͔ͱ͍͏ ͱ ʮͳͥͦ͜ʹॻ͍ͨͷ͔ʯ w ΞʔΩςΫνϟҙ͕ࣝݱࡏͱ͸ҟͳΔࠒͷίʔ υ͸  ʢಛʹελʔ τΞοϓॳظͩͱʣ 'BUʹͳΓ͕ͪ w 'BUͳॲཧͦͷ΋ͷͷϦ ϑΝΫλ Ϧ ϯά͸໨ΛͭͿͬͯɺ ߦ୯ҐͰϑΝΠϧ෼ׂ w ϑΝΠϧ෼ׂͱ ϑΝΠϧ໊෇͚͕ஸೡʹͳΔ͚ͩͰ΋Մಡੑ͸͔ͳΓ্͕Δ w ܕ෇͚͕े෼ʹͳΕ͹ϑΝΠϧ෼ׂલޙͷίϯύΠϧอূͰ͔ͳΓ҆৺ײΛಘΔ

Slide 41

Slide 41 text

ݹ͍ίʔ υ͸ਖ਼௚ͳΜͱ͔ͳΔ w 'BUͳͷ͕ࢥߟΛࢭΊΔݪҼ w ߦͷݹ͍ίʔ υ͸ಡΊͳ͍ w Θ͔ͣߦͷݹ͍ίʔ υͩͬͨΒಡΊΔ w ݹ͍ίʔ υͷϦ ϑΝΫλ Ϧ ϯάΑ Γɺ ࣮૷Λ͍͡Βͳ͍ϑΝΠϧ෼ׂͷ΄͏͕  අ༻ରޮՌ͕ߴ͘ɺ Τϯόά΋ආ͚΍͍͢ w ຊ౰ʹՄಡੑʹ೉͕͋Δίʔ υͷϦ ϑΝΫλ Ϧ ϯάͷͨΊͳΒ͹  ୯ମςε τΛશྗͰॻ͘

Slide 42

Slide 42 text

w ελʔ τΞοϓ͋Δ͋Δͱ ͯ͠  ॳظͷϓϩάϥϛϯάࢥ૝ͱɺ த௕ظ੒௕ϑΣʔζͷࢥ૝͸Ұக͠ͳ͍ w ೥౰࣌ͷΤϯδχΞʹ  ʮ೥ʹͳͬͯ΋εϜʔζʹಡΊΔΑ ͏ʹॻ͚ʯ ͱݴ͏ͷ͸͓໳ҧ͍ w ຊؾΛग़ͤ͹ͪΌΜͱϚΠάϨʔγϣϯͰ͖Δ w ͦͷͱ͖੔උͰ͖Δਓ͕ͪΌΜͱ੔උ͍ͯ͘͠ w ϘʔΠεΧ΢ τͷεϩʔΨϯ೔೔ͷળߦΛҙࣝ ʢ ʰϓϩάϥϚ͕஌Δ΂͖ͷ͜ͱʱ Α Γʣ ૯ׅ

Slide 43

Slide 43 text

5IBOLZPV