僕がDeNAでJavaScriptを学んだ話

Frontend de KANPAI! #02 登壇資料です。
DeNAに入るまで静的なHTML, CSSしか経験がなかったけど、現在はモダンなフロントエンドの技術でサービス開発をしています。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 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