DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night

Transcript

1. %..Ͱ৽نαʔϏε࡞ͬͨΒ
   ϑϩϯτΤϯυΤϯδχΞͷॏཁੑ͕
   ු͖ூΓʹͳͬͨ࿩ ੴڮܒଠ  %..4UVEZ
   /JHIU
2. ࣗݾ঺հ %..DPN
   -BCP
   
   
   
   ʙ
   6*σβΠφʔ
   
   ϑϩϯτΤϯυΤϯδχΞ ੴڮ
   ܒଠ
3. աڈͷ%..ͷαʔϏεߏஙͱ͸
4. աڈͷ%..ͷαʔϏεߏஙͱ͸ چདྷͷ8FCαʔϏε
   cc
   αʔϏεશମʹରͯ͠ߴ౓ͳ+BWB4DSJQU͕ඞཁແ͍
5. աڈͷ%..ͷαʔϏεߏஙͱ͸ چདྷͷ8FCαʔϏε
   cc
   αʔϏεશମʹରͯ͠ߴ౓ͳ+BWB4DSJQU͕ඞཁແ͍ ϑϩϯτΤϯυΤϯδχΞ
   ͱ͍͏৬छ͕ଘࡏ͠ͳ͔ͬͨ
6. σβΠφʔ͕ͳΜͱ͔͠ͳ͍ͱʜ
7. ໰୊ͩΒ͚ ஌ࣝࠩʹΑΔ඼࣭௿Լ
   ϦϑΝΫλϦϯά͠ͳ͍ɾͰ͖ͳ͍
   ์ஔ͞ΕΔόά
   +4࣮૷Ͳ͕ͬͪ΍Δ໰୊ ϝϯςφϯεੑͷ௿Լ
8. ʮͱΓ࣮͋͑ͣ૷ʯ͕
   ҲΕ͔͍͑ͬͯͨ ͦ΋ͦ΋zઃܭzΛ͢ΔจԽ͕ແ͍ʜ
9. 
   ʀƅЧƅ ŜƄŞŜƄŞŲƄſŲƄſŜƄŦŜƄŦŲƄſŲƄſ
10. ৽نαʔϏε্ཱͪ͛ʜɻ
    ͔̍Βߏங͢Δνϟϯεʂ ཁ݅ఆٛͱମ੍ͮ͘Γ
11. ཁ݅ఆٛ
12. ࠷ऴతͳαʔϏεن໛͸ະ஌਺
    อकରԠऀͷεΩϧײ͸ෆ໌
    ϦϦʔε೔͸ݫक લఏ৚݅
13. ֦ுͷ͠΍͢͞ ඼࣭ͷอ࣋ ։ൃεϐʔυ αʔϏεن໛ ରԠऀͷεΩϧײ ϦϦʔεݫक લఏ৚݅ ඞཁཁ݅
14. ମ੍ͮ͘Γ
15. ϑϩϯτΤϯυΤϯδχΞ )5.-$44+BWB4DSJQU σβΠφʔ 14%࡞੒ίϯηϓτϨΪϡϨʔγϣϯ όοΫΤϯυΤϯδχΞ 1)1 σβΠφʔͱόοΫΤϯυͷؒʹೖΔ
16. ϦʔυσβΠφʔ σβΠφʔ ϦʔυΤϯδχΞ ΤϯδχΞ ϦʔυΤϯδχΞ ΤϯδχΞ σβΠϯηΫγϣϯ ϑϩϯτΤϯυηΫγϣϯ όοΫΤϯυηΫγϣϯ σΟϨΫλʔ 1-ɾ1.
17. ཁ݅Λຬͨ͢΋ͷΛͭ͘ΔͨΊʹ ʢ֦ுʴ඼࣭ʴεϐʔυʣ
18. ίʔσΟϯάϧʔϧ
    ʴ
    υΩϡϝϯςʔγϣϯ
    ʴ
    ։ൃ؀ڥ
19. શମϧʔϧ
    )5.-ϧʔϧ
    $44ϧʔϧ
    +BWB4DSJQUϧʔϧ
    ը૾ϧʔϧ
