大規模Angular in 現場 / Large scale Angular in real world

2018/6/26 市ヶ谷Geek★Night #18にて発表した資料です。

Transcript

1. େن໛"OHVMBSJOݱ৔
   +VO ࢢϲ୩(FFL˒/JHIU
   !PLVOPLFOUBSP
   

   View Slide

2. ୭
   w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP
   w גࣜձࣾϐΫηϧάϦ
   ο
   υ
   w "OHVMBS+BQBO6TFS(SPVQ
   

   View Slide

3. ࣥච
   IUUQTCPPLJNQSFTTDPKQCPPLT
   

   View Slide

4. ͲΕΛ࢖͑͹͍͍
   ʁ
   w "OHVMBS
   w 3FBDU
   w 7VFKT
   

   View Slide

5. ͲΕΛ࢖͑͹͍͍
   ʁ
   w "OHVMBS
   w 3FBDU
   w 7VFKT
   ޷͖ʹ͠Ζ
   

   View Slide

6. ࢲͱେن໛
   

   View Slide

7. େن໛ͷྺ࢙
   
   
   IUUQTTQFBLFSEFDLDPNPLVOPLFOUBSP
   

   View Slide

8. ݱࡏͷঢ়گ
   w ૯ߦ਺໿ ߦ
   ʢۭߦɺ
   ςε
   τίʔ
   υؚΉʣ
   
   w ૯ϑΝΠϧ਺ ϑΝΠϧ
   ʢςε
   τؚΉʣ
   
   w ։ൃମ੍
   w ϑϩϯ
   τΤϯ
   υ
   ɾ
   ΤϯδχΞਓ
   

   View Slide

9. ͳͥ"OHVMBSʹͨ͠ͷ͔
   w ։ൃ։࢝࣌"OHVMBSWYΛબ୒
   w ࠓճ͸"OHVMBS+4ΞϓϦέʔγϣϯͷϦ
   ϓϨʔεͩͬͨ

   ʢͳ͓ฐࣾ͸डୗઐ໳ͳͷͰϦ
   ϓϨʔε͸ΫϥΠΞϯ
   τଆͷҙ޲ʣ
   
   w "OHVMBS+4൛Λ։ൃͨ͠ελοϑ͕ͦͷ··։ൃΛ͢Δ͜ͱ΋͋Γ

   "OHVMBSΛબ୒
   w ͦ͜ʹ"OHVMBS+BQBO6TFS(SPVQͷ!PLVOPLFOUBSP͕ೖࣾ
   

   View Slide

10. ͳͥେن໛ʹͳͬͨͷ͔
    w "OHVMBS+4൛ͷը໘਺͕΂Β΅͏ʹଟ͍
    w ը໘Ҏ্
    w ը໘಺ͷػೳ΋ଟ͍
    w ͦͷΞϓϦͷϦ
    ϓϨʔεͳ࣌఺Ͱن໛ͷ༧૝͕ͭ͘
    

    View Slide

11. ͳͥখن໛ʹ͠ͳ͔ͬͨͷ͔
    w ը໘ΛΞϓϦʜͱ·Ͱ͸͍͔ͣͱ΋

    ͳ͍͔ͥͭ͘ͷΞϓϦʹ෼ׂ͠ͳ͔ͬͨͷ͔
    w "OHVMBS+4൛։ൃ࣌୅ʹઃܭίʔ
    υ
    ϨϏϡʔͱ͍͏֓೦͕ͳ͘

    ͦΕͧΕͷελοϑ͕ɺ
    ͦΕͧΕʹ࡞ͬͨ
    w ݁Ռతʹɺ
    ͦͷελοϑ͕୲౰͍ͯ͠ͳ͍ը໘Λमਖ਼͢Δͱ͖ͷίε
    τ͕૿େ
    w ͦͷ൓ল͔Β
    ʢ"OHVMBS͕41"ʹ޲͍͍ͯΔͱ͍͏໡৴΋Ճຯͯ͠ʣ
    

    ௒ڊେ4JOHMF1BHF"QQMJDBUJPOʹ͠Α
    ͏
    ͱ͍͏ํ਑ʹͳͬͨ
    

    View Slide

12. ઌʹ݁࿦Λݴ͏
    w ෼͚Ζ
    

    View Slide

13. େن໛ͷޭͱࡑ
    

    View Slide

14. େن໛ʹͯ͠Α͔ͬͨ఺
    w ͋ΒΏΔը໘ΛͲͷΑ
    ͏ʹۉҰʹ࣮૷͢Δ͔ɺ
    ઃܭΛೖ೦ʹߦͬͨ
    w େن໛։ൃ͕͢Ͱʹ༧૝Ͱ͖ͨ͜ͱ͔Βɺ
    νʔϜͷਓ਺͕૿͑Δ͜ͱ΋༧૝Ͱ͖ͨ
    w ୭͕։ൃͯ͠΋ಉ͡ʹͳΔΑ
    ͏ͳݎ͍ΞʔΩςΫνϟʹͨ͠
    w %%%ͷಋೖɺ
    $234ʹΑΔઃܭ
    w ͜ͷลͷϊ΢ϋ΢͸Ҏ߱ͷաڈεϥΠ
    υʹͯ
    

    View Slide

15. େن໛ʹͯ͠Α͔ͬͨ఺
    w ࣮͸͜Ε
    ʮେن໛ʹͯ͠Α͔ͬͨʯ
    Ͱ͸ͳ͘
    ʮઃܭͯ͠Α͔ͬͨʯ
    ʹ͗͢ͳ͍
    w ୭͕Ͳͷը໘Λ࣮૷ͯ͠΋ಉ͡Α
    ͏ͳίʔ
    υʹͳΔͷ͸

    ࣮ࡍϝ
    Ϧ
    ο
    τͩͬͨ
    w େن໛͸ɺ
    ઃܭͷϝ
    Ϧ
    ο
    τΛ্ճ͍ͬͯ͘
    σϝ
    Ϧ
    ο
    τΛ๊͑ͨ
    

    View Slide

16. େن໛ʹͯ͠ޙչͨ͠఺
    w ޙչ࢝͠Ίͨͷ͸։ൃ։͔࢝Β೥൒ܦ͔ͬͯΒ͘
    Β͍
    w ͦΕ·Ͱ΋ޙչͷલஹ͸͕͋ͬͨɺ
    ͍ͭ΋ߟ͑ͳ͍Α
    ͏ʹ͍ͯͨ͠
    w ·͞ʹޙչઌʹཱͨͣ
    w ͷൃදͰ΋৮ΕͨΑ
    ͏ʹ
    w Ϗϧυ͕஗͍ɺ
    ςε
    τ͕஗͍ɺ
    $*͕஗͍
    

    View Slide

17. ஗͞
    w ෺ཧతͳ
    ʮϏϧυͷ஗͞ʯ
    ͸શελοϑͷ։ൃޮ཰Λஶ͘͠Լ͛Δ
    w ϚγϯͷਐԽΛ΋ͬͯͯ͠΋ສߦϏϧυʹ͸ఢΘͳ͍

    ʢ"OHVMBSWͰগ͠Ϛγʹͳͬͨʣ
    
    w ͜Ε͔Βେ͖͍ΞϓϦΛ։ൃ͢Δॾࢯʹஔ͔Εͯ͸

    ৗʹϏϧ
    υ଎౓ͷ௿ԼΛ๷͙ͨΊͷ͋ΒΏΔࢪࡦΛߨ͡Δ΂͖
    

    View Slide

18. େن໛͸Ұ࿇୑ੜ
    w Ұ౓େن໛ʹ࡞ΓࠐΜͰޙ͔Βͷ෼ׂ͸ݫ͍͠

    ʢ޻਺
    ɾ
    ༧ࢉ໘ɺ
    ج൫ൈ͖ग़͠ͷ೉͠͞ʣ
    
    w େن໛ʹͳΔͱΘ͔͍ͬͯΔͳΒ͹ɺ
    

    Έ͢Έ͢େن໛ʹਐΜͰ͍͘ͷ͸ߟ͑௚ͨ͠΄͏͕͍͍
    wʮ"OHVMBS͸େن໛͕ಘҙʯ
    ͱ͍͏ҙݟ͕͋ͬͨͱͯ͠΋

    ʮେن໛ʹ͢΂͖ʯ
    ͱ͸ҟͳΔ
    w "OHVMBSͩΖ͏͕ԿͩΖ͏͕େن໛͸஗͘ͳΔ
    w ͦ΋ͦ΋େن໛։ൃΛ͠ͳ͍
    

    View Slide

19. ࠓ΍ΔͳΒͲ͏͢Δ͔
    w ը໘୯ҐͰΞϓϦΛෳ਺ɺ
    ج൫͸ڞ௨ίʔ
    υΛ࢖༻
    w ը໘ؒભҠ͸ී௨ʹϖʔδߋ৽
    w ը໘ؒσʔλڞ༗͸ɺ
    εΩʔϚΛ͔ͬ͠Γఆٛͨ͠

    63-2VFSZ -PDBM4UPSBHF 4FTTJPO4UPSBHF PS#BDLFOE
    
    

    View Slide

20. 5IBOLZPV
    ߴ଎Խ͸·ͣ։ൃ؀ڥ͔Β
    

    View Slide