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

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

2019/10/3、Classi Angular Night #4 にて発表した資料です。

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

October 03, 2019
Tweet

Transcript

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

  2. ୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅ද w ϑϩϯ τΤϯ υ ɾ

    όοΫΤϯ υ ɾ ΤϯδχΞ w "OHVMBS೔ຊϢʔβʔձ
 OHLZPUPΦʔΨφΠβ
  3. ͜Ε·Ͱͷొஃ಺༰

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

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

  6. ϨΨγʔΞϓϦέʔγϣϯͱ͸ wʮϨΨγʔίʔ υվળΨΠ υʯ Ͱ͸ϨΨγʔίʔ υΛ
 ςε τͷͳ͍ίʔ υͱఆ͍ٛͯ͠Δ w

    ࠓճड़΂ΔϨΨγʔΞϓϦέʔγϣϯ͸ԼهΛࢦ͢΋ͷͱ͢Δ w ςε τ͕͋ͬͨΓͳ͔ͬͨΓ ͭͭ͠ w ͱʹ͔͘ݹ͘ w ௕͍ؒ୭ͷख΋ՃΘͬͯͳ͍΋ͷ
  7. ର৅͸ͳʹ͔ w ೥Նʹ։ൃ͕։࢝͞Εͨɺ ͱ͋Δ؅ཧը໘ w "OHVMBSΛར༻ w ౰࣌ͷݶΒΕͨਓһ ɾ ޻਺Ͱָ͠

    ͘։ൃ ʢਪଌʣ  w ࣗ෼͸೥Ն·Ͱؔ༩͍ͯ͠ͳ͍
  8. ͔ͳΓ߈ΊͯΔ "OHVMBSͷϦ Ϧʔε͸೥݄

  9. ౰࣌ͷࣄ৘͕·ͬͨ͘෼͔ΒΜ w ελʔ τΞοϓ͋Δ͋Δ w ιϩϓϨʔ w ίϛ ο τϩά͸୭΋ಡ·ͳ͍ͷͰ؆ૉ

    w ͦ΋ͦ΋ίʔ υ ϨϏϡʔ͢ΔΤϯδχΞ͕͍ͳ͍ w ͦ΋ͦ΋ࣾ಺ʹΤϯδχΞ͕଍Γͳ͍
  10. ख͕ೖΒͳ͘ͳͬͨ w ೥຤ʹͳΔʹͭΕίϛ ο τ͕ݮ͍ͬͯ͘ w ೥݄Λ࠷ޙʹ࣮૷͸ͦͷ·· w ೥݄ʹ"OHVMBS͔Βɽ ɽ

    ʹରԠ w ͻͬͦ Γ ͱͰӡ༻͞Εଓ͚Δ
  11. ϑϧϦ ϓϨʔε͔ɺ ϚΠάϨʔγϣϯ͔ w ݹ͗͢Δͷͱɺ ଞͷ༷ʑͳࣄ৘΋͋Γ৽όʔδϣϯͷ։ൃ͕ܾఆ w େ൒ͷػೳ͸ϑϧϦ ϓϨʔεͰ࣮ࢪ w

    ίʔ υͷ࡮৽Α Γ ΋ɺ αʔϏε ɾ ؅ཧը໘ࣗମͷ࡮৽͕໨త w ͔͠͠Ұ෦ը໘͸Ϧ ϓϨʔεͷ޻਺Λݟੵ΋Δͱॏ͍ʜ w खೖΕ͞Εͯ͸͍ͳ͍͕ɺ ϚΠάϨʔγϣϯͰ͖ΔͳΒ͹ͦͷ޻਺͸ු͘ ʁ  w ϚΠάϨʔγϣϯ ɾ ίε τͱ Ϧ ϓϨʔε ɾ ίε τͷఱṝʜ
  12. ࢖ͬͯͯΑ͔ͬͨ"OHVMBS w "OHVMBS͸
 Ξοϓσʔ τʹؔ͢Δެࣜͷ৘ใɺ มߋ఺঺հ͕ͱͯ΋खް͍ϑ ϨʔϜϫʔΫ w Ͳͷόʔδϣϯ͔Βɺ Ͳͷόʔδϣϯʹ্͛Δͱ


    Կ͕มΘͬͯԿΛ͢΂͖ͳͷ͔͕໢ཏ͞Ε͍ͯΔ
  13. VQEBUFBOHVMBSJP https://update.angular.io/

  14. ϚΠάϨʔγϣϯ੒ޭ ʂ w Ϧ ϓϨʔε͠ͳ͍Ұ෦ػೳ͸ɺ ϦχϡʔΞϧલޙͰఏڙ಺༰͕มΘΒͳ͍ͨΊ
 ϚΠάϨʔγϣϯͷ࠾༻Մೳੑ͕͋ͬͨ w "OHVMBSΛ࠾༻͍͓͔ͯͨ͛͠Ͱˠ͸Մೳͱ൑அ w

    ࢓༷ॻͷແ͍ػೳͷ࢓༷೺Ѳ͔Β࢝ΊͯϦ ϓϨʔε͢ΔΑ Γ
 ϚΠάϨʔγϣϯ͕୹޻਺ͩΖ͏ ͱ൑அ w ݁Ռతʹݱࡏ"OHVMBSͰݩؾʹಈ͍ͯ·͢
  15. ϚΠάϨʔγϣϯܭը

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

  17. खͰؤுΔ w ౰࣌͸"OHVMBS$-* ʢ೥݄ʣ  w ࣗಈϚΠάϨʔγϣϯͯ͘͠ΕΔศརίϚϯ υ
 ng updateͷఏڙ͸"OHVMBS$-*

    ʢ೥݄ʣ ͔Β w "OHVMBSˠ͸ා͍ w "OHVMBSˠ ˠΛܦͯҰ୴"OHVMBSܥʹண஍͢Δ w ౖ౭ͷίϛ ο τΛ͝঺հ
  18. "OHVMBSˠͦͷલʹʜ w ͦ΋ͦ΋౰࣌
 /PEFKTͷόʔδϣϯ͍ͭ͘ɺ OQN͍ͭ͘Ͱಈ͍͍ͯͨͷ͔͢Βෆ໌ w ։ൃ؀ڥͷ࠶ݱ͢Βࠔ೉ w ͱ Γ͋͑ͣ։ൃ͕ࢭ·ͬͨ࣌ظ͔Βٯࢉͯ͠


    ʮ/PEFKT͸͜ΕͩΖ͏ɺ ͦͷͱ͖ʹಉࠝ͞ΕΔOQN͸͜Εͷ͸ͣʯ 
 ͱ͍͏ԾఆͰߏங w ڭ܇ ɿ .node-version, package.json engine, README.md ͳͲΛ
 ೔ࠒ͔Βϝϯς͓ͯ͘͠
  19. ΞʔΩςΫνϟͷζϨ w ϨΨγʔΞϓϦͷׂͷػೳ͸
 (JU)VCͷผϦϙδτ ϦʹͯϦ ϓϨʔε։ൃΛਐΊ͍ͯΔ w ؅ཧը໘ͷ͏ ͪΘ͔ͣը໘͚ͩΛϚΠάϨʔγϣϯ͍ͨ͠ w

    ͨͩ͠ Ϧ ϓϨʔεଆͷΞʔΩςΫνϟͱͷ੔߹ੑ͸օແ
  20. Ϟϊ Ϩϙ͔Βͷϋʔ υϑΥʔΫઓུ w ϨΨγʔ਌ΞϓϦ͔ΒࢠΞϓϦΛ࡞ΓϞϊ Ϩϙߏ଄ΛऔΔ w ࢠΞϓϦͷΈ"OHVMBS  

    ͱਐΊΔ w ࢠΞϓϦ͕"OHVMBSʹϚΠάϨʔγϣϯ׬ྃͨ͠Β
 ৽ ɾ ਌ΞϓϦͷࢠʹͳΔΑ ͏ϋʔ υϑΥʔΫ w ৽ ɾ ਌ΞϓϦ͕ࢠΞϓϦͷίϯϙʔωϯ τΛ෦෼తʹऔΓࠐΉ w ׬੒ ʂ ʂ
  21. ਤղ ϨΨγʔ਌ Ϧ ϓϨʔε਌ ϨΨγʔ਌͕࢖͏
 $PNQPOFOUͱ
 4FSWJDF ͪΌΜͱઃܭ͞Εͨ
 ΞʔΩςΫνϟ

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

  23. ਤղ ϨΨγʔ਌ ϨΨγʔࢠ ϨΨγʔ਌͕࢖͏
 $PNQPOFOUͱ
 4FSWJDF ϨΨγʔ਌͕࢖͏
 $PNQPOFOUͱ
 4FSWJDF Ϧ

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

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

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

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

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


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


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


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

  32. "OHVMBSˠ w ݹ͍ίʔ υελΠϧ͸༰ࣻͳ͘QSFUUJFSͰ੔ܗ w "OHVMBSˠ͸@angular/http͔Β@angular/common/http HttpClient΁ͷҠߦَ͕໳ w ࣗ෼͸ۀ຿্ɺ ௨ࢉճ໨ͷHttpClientҠߦͩͬͨͷͰॗʑ

    ͱਐΊΔ w ్தBOZͩΒ͚ͩͬͨͱ͜ΖΛܕ෇͚͍ͨ͠ؾ࣋ͪ͸͙ͬͱת͑Δ w ڭ܇ৗ೔ࠒBOZ͸࢖Θͣʹ͍Δ΂͠
  33. "OHVMBSˠ w "OHVMBS$-*ొ৔ w .angular-cli.json͔Βangular.json΁ͷม׵͕ࢁ৔ w ઌʹ$-*ͷΈαϙʔ τόʔδϣϯΛ্͔͛ͯΒ
 ng update

    @angular/coreͰม׵ରԠ w ஍ຯʹ3Y+4ˠͷํ͕ॏ͍͜ͷϑΣʔζ w .pipe()΁ͷॻ͖׵͑Λͻͨ͢Βॗʑ ͱߦ͏ w େ൒BOZͳ··ͳͷͰɺ ৗʹมߋͨ͠Βର৅ػೳΛखಈσόοά ʢςε τ͸ͳ͍ʣ
  34. "OHVMBSˠ w OHVQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷ΋Μ w ͳΜͱ"OHVMBS͔Βͷίϛ ο τ͸Θ͔ͣͭ

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

  36. OHVQEBUFΛ৴͡Ζ w "OHVMBS࿝ਓձͬΆ͍͕
 ʮ͔ͭͯͷϚΠάϨʔγϣϯ͸ࠎ͕ંΕͨʯ  w ࠓͷ"OHVMBS͸ͱʹ͔͘਌੾ w શવࠎંΕͳ͍ͷͰɺ ͪΌΜͱ࠷৽൛͕ग़ͨΒ޻਺֬อ্ͯ͛͠Α

    ͏ ʂ  w ͪͳΈʹࠓճͷˠʹֻ͔ͬͨ޻਺͸ਓ೔
 ʢ˞Ϗδωε೺Ѳ͕ࡁΜͰ͓Γը໘ͷΈҠ২ͱ͍͏৚݅ͳͷͰɺ ৗʹ͜ͷ޻਺Ͱ͸ରԠͰ͖ͳ͍Ͱ͢ʣ
  37. ࠓޙͷϦ ϑΝΫλ Ϧ ϯάํ਑

  38. ͳʹ͸ͱ΋͋Εܕ෇͚ w BOZ͕͋· Γʹ΋ଟ͍ͷͰॱ࣍ܕ෇͚ w ಛʹ!0VUQVUͷnew EventEmitter<any>()͸
 ԿΛૹͬͯͲ͏࢖͍ͬͯΔͷ͔ɺ ·ΔͰ௥͑ͳ͍ͷͰૣظʹखೖΕ w

    3&45"1*Λୟ͘पล΋શମతʹBOZͰ͸ࠔΔͷͰखೖΕ w ૊৫͕ٸ੒௕ͷϑΣʔζ͔Β௕ظ੒௕ͷϑΣʔζʹҠͬͨͷͰ
 ࣌ؒΛ੯͠·ͣஸೡʹܕ෇͚
  39. ৑௕ͳϑΝΠϧΛআڈ w ͨͱ͑͹constructorͷॻ͔Ε͍ͯͳ͍4FSWJDF w Ұ౓΋ग़ͯ͜ͳ͍this w ͜͏͍ͬͨؔ਺ूͷΑ ͏ͳϢʔςΟ ϦςΟ ɾ

    αʔϏε͸ͲΜͲΜআڈ w ϝ ιο υΛ७ਮͳؔ਺ͱ ͯ͠੾Γग़ͯ͠୯ମςε τΛॆ࣮ͤ͞Δ
  40. ৽ΞʔΩςΫνϟʹԊΘͤΔ w େ൒ͷίʔ υ͸ ʮಈ͍͍ͯΔͷͰ໰୊ͳ͍ʯ  w Կ͕໰୊͔ͱ͍͏ ͱ ʮͳͥͦ͜ʹॻ͍ͨͷ͔ʯ

     w ΞʔΩςΫνϟҙ͕ࣝݱࡏͱ͸ҟͳΔࠒͷίʔ υ͸
 ʢಛʹελʔ τΞοϓॳظͩͱʣ 'BUʹͳΓ͕ͪ w 'BUͳॲཧͦͷ΋ͷͷϦ ϑΝΫλ Ϧ ϯά͸໨ΛͭͿͬͯɺ ߦ୯ҐͰϑΝΠϧ෼ׂ w ϑΝΠϧ෼ׂͱ ϑΝΠϧ໊෇͚͕ஸೡʹͳΔ͚ͩͰ΋Մಡੑ͸͔ͳΓ্͕Δ w ܕ෇͚͕े෼ʹͳΕ͹ϑΝΠϧ෼ׂલޙͷίϯύΠϧอূͰ͔ͳΓ҆৺ײΛಘΔ
  41. ݹ͍ίʔ υ͸ਖ਼௚ͳΜͱ͔ͳΔ w 'BUͳͷ͕ࢥߟΛࢭΊΔݪҼ w ߦͷݹ͍ίʔ υ͸ಡΊͳ͍ w Θ͔ͣߦͷݹ͍ίʔ υͩͬͨΒಡΊΔ

    w ݹ͍ίʔ υͷϦ ϑΝΫλ Ϧ ϯάΑ Γɺ ࣮૷Λ͍͡Βͳ͍ϑΝΠϧ෼ׂͷ΄͏͕
 අ༻ରޮՌ͕ߴ͘ɺ Τϯόά΋ආ͚΍͍͢ w ຊ౰ʹՄಡੑʹ೉͕͋Δίʔ υͷϦ ϑΝΫλ Ϧ ϯάͷͨΊͳΒ͹
 ୯ମςε τΛશྗͰॻ͘
  42. w ελʔ τΞοϓ͋Δ͋Δͱ ͯ͠
 ॳظͷϓϩάϥϛϯάࢥ૝ͱɺ த௕ظ੒௕ϑΣʔζͷࢥ૝͸Ұக͠ͳ͍ w ೥౰࣌ͷΤϯδχΞʹ
 ʮ೥ʹͳͬͯ΋εϜʔζʹಡΊΔΑ ͏ʹॻ͚ʯ

    ͱݴ͏ͷ͸͓໳ҧ͍ w ຊؾΛग़ͤ͹ͪΌΜͱϚΠάϨʔγϣϯͰ͖Δ w ͦͷͱ͖੔උͰ͖Δਓ͕ͪΌΜͱ੔උ͍ͯ͘͠ w ϘʔΠεΧ΢ τͷεϩʔΨϯ೔೔ͷળߦΛҙࣝ ʢ ʰϓϩάϥϚ͕஌Δ΂͖ͷ͜ͱʱ Α Γʣ ૯ׅ
  43. 5IBOLZPV