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

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

Twitter
https://twitter.com/__sakito__

Transcript

1. ϑϩϯτΤϯυͷ
 ྑ͍ઃܭɺྑ͍ίʔυΛߟ͑Δ
   OHKBQBO
   0O"JS
   
2. /BNF
   
   
   
   
   4BLJUP
   .VLBJ
   5XJUUFS

   
   
   
   !@@TBLJUP@@
   $PNQBOZ
   
   
   
   
   $ZCP[V
   JOD
   

   
   
   
   'SPOUFOE
   &YQFSU
   5FBN "CPVU
   NF
3. ͳ͍͍ͥίʔυɺ͍͍ઃܭ͕ඞཁͳͷ͔ʁ
4. ϑϩϯτΤϯυ΋ҙࣝ͠ͳ͚Ε͹ͳΒͳ͍࣌୅ʹ
5. ϑϩϯτΤϯυͷਐԽ
6. ϑϩϯτΤϯυͷਐԽ w༷ʑͳϥΠϒϥϦͷొ৔ʹΑΓ
 ෳࡶͰن໛ͷେ͖͍ϓϩδΣΫτͷ࣮ݱ͕Ͱ͖ΔΑ͏ʹͳͬͨ
   wϑϩϯτΤϯυ͚ͩͰ׬݁͢Δ͜ͱ΋Մೳʹ
   wϥΠϒϥϦ͕༷ʑͳॲཧΛߦͬͯ͘ΕΔΑ͏ʹͳͬͨ
 OH
   %0.ૢ࡞
   7JSUVBM
   %0.
   FUDʜ
   wܕͷԸܙΛಘΒΕΔΑ͏ʹ
7. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ
8. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ ʮιϑτ΢ΣΞ͸ద੾ͳίετͰ
   ɹมߋͰ͖ͳ͚Ε͹ͳΒͳ͍ʯ
   
 ʮಈ࡞͢Δ͜ͱΛ
 ɹl೺Ѳ͠ͳ͚Ε͹z͍͚ͳ͍ʯ
9. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ ʮιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త͸ɺ

   
   
   ٻΊΒΕΔγεςϜΛߏஙɾอक͢ΔͨΊʹ
 ɹඞཁͳਓࡐΛ࠷খݶʹ཈͑Δ͜ͱͰ͋Δɻʯ
   ʮ่յͨ͠ίʔυΛॻ͘΄͏͕
   ɹΫϦʔϯͳίʔυΛॻ͘ΑΓ΋ৗʹ஗͍ɻʯ
   
10. ͍͍ίʔυɺ͍͍ઃܭͱ͸ʁ ʮίʔυ͸

    
    
    ཧղ͠΍͘͢ͳ͚Ε͹ͳΒͳ͍ʯ
11. ͜ΕΒΛͲ͏࣮ݱ͍ͤͯ͘͞ͷ͔
12. &4-JOU
    ΍
    1SFUUJFS
    Λಋೖ͢Δ wόά΍ݟ௨͠ͷѱ͍ίʔυΛະવʹ๷͙
    w&4-JOU
    ͰະવʹߏจΤϥʔ͕ى͜ΔίʔυΛ๷͙
    w1SFUUJFS
    ͰίʔυΛ੔ܗ͠ɺίʔυͷݟ௨͠Λἧ͑Δ
13. 5ZQF4DSJQU
    ͰܕΛಋೖ͢Δ w5ZQF4DSJQU
    ʹΑΔܕݕࠪͰະવʹόάΛ๷͙͜ͱ͕Ͱ͖Δ
    wܕ͕͋Δ͜ͱͰɺؔ਺΍ίϯϙʔωϯτ͕ड͚औΔίʔυ͕
 ݟ΍͘͢ͳΔ
14. ςετΛॻ͘ ʮςετͷͳ͍ίʔυ͸ѱ͍ίʔυͰ͋Δ
    ɹͲΕ͚ͩ͏·͘ॻ͔Ε͍ͯΔ͔͸ؔ܎ͳ͍ɻ
    ɹͲΕ͚ͩඒ͍͔͠ɺΦϒδΣΫτࢦ޲͔͖ͪΜͱ
 ɹΧϓηϧԽ͞Ε͍ͯΔ͔͸ؔ܎ͳ͍ɻ
    ɹςετ͕͋Ε͹ɺݕূ͠ͳ͕Βίʔυͷಈ͖Λ
    
    
    
    ૉૣ͘มߋ͢Δ͜ͱ͕Ͱ͖Δɻςετ͕ͳ͚Ε͹ɺ
    ɹίʔυ͕ྑ͘ͳ͍ͬͯΔͷ͔ѱ͘ͳ͍ͬͯΔͷ͔͕
    ɹຊ౰ʹ෼͔Βͳ͍ɻʯ
15. ςετΛॻ͘ wςετ͕͋Δ͜ͱͰίʔυʹࣗ৴Λ࣋ͭ͜ͱ͕Ͱ͖Δ
    wςετΛॻ͍͍ͯͳ͍৔ॴͷมߋʹ͸ɺ·ͣςετΛॻ͘
    wϑϩϯτΤϯυ͸ύοέʔδͷߋ৽ͷࡍʹ΋໾ʹཱͭ
    w5%%
    ΍
    #%%
    ͳͲͷςετख๏΋࢖͍ͬͯ͘
16. ςετΛॻ͘ গ͠લʹϑϩϯτΤϯυͷςετʹ͍ͭͯ࿩ͨ͠΋ͷ
    IUUQTTQFBLFSEFDLDPNNVLBJNJOHSJLBSBIB[JNFSVUFTVUPGBMTFBSVIVSPOUPFOEPLBJGB
17. ίϝϯτΛॻ͘ wಡΈखʹͱͬͯίʔυ͔Β͸ಡΈऔΓʹ͍͘෦෼Λัଊ͢Δ
    wίʔυͷ಺༰Λઆ໌͢ΔΑ͏ͳɺ
 ίϝϯτͰίʔυͷෳࡶ͞ΛΧόʔ͢ΔͨΊʹ͸࢖Θͳ͍
    wίϝϯτ͕ͳ͍ͱ෼͔Βͳ͍ෳࡶͳίʔυ͸ݟ௚ͦ͏
18. ໊લͰ఻͑Δ wϑΝΠϧ໊ɺม਺໊ɺؔ਺໊ɺίϯϙʔωϯτ໊ɺFUDʜ
    wৼΔ෣͍΍ػೳΛ͕఻ΘΔΑ͏ʹॻ͜͏
    w໊લ͕ෳࡶɺ͚ͭʹ͍͘ɺෳ਺ͷҙຯΛ΋ͭίʔυ͸ݟ௚ͦ͏
19. ಡΈ΍͢͞Λҙࣝ͢Δ wϫϯϥΠφʔͷίʔυ΍ɺෳࡶͳઃܭΛಡΈղ͘ͷ͸େม
    wಡΈखʹͱͬͯ෼͔Γ΍͍͢ίʔυʹͳ͍ͬͯΔ͔ҙࣝ͢Δ
    wίϯϙʔωϯτͷංେԽ΍ؔ਺ͷෳࡶ౓͕͕͋ͬͨΒɺ
 ෼ׂ͢Δ͜ͱͰɺಡΈ΍͢͞ʹ΋ͭͳ͕Δ
20. Өڹൣғͱࣺͯ΍͢͞Λҙࣝ͢Δ wӨڹൣғ͕޿͍ίʔυ͸ɺ
 গ͠ͷػೳमਖ਼Ͱ޿ൣғʹӨڹΛ༩͑ͯ͠·͏
    wӨڹൣғΛڱΊΔ͜ͱͰɺվमൣғΛڱΊΔ
    w࣌ʹ͸ػೳ͕ෆཁʹͳΔ͜ͱ΋͋Δ͕ɺ
 Өڹൣғ͕ͦͷػೳ͚ͩʹݶఆ͞Ε͍ͯΔͱࣺͯ΍͍͢
    wෳ਺ͷ੹຿Λ͍࣋ͬͯΔίʔυ͸ࣺͯʹ͍͘
    wͭͷػೳʹͷ੹຿Λҙࣝ͢Δ͜ͱͰɺ
 Өڹൣғ͕ߜΒΕࣺͯ΍͘͢ͳΔ
21. ݴޠɾϥΠϒϥϦͷ৽͍͠ػೳΛ஌Δ w&4
    /FYUɺ5ZQF4DSJQUɺࣗ਎͕࢖ͬͯΔϥΠϒϥϦ͸
 ৽͍͠ػೳ͕௥Ճ͞Ε͍ͯ͘
    wࠓ·ͰࣗલͰ࣮૷͍ͯͨ͠΋ͷ͕ɺ
 ؆͔ܿͭಡΈ΍͘͢ॻ͘͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ͜ͱ΋
    wྫ &4
    
    ͷ
    qBU
    54
    ͷ0QUJPOBM
    $IBJOJOH
    wݴޠ΍ϥΠϒϥϦΛ஌Γɺ࢖͑Δػೳ͸࢖༻͍ͯ͜͠͏
22. νʔϜͷೝࣝΛἧ͑Δ w͍͍ઃܭɺ͍͍ίʔυΛਓͰ΍ͬͯ΋ϓϩδΣΫτ͸Α͘ͳΒͳ͍
    wυΩϡϝϯτʹ࢒͠ɺ։ൃνʔϜશମͰ౷ҰͰ͖ΔΑ͏ʹ͢Δ
    wϢϏΩλεݴޠɺઃܭɺίʔσΟϯάΨΠυͳͲʜ
23. ઃܭݪଇ΍ύλʔϯ͔ΒֶͿ w%3:ɺ40-*%ݪଇɺΫϦʔϯΞʔΩςΫνϟɺ%%%ɺ:"(/*ͳͲ
    wίʔυ΍ઃܭΛߟ͑Δجຊతͳ͜ͱ͸طʹݴޠԽ͞Ε͍ͯΔ
    wϑϩϯτΤϯυʹ΋׆͔ͤΔ͜ͱ͸ଟ͋͘Δ
    w'MVYύλʔϯͳͲ
24. ·ͱΊ
25. ·ͱΊ wཧղ͠΍͘͢ɺอक͕ՄೳͳϓϩδΣΫτΛ
 ϑϩϯτΤϯυ։ൃͰ΋໨ࢦ͍ͯ͜͠͏
    wςετΛॻ͍͍ͯ͘
    wνʔϜͰٞ࿦͍ͯ͜͠͏
    wઌਓͷ஌ܙͰ͋Δݪଇ΍ύλʔϯΛֶͿ
    wίʔυͷϨϏϡʔΛߦ͏ͷ΋ษڧʹͳΔ
    wࠓճ঺հ͖͠Εͳ͔ͬͨ΋ͷ΋͋Δ͕ɺ
 ઌਓͷ஌ܙͰ͋Δݪଇ΍ύλʔϯ͔Βֶ΅͏
26. ͓ΘΓ