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

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

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 OH
    VQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷ΋Μ
    w ͳΜͱ"OHVMBS
    ͔Βͷίϛ ο τ͸Θ͔ͣͭ
35. "OHVMBS
    
    ˠ
     w OH
    VQEBUFΛखʹೖΕͨͷͰͬͪ͜ͷ΋Μ
    w ͳΜͱ"OHVMBS
    ͔Βͷίϛ ο τ͸Θ͔ͣͭ
36. OH
    VQEBUFΛ৴͡Ζ 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. 5IBOL
    ZPV