フロントエンドの 良い設計、良いコードを考える

ng-japan OnAir 第10回配信で使用した資料
https://angular-japan.discourse.group/t/topic/110

Twitter
https://twitter.com/__sakito__

Transcript

1. ϑϩϯτΤϯυͷ

   ྑ͍ઃܭɺྑ͍ίʔυΛߟ͑Δ
   OHKBQBO0O"JS
   

   View Slide

2. /BNF
   4BLJUP.VLBJ
   5XJUUFS

   !@@TBLJUP@@
   $PNQBOZ
   $ZCP[VJOD

   'SPOUFOE&YQFSU5FBN
   "CPVUNF
   

   View Slide

3. ͳ͍͍ͥίʔυɺ͍͍ઃܭ͕ඞཁͳͷ͔ʁ
   

   View Slide

4. ϑϩϯτΤϯυ΋ҙࣝ͠ͳ͚Ε͹ͳΒͳ͍࣌୅ʹ
   

   View Slide

5. ϑϩϯτΤϯυͷਐԽ
   

   View Slide

6. ϑϩϯτΤϯυͷਐԽ
   w༷ʑͳϥΠϒϥϦͷొ৔ʹΑΓ

   ෳࡶͰن໛ͷେ͖͍ϓϩδΣΫτͷ࣮ݱ͕Ͱ͖ΔΑ͏ʹͳͬͨ
   wϑϩϯτΤϯυ͚ͩͰ׬݁͢Δ͜ͱ΋Մೳʹ
   wϥΠϒϥϦ͕༷ʑͳॲཧΛߦͬͯ͘ΕΔΑ͏ʹͳͬͨ

   OH %0.ૢ࡞ 7JSUVBM%0. FUDʜ
   
   wܕͷԸܙΛಘΒΕΔΑ͏ʹ
   

   View Slide

7. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ
   

   View Slide

8. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ
   ʮιϑτ΢ΣΞ͸ద੾ͳίετͰ
   ɹมߋͰ͖ͳ͚Ε͹ͳΒͳ͍ʯ
   

   ʮಈ࡞͢Δ͜ͱΛ

   ɹl೺Ѳ͠ͳ͚Ε͹z͍͚ͳ͍ʯ
   

   View Slide

9. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ
   ʮιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త͸ɺ

   ٻΊΒΕΔγεςϜΛߏஙɾอक͢ΔͨΊʹ

   ɹඞཁͳਓࡐΛ࠷খݶʹ཈͑Δ͜ͱͰ͋Δɻʯ
   ʮ่յͨ͠ίʔυΛॻ͘΄͏͕
   ɹΫϦʔϯͳίʔυΛॻ͘ΑΓ΋ৗʹ஗͍ɻʯ
   

   View Slide

10. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ
    ʮίʔυ͸

    ཧղ͠΍͘͢ͳ͚Ε͹ͳΒͳ͍ʯ
    

    View Slide

11. ͜ΕΒΛͲ͏࣮ݱ͍ͤͯ͘͞ͷ͔
    

    View Slide

12. &4-JOU΍1SFUUJFSΛಋೖ͢Δ
    wόά΍ݟ௨͠ͷѱ͍ίʔυΛະવʹ๷͙
    w&4-JOUͰະવʹߏจΤϥʔ͕ى͜ΔίʔυΛ๷͙
    w1SFUUJFSͰίʔυΛ੔ܗ͠ɺίʔυͷݟ௨͠Λἧ͑Δ
    

    View Slide

13. 5ZQF4DSJQUͰܕΛಋೖ͢Δ
    w5ZQF4DSJQUʹΑΔܕݕࠪͰະવʹόάΛ๷͙͜ͱ͕Ͱ͖Δ
    wܕ͕͋Δ͜ͱͰɺؔ਺΍ίϯϙʔωϯτ͕ड͚औΔίʔυ͕

    ݟ΍͘͢ͳΔ
    

    View Slide

14. ςετΛॻ͘
    ʮςετͷͳ͍ίʔυ͸ѱ͍ίʔυͰ͋Δ
    ɹͲΕ͚ͩ͏·͘ॻ͔Ε͍ͯΔ͔͸ؔ܎ͳ͍ɻ
    ɹͲΕ͚ͩඒ͍͔͠ɺΦϒδΣΫτࢦ޲͔͖ͪΜͱ

    ɹΧϓηϧԽ͞Ε͍ͯΔ͔͸ؔ܎ͳ͍ɻ
    ɹςετ͕͋Ε͹ɺݕূ͠ͳ͕Βίʔυͷಈ͖Λ
    ૉૣ͘มߋ͢Δ͜ͱ͕Ͱ͖Δɻςετ͕ͳ͚Ε͹ɺ
    ɹίʔυ͕ྑ͘ͳ͍ͬͯΔͷ͔ѱ͘ͳ͍ͬͯΔͷ͔͕
    ɹຊ౰ʹ෼͔Βͳ͍ɻʯ
    

    View Slide

15. ςετΛॻ͘
    wςετ͕͋Δ͜ͱͰίʔυʹࣗ৴Λ࣋ͭ͜ͱ͕Ͱ͖Δ
    wςετΛॻ͍͍ͯͳ͍৔ॴͷมߋʹ͸ɺ·ͣςετΛॻ͘
    wϑϩϯτΤϯυ͸ύοέʔδͷߋ৽ͷࡍʹ΋໾ʹཱͭ
    w5%%΍#%%ͳͲͷςετख๏΋࢖͍ͬͯ͘
    

    View Slide

16. ςετΛॻ͘
    গ͠લʹϑϩϯτΤϯυͷςετʹ͍ͭͯ࿩ͨ͠΋ͷ
    IUUQTTQFBLFSEFDLDPNNVLBJNJOHSJLBSBIB[JNFSVUFTVUPGBMTFBSVIVSPOUPFOEPLBJGB
    

    View Slide

17. ίϝϯτΛॻ͘
    wಡΈखʹͱͬͯίʔυ͔Β͸ಡΈऔΓʹ͍͘෦෼Λัଊ͢Δ
    wίʔυͷ಺༰Λઆ໌͢ΔΑ͏ͳɺ

    ίϝϯτͰίʔυͷෳࡶ͞ΛΧόʔ͢ΔͨΊʹ͸࢖Θͳ͍
    wίϝϯτ͕ͳ͍ͱ෼͔Βͳ͍ෳࡶͳίʔυ͸ݟ௚ͦ͏
    

    View Slide

18. ໊લͰ఻͑Δ
    wϑΝΠϧ໊ɺม਺໊ɺؔ਺໊ɺίϯϙʔωϯτ໊ɺFUDʜ
    wৼΔ෣͍΍ػೳΛ͕఻ΘΔΑ͏ʹॻ͜͏
    w໊લ͕ෳࡶɺ͚ͭʹ͍͘ɺෳ਺ͷҙຯΛ΋ͭίʔυ͸ݟ௚ͦ͏
    

    View Slide

19. ಡΈ΍͢͞Λҙࣝ͢Δ
    wϫϯϥΠφʔͷίʔυ΍ɺෳࡶͳઃܭΛಡΈղ͘ͷ͸େม
    wಡΈखʹͱͬͯ෼͔Γ΍͍͢ίʔυʹͳ͍ͬͯΔ͔ҙࣝ͢Δ
    wίϯϙʔωϯτͷංେԽ΍ؔ਺ͷෳࡶ౓͕͕͋ͬͨΒɺ

    ෼ׂ͢Δ͜ͱͰɺಡΈ΍͢͞ʹ΋ͭͳ͕Δ
    

    View Slide

20. Өڹൣғͱࣺͯ΍͢͞Λҙࣝ͢Δ
    wӨڹൣғ͕޿͍ίʔυ͸ɺ

    গ͠ͷػೳमਖ਼Ͱ޿ൣғʹӨڹΛ༩͑ͯ͠·͏
    wӨڹൣғΛڱΊΔ͜ͱͰɺվमൣғΛڱΊΔ
    w࣌ʹ͸ػೳ͕ෆཁʹͳΔ͜ͱ΋͋Δ͕ɺ

    Өڹൣғ͕ͦͷػೳ͚ͩʹݶఆ͞Ε͍ͯΔͱࣺͯ΍͍͢
    wෳ਺ͷ੹຿Λ͍࣋ͬͯΔίʔυ͸ࣺͯʹ͍͘
    wͭͷػೳʹͷ੹຿Λҙࣝ͢Δ͜ͱͰɺ

    Өڹൣғ͕ߜΒΕࣺͯ΍͘͢ͳΔ
    

    View Slide

21. ݴޠɾϥΠϒϥϦͷ৽͍͠ػೳΛ஌Δ
    w&4/FYUɺ5ZQF4DSJQUɺࣗ਎͕࢖ͬͯΔϥΠϒϥϦ͸

    ৽͍͠ػೳ͕௥Ճ͞Ε͍ͯ͘
    wࠓ·ͰࣗલͰ࣮૷͍ͯͨ͠΋ͷ͕ɺ

    ؆͔ܿͭಡΈ΍͘͢ॻ͘͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ͜ͱ΋
    wྫ
    &4ͷqBU
    54ͷ0QUJPOBM$IBJOJOH
    wݴޠ΍ϥΠϒϥϦΛ஌Γɺ࢖͑Δػೳ͸࢖༻͍ͯ͜͠͏
    

    View Slide

22. νʔϜͷೝࣝΛἧ͑Δ
    w͍͍ઃܭɺ͍͍ίʔυΛਓͰ΍ͬͯ΋ϓϩδΣΫτ͸Α͘ͳΒͳ͍
    wυΩϡϝϯτʹ࢒͠ɺ։ൃνʔϜશମͰ౷ҰͰ͖ΔΑ͏ʹ͢Δ
    wϢϏΩλεݴޠɺઃܭɺίʔσΟϯάΨΠυͳͲʜ
    

    View Slide

23. ઃܭݪଇ΍ύλʔϯ͔ΒֶͿ
    w%3:ɺ40-*%ݪଇɺΫϦʔϯΞʔΩςΫνϟɺ%%%ɺ:"(/*ͳͲ
    wίʔυ΍ઃܭΛߟ͑Δجຊతͳ͜ͱ͸طʹݴޠԽ͞Ε͍ͯΔ
    wϑϩϯτΤϯυʹ΋׆͔ͤΔ͜ͱ͸ଟ͋͘Δ
    w'MVYύλʔϯͳͲ
    

    View Slide

24. ·ͱΊ
    

    View Slide

25. ·ͱΊ
    wཧղ͠΍͘͢ɺอक͕ՄೳͳϓϩδΣΫτΛ

    ϑϩϯτΤϯυ։ൃͰ΋໨ࢦ͍ͯ͜͠͏
    wςετΛॻ͍͍ͯ͘
    wνʔϜͰٞ࿦͍ͯ͜͠͏
    wઌਓͷ஌ܙͰ͋Δݪଇ΍ύλʔϯΛֶͿ
    wίʔυͷϨϏϡʔΛߦ͏ͷ΋ษڧʹͳΔ
    wࠓճ঺հ͖͠Εͳ͔ͬͨ΋ͷ΋͋Δ͕ɺ

    ઌਓͷ஌ܙͰ͋Δݪଇ΍ύλʔϯ͔Βֶ΅͏
    

    View Slide

26. ͓ΘΓ
    

    View Slide