20. શମϧʔϧ
    )5.-ϧʔϧ
    $44ϧʔϧ
    +BWB4DSJQUϧʔϧ
    ը૾ϧʔϧ খ
    খ
    େ
    த
    খ ॏཁ౓
21. શମϧʔϧ
    )5.-ϧʔϧ
    ը૾ϧʔϧ
    +BWB4DSJQUϧʔϧ
    $44ϧʔϧ খ
    খ
    খ
    த
    େ ॏཁ౓ େࣄͳ࿩͸࠷ޙʹ͠·͢ʂʂʂ
22. શମϧʔϧ ɾ৮ΔϑΝΠϧͷ໌֬ԽʢTPVSDFEFTUJOBUJPOʣ
    ɾϫʔΫϑϩʔఆٛʢ(JU'MPX(JU)VC'MPXʣ
    ɾॻࣜఆٛʢFEJUPSDPOpHʣ
    ɾۓٸରԠ࣌ͷϑϩʔ
    ɾ஫ҙࣄ߲ͳͲ
23. )5.-ϧʔϧ ɾ໋໊نଇʢϋΠϑϯɾΞϯμʔόʔͳͲʣ
    ɾ൑அʹࠔΓͦ͏ͳλάͷΈ࢖͍ํΛఆٛ
    ɹIʙIɺTFDUJPOɺOBWɺTQBOɺͳͲ
    ɾج४͕ᐆດͳλά͸͋͑ͯඇਪ঑
    ɹBTJEFɺBSUJDMFɺJɺͳͲ
    ɾجຊ͸XFCඪ४ʹ४ڌ
24. ը૾ϧʔϧ ɾQOH
    
    KQH
    
    TWH
    ࢖͍෼͚ج४
    ɾ໋໊نଇʢ઀಄ࣙɾ઀ඌࣙʣ
    ɾඞͣѹॖ͢Δ͜ͱ
25. +BWB4DSJQUϧʔϧ ɾK2VFSZʢ6*্ͷදݱʹͱͲΊΔʣ
    ɾॻࣜ͸-JOUFSͰ੍ޚ
    ɾCPXFSͰϥΠϒϥϦ؅ཧ
    ɾϞδϡʔϧ୯ҐͰ࡞੒͠ɺXFCQBDLͰ؅ཧ
26. +BWB4DSJQUϧʔϧ +BWB4DSJQU෦෼ͷॏཁ౓͕
    த
    ͳཧ༝ ɾϞδϡʔϧ؅ཧ͞Ε͍ͯΕ͹ɺϦϑΝΫλϦϯά͸͠΍͍͢
    ɾΞαΠϯ͞ΕΔਓһ͸ɺҰఆͷεΩϧ͕ظ଴Ͱ͖Δ
27. ;͎ʜЏʌ ʅЏʆʀ ʍ
28. $44ϧʔϧ ɾ4BTTΛ࠾༻
    ɾઃܭ͸'-0$44Λ࠾༻
    ɾ֮͑ͮΒ͍ϧʔϧ͸ۃྗഉআ
    ɾॻࣜ͸-JOUFSͰ੍ޚ
    ɾ໋໊نଇ͸#&.
    ɾελΠϧΨΠυͷ࡞੒
29. 4BTT
30. $44ϧʔϧ
    
    4BTT ̋ ʷ ஌ࣝΛͦΕ΄Ͳඞཁͱ͠ͳ͍΋ͷͷΈ࢖༻ ม਺
    ωετ
    ਌ηϨΫλͷܧঝ
    ίϝϯτ ؔ਺
    NJYJOFYUFOE
    ϓϨʔεϗϧμʔ
    ৚݅෼ذ
    ܁Γฦ͠
    ࢛ଇԋࢉ
31. ઃܭɿ'-0$44 IUUQTHJUIVCDPNIJMPLJqPDTT
32. ͸͡Ίʹʜ '-0$44ͷಛ௃Λগ͠આ໌͠·͢
33. $44ϧʔϧ
    
    ઃܭɿ'-0$44 େ͖̏ͭ͘ͷϨΠϠʔʹ෼͔Ε͍ͯΔ ɾ'PVOEBUJPO
    ɾ-BZPVU
    ɾ0CKFDU ᴸ
    ᴸ
    ᴸ ॳظԽͳͲͷϕʔε
    େ࿮ɾϑϨʔϜ෦෼
    ίϯςϯπΤϦΞ
