僕がDeNAでJavaScriptを学んだ話

Transcript

1. Copyright © DeNA Co.,Ltd. All Rights Reserved. ๻͕DeNAͰ
   JavaScriptΛֶΜͩ࿩ Oct

   25, 2017 Keita Sakamoto Design Strategies Office
 DeNA Co., Ltd. 1

2. Copyright © DeNA Co.,Ltd. All Rights Reserved. ࡔຊ
   ܒଠ
   Frontend Engineer

   FINAL FANTASY BRIGADE ͳͲͷϒϥ΢βήʔϜɺ
   ϋοΧυʔϧͳͲͷϝσΟΞαʔϏεΛ୲౰ɻ
   ݱࡏɺओʹ৽نαʔϏε։ൃʹैࣄɻ 2 ࣗݾ঺հ

3. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ HTML ▪

   CSS ▪ JavaScript ⁃ Vue.js ⁃ Vuex etc ▪ Node.js, npm ▪ webpack ▪ gulp ▪ Babel etc 3 ݱࡏ

4. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ HTML ▪

   CSS ▪ JavaScript ⁃ Vue.js ⁃ Vuex etc ▪ Node.js, npm ౰࣌ͳ͔͚ͬͨͲͶ
   ▪ webpack ▪ gulp ▪ Babel etc 4 ೖࣾ౰࣌

5. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ static ͳҊ݅ͷܦݧͷΈ
   

   ▪ JavaScript ͸΋ͪΖΜ Template Engine ΋ ⁃ DeNA MobaSiF ͷ Template Syntax ʹ໘৯Βͬͨ
   
   ౰࣌ͷ๻ʹͱͬͯढจͰͨ͠ 5 ೖࣾ౰࣌

6. Copyright © DeNA Co.,Ltd. All Rights Reserved. 6 ೖࣾ·Ͱͷܦྺ ▪

   2005 ʙɹɹϛϡʔδγϟϯɹiTunes Released
   ▪ 2011/05ɹɹʰWeb Designer ཆ੒ίʔεʱ3ϲ݄डߨ
   ▪ 2011/11ɹɹ๭ࢢͷ
   WebվमҊ݅
   ▪ 2012/04ɹɹDeNA ѹ౗తܦݧෆ଍
   ෆ଍෼ΛຒΊΔ΂͘౒ྗ͠·ͨ͠

7. Copyright © DeNA Co.,Ltd. All Rights Reserved. 7 ൃදͷ໨త

8. Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮͲ͏΍֮ͬͯ͑·ͨ͠ʁʯ
   ΩϥΩϥͯ͠ݟ͑Δઌഐ Frontend

   Engineer ʮ͏ʔΜɺͲ͏͔ͩͬͨͳ͋ʯ
   8 ൃදͷ໨త

9. Copyright © DeNA Co.,Ltd. All Rights Reserved. ଞݴޠग़਎ͷΤϯδχΞ͸
   ͭΑ͍ Backend

   Engineer ʮ+4ͬͯ೉͍͠ʁʯ
   9 ൃදͷ໨త

10. Copyright © DeNA Co.,Ltd. All Rights Reserved. 10 ൃදͷ໨త هԱ͸ബΕ͍ͯ͘΋ͷ
    

    هԱ͕࢒͍ͬͯΔ͏ͪʹ JS ʹ࢛ۤീۤͯͨ͠ࠒͷ࿩Λͨ͠Βɺ
    ୭͔ͷ໾ʹཱͯΔ͔΋ʁ

11. Copyright © DeNA Co.,Ltd. All Rights Reserved. 11 Topic

12. Copyright © DeNA Co.,Ltd. All Rights Reserved. Worldwide ޲͚ϒϥ΢βήʔϜΛ࡞͍ͬͯͨ͜Ζɺ
    ϒϥ΢βήʔϜʹ΋೔ʑɺϦονͳ

    UI/UX ͕ٻΊΒΕΔதɺ
    ࣾ಺ʹ͸༏लͳ Frontend Engineer ͕͍·ͨ͠ɻ
    ͦͷਓͨͪͷΑ͏ʹ JS ॻ͚ΔΑ͏ʹͳΓ͍ͨʂͱࢥ͍ɺ
    JavaScript ೖ໳ͷΑ͏ͳαΠτΛݟͯษڧ͢ΔΑ͏ʹͳͬͨɻ 12 Topic 1 : ॳΊͯϦϦʔε͞Εͨ JS

13. Copyright © DeNA Co.,Ltd. All Rights Reserved. 13 Topic 1

    : ॳΊͯϦϦʔε͞Εͨ JS ϦϦʔε͞ΕͨॳΊͯͷ JS ͸
    class ͷ੾Γସ͑Λ͢Δ͚ͩͷΞίʔσΟΦϯɻ
    ▪ Variables ▪ if else statements ▪ Events ▪ DOM API class ͷ੾Γସ͚͑ͩͰɺΞίʔσΟΦϯ΍λϒ͕Ͱ͖Δɻ
    ʰAjaxTowerʱ͞Μ
    ΍
    ʰϚϯΨͰ෼͔Δ JavaScriptʱ͞Μ͕ษڧʹͳΓ· ͨ͠

14. Copyright © DeNA Co.,Ltd. All Rights Reserved. Carousel Λ1ߦͣͭɺΏͬ͘ΓΏͬ͘Γཧղ͍ͯͬͨ͠ɻ
    2ϲ݄͘Β͍͔͔͔ͬͨ΋ɻ
    

    + ▪ Function ▪ Scope ▪ Array ▪ For
    ͳͥ Carousel ͔͸ɺࣗ෼ͷϞνϕʔγϣϯΛอͭͨΊͰͨ͠ɻ
    ɹ Carousel Έ͍ͨͳͷΛ͍͖ͳΓ࡞Ζ͏ͱ͢Δͷ͸Φεεϝ͠ͳ͍ʂ
    ɹ
    ͱ͍͏هࣄΛݟ͔͚ͨ͜ͱ͕͋Γ·͕͢ɺ
    JS ͷجૅ͕ͭ·͍༷ͬͯͯʑͳ͜ͱֶ͕΂ͨͱݸਓతʹ͸ࢥ͍ͬͯ·͢ɻ 14 Topic 2 : ͍֮͑ͯ͘աఔ

15. Copyright © DeNA Co.,Ltd. All Rights Reserved. Ajax Λར༻ͨ͠Ϣʔβʔ౤ߘػೳ
    +

    ▪ this ๻͕࢖͍͍ͨͷ͸͋Εͷ͜ΕͰʂ ▪ prototype Μʁࢼ࡞඼ʁ ▪ RegExp ▪ LocalStorage ▪ Ajax ▪ File API ▪ Node.js, npm ▪ Grunt ͜ͷ͋ͨΓ͔Β͸ɺjQuery ͱϥΠϒϥϦͰେମͷ΋ͷ͸࣮૷͍͚ͯ͠ΔΑ͏ʹɻ
    jQuery ͚ͩͩͱਏ͘ͳ͖ͬͯͯɺunderscore.js ͷ template Λ࢖͍࢝ΊͨΓɻ 15 Topic 3 : WebΞϓϦ࡞੒

16. Copyright © DeNA Co.,Ltd. All Rights Reserved. AngularJS ੡ͷ Web

    ΞϓϦ։ൃ
    + ▪ MVC ▪ Data Binding ▪ Dependency Injection ▪ Directive etc … Angular Way !ɹused AngularJS 1.3 ▪ DOM Λࣗ෼Ͱม͑ͨ͘ͳͬͯ͠·͏ʮjQuery ೴ʯ͔Βͷ୤٫
    େ͖ͳ֓೦ͷస׵Ͱͨ͠ɻ ͜ͷࠒ͔Βɺάάͬͯ΋೔ຊޠͷهࣄͰղܾͰ͖Δ͜ͱ͕গͳ͘ͳ͖ͬͯͯɺӳޠͷهࣄ ΛಡΉΑ͏ʹɻ
    ʰAngularJS ϦϑΝϨϯεʱɺʰύʔϑΣΫτ JavascriptʱΛಡΉɻ 16 Topic 4 : AngularJS Λಋೖͨ͜͠ͱ

17. Copyright © DeNA Co.,Ltd. All Rights Reserved. 17 Topic 5

    : 2015, 2016 → ݱࡏ + ▪ Vue.js ▪ Vuex ▪ Node.js, npm ▪ webpack ▪ Browserify ▪ gulp ▪ Babel etc ࣾ಺ͷ Frontend ษڧձɺॻ੶ΛങͬͨΓɺάάͬͨΓɺ input ͠ͳ͕Β output ͯ͠ ٕज़ྗΛߴΊΔຖ೔ɻ

18. Copyright © DeNA Co.,Ltd. All Rights Reserved. 18 ؾ͖ͮ

19. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ͜͜ΛݟΕ͹෼͔ΔͰOK ▪

    ࣮ݱ͍ͨ͜͠ͱʹͿͪ͋ͨͬͨ࣌ͷݕࡧྗ ▪ Ͳ͏ͯ͠΋෼͔Βͳ͚Ε͹ਓʹฉ͘ جૅ͕Ͱ͖ͨΒɺ͋ͱ͸ௐ΂ͯεΩϧΛ৳͹͍͚ͯ͠ΔͱΘ͔ͬͨɻ
    ͦ͜·Ͱ͕ΩπΠͱײͨ͡ 19 ؾ͖ͮ 1 : JSͬͯશ෦Λ֮͑ΔΜͰ͔͢ʁ
    ΨΫϒϧ

20. Copyright © DeNA Co.,Ltd. All Rights Reserved. Πν͔Βॻ͘৔߹΋͋Δ͕ɺ஝ੵ͖ͯͨ͠ίʔυ΍ɺ
    ϥΠϒϥϦɺϑϨʔϜϫʔΫɺgithub ͳͲࢀߟʹͨ͠Γ͢Δ

    20 ؾ͖ͮ 2 : ୹࣌ؒͰੌ͍ίʔυྔɻͲ͏΍ͬͯॻ͍ͯΜͷ

21. Copyright © DeNA Co.,Ltd. All Rights Reserved. 21 ·ͱΊ

22. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ϓϩδΣΫτΛ௨ͯ͠੒௕ͨ͠ ⁃

    ઌഐɾಉ྅ͨͪ΍ϓϩδΣΫτͷ͓͔͛ɻࠓ౓͸ࣗ෼͕෼͔Γ΍͘͢ ڭ͑ΒΕΔΑ͏ʹͳΖ͏
    ⁃ ࣾ಺ Github ͸ QA Λ௨ա࣮ͨ͠ઓతͳιʔείʔυ͕ͨ͘͞Μ 22 ·ͱΊ 1

23. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ίʔυΛࡽͨ͠ ⁃

    ࣗ෼ͷίʔυ͕Ϋιͩͳͱࢥͬͯ΋ࡽͨ͠ɻίʔυ͸෼͔Δਓ͕ݟΕ ͹͙͢෼͔Δ
    ⁃ ͲΜͳʹ༏ΕͨΤϯδχΞ΋ɺ࠷ॳ͸ΫιίʔυΛॻ͍͍ͯͨ͸ͣ
    ⁃ 3ϲ݄ޙɺ൒೥ޙɺΫιίʔυ͡Όͳ͘ͳΕ͹͍͍ 23 ·ͱΊ 2

24. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ෼͔Δ·Ͱษڧͨ͠ ⁃

    ԟ෮ͷిं΍ٳ೔ʹ input ͠ଓ͚ͨ 24 ·ͱΊ 3

25. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ໨ඪΛཱͯΔ ⁃

    ݱࡏͷεΩϧʹ3೥ͰͳΖ͏ͱͨ͠ɻ࣮ࡍ͸4೥͔͔ͬͨ
    ⁃ ໨ඪΛ࣋ͭ͜ͱ͸େࣄͩͱ࠶֬ೝ 25 ·ͱΊ 4

26. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ JS Ͱ͖ΔΑ͏ʹͳͬͨͷͰλεΫ΍Β͍ͤͯͩ͘͞ͱݴ͍ଓ͚ͨ
    

    ⁃ ͙͢ʹΞαΠϯ͞Εͳͯ͘΋ݴ͍ଓ͚Δ͜ͱେࣄ 26 ·ͱΊ 5

27. Copyright © DeNA Co.,Ltd. All Rights Reserved. 27 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