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

2917a3c430817eb71086f8973c06ebba?s=47 sakito
November 21, 2019

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

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

Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

November 21, 2019
Tweet

Transcript

  1. ϑϩϯτΤϯυͷ
 ྑ͍ઃܭɺྑ͍ίʔυΛߟ͑Δ OHKBQBO0O"JS

  2. /BNF 4BLJUP.VLBJ 5XJUUFS
 !@@TBLJUP@@ $PNQBOZ $ZCP[VJOD
 'SPOUFOE&YQFSU5FBN "CPVUNF

  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. ͓ΘΓ