34. $44ϧʔϧ
    
    ઃܭɿ'-0$44 ͞Βʹɺ0CKFDUͷԼʹ̏ͭͷࢠϨΠϠʔ ɾ0CKFDU
    ɹɾ$PNQPOFOU
    ɹɾ1SPKFDU
    ɹɾ6UJMJUZ ᴸ
    ᴸ
    ᴸ ࠶ར༻Ͱ͖Δύʔπ
    ύʔπͷू߹ମ
    ൚༻Ϋϥε
35. $44ϧʔϧ
    
    ઃܭɿ'-0$44 'PVOEBUJPO
    
    -BZPVUͰ࡞ͬͨԼ஍ʹ
    0CKFDUΛ഑ஔ͍ͯ͘͠Πϝʔδ $PNQPOFOUΛ࡞ͬͯɺ6UJMJUZɾ1SPKFDUΛ
    ͏·͘࢖ͬͯཁૉͮ͘Γ
36. $44ϧʔϧ
    
    ઃܭɿ'-0$44 'PVOEBUJPO -BZPVU $PNQPOFOU 6UJMJUZ 1SPKFDU 0CKFDU
37. $44ϧʔϧ
    
    ઃܭ ͢΂ͯͷ࡞ۀऀʹɺ'-0$44ͷ֓೦ΛΩνϯͱཧղ͠
    ӡ༻ͯ͠΋Β͏ͷ͸೉͍͠
38. $44ϧʔϧ
    
    ઃܭ ͢΂ͯͷ࡞ۀऀʹɺ'-0$44ͷ֓೦ΛΩνϯͱཧղ͠
    ӡ༻ͯ͠΋Β͏ͷ͸೉͍͠ Ͱ΋ $PNQPOFOUϕʔεͷઃܭࢥ૝͸׆༻͍ͨ͠
39. $44ϧʔϧ
    
    ઃܭ ࡞ۀऀʹର͢ΔϧʔϧΛεέʔϧμ΢ϯ ɾ'PVOEBUJPO
    ɾ-BZPVU
    ɾ0CKFDU
    
    
    
    
    ɾ$PNQPOFOU
    
    
    
    
    ɾ6UJMJUZ
    
    
    
    
    ɾ1SPKFDU ઃܭऀ͕৮Δൣғ ࡞ۀऀ͕৮Δൣғ
40. $44ϧʔϧ
    
    ઃܭ ࡞ۀऀʹର͢ΔϧʔϧΛεέʔϧμ΢ϯ ɾ$PNQPOFOU
    ɾ6UJMJUZ
    ɾ1SPKFDU ύʔπ͸͢΂ͯίί
    ઃܭऀ͕༻ҙɾ࡞ۀऀ͸࢖͏͚ͩ
    ύʔπͱ͸ແؔ܎ͳಠཱϖʔδ༻
41. $44ϧʔϧ
    
    ઃܭ ࡞ۀऀʹର͢ΔϧʔϧΛεέʔϧμ΢ϯ ɾ$PNQPOFOU
    ɾ6UJMJUZ
    ɾ1SPKFDU ύʔπ͸͢΂ͯίί
    ઃܭऀ͕༻ҙɾ࡞ۀऀ͸࢖͏͚ͩ
    ύʔπͱ͸ແؔ܎ͳಠཱϖʔδ༻
42. $44ϧʔϧ
    
    ઃܭ ࡞ۀऀʹର͢ΔϧʔϧΛεέʔϧμ΢ϯ $PNQPOFOU
    ʴ
    6UJMJUZ
    ͰجຊશͯΛ·͔ͳ͏ ɾ$PNQPOFOU
    ɾ6UJMJUZ
    ɾ1SPKFDU ύʔπ͸͢΂ͯίί
    ઃܭऀ͕༻ҙɾ࡞ۀऀ͸࢖͏͚ͩ
    ύʔπͱ͸ແؔ܎ͳಠཱϖʔδ༻
43. $44ϧʔϧ
    
    ઃܭ ࡞ۀऀʹର͢ΔϧʔϧΛεέʔϧμ΢ϯ $PNQPOFOU
    ʴ
    6UJMJUZ
    ͰجຊશͯΛ·͔ͳ͏ ɾ$PNQPOFOU
    ɾ6UJMJUZ
    ɾ1SPKFDU ύʔπ͸͢΂ͯίί
    ઃܭऀ͕༻ҙɾ࡞ۀऀ͸࢖͏͚ͩ
    ύʔπͱ͸ແؔ܎ͳಠཱϖʔδ༻ Θ͔Γ΍͍͢ʂ
44. $44ϧʔϧ
    
    ઃܭ $44ઃܭ͸ɺӡ༻อकͷ։ൃεϐʔυͷཁ
45. $44ϧʔϧ
    
    ઃܭ $44ઃܭ͸ɺӡ༻อकͷ։ൃεϐʔυͷཁ ਖ਼֬ͳ$PNQPOFOUԽʹ͸ɺ
    σβΠφʔͱͷີͳίϛϡχέʔγϣϯ͕ඞਢ
46. $44ϧʔϧ
    
    ઃܭ $44ઃܭ͸ɺӡ༻อकͷ։ൃεϐʔυͷཁ σβΠφʔ ϑϩϯτΤϯυ όοΫΤϯυ ਖ਼֬ͳ$PNQPOFOUԽʹ͸ɺ
    σβΠφʔͱͷີͳίϛϡχέʔγϣϯ͕ඞਢ
47. ελΠϧΨΠυ
48. $44ϧʔϧ
    
    ελΠϧΨΠυ TDTTϑΝΠϧ͔Β௚઀ελΠϧΨΠυΛࣗಈੜ੒͢ΔΑ͏ʹ
    (VMQΛ࢖ͬͯ։ൃ؀ڥΛߏங src/*.scss dest/*.css styleguide/*.html ݁߹ɾѹॖͳͲΛͨ͠
    $44ϑΝΠϧ ελΠϧΨΠυ
    ʢ$PNQPOFOUҰཡʣ
49. ࣮ࡍͷϑϩϯτ։ൃ؀ڥ
50. *.js JS （modules） *.js JS （library） *.html スタイル ガイド *.scss CSS （source） *.min.css CSS (dest) *.min.js JS (entry point) lib.min.js JS (library minify) hologram sass webpack Gulp controller（php） Viewファイル *.volt（php）
51. *.js JS （modules） *.js JS （library *.html スタイル ガイド *.scss CSS （source） *.min.css CSS (dest) *.min.js JS (entry point) lib.min.js JS (library minify) hologram sass webpack Gulp controller（php Viewファイル *.volt（php） ࡞ۀऀ͕৮ΔϑΝΠϧ
52. ઃܭऀʢϑϩϯτΤϯυΤϯδχΞʣ͕؅ཧΛ͢ΔͨΊʹ ɾ$44
    JNQPSU
    ɾ8FCQBDL
    &OUSZ1PJOU
    ɾXFCQBDLDPOpHKT
    ɾQBDLBHFKTPO
    ɾCPXFSKTPO ؅ཧ༻ϑΝΠϧΛΩνϯͱ࡞͓ͬͯ͘
    ˡ݁ߏେࣄͩͬͨ
53. ϑϩϯτΤϯυΤϯδχΞͷॏཁੑͱ͸ ·ͱΊ
54. ͱʹ͔͘Ϋιίʔυ͕ݮΔ
55. ͱʹ͔͘Ϋιίʔυ͕ݮΔ ɾϝϯς͠΍͍͢
    ɾύϑΥʔϚϯεߴ͍
    ɾόά͕ग़ʹ͍͘
    ɾؾ͍͍࣋ͪ
    ɾָ͍͠
56. ϝϦοτͩΒ͚
57. 5IBOL
    :PV
      %..4UVEZ
    /JHIU