Upgrade to Pro — share decks privately, control downloads, hide ads and more …

僕がDeNAでJavaScriptを学んだ話

Avatar for motio motio
October 26, 2017

 僕がDeNAでJavaScriptを学んだ話

Frontend de KANPAI! #02 登壇資料です。
DeNAに入るまで静的なHTML, CSSしか経験がなかったけど、現在はモダンなフロントエンドの技術でサービス開発をしています。JavaScriptをどのように覚えていったかを発表しました。

Avatar for motio

motio

October 26, 2017
Tweet

Other Decks in Programming

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. 10 ൃදͷ໨త هԱ͸ബΕ͍ͯ͘΋ͷ

    هԱ͕࢒͍ͬͯΔ͏ͪʹ JS ʹ࢛ۤീۤͯͨ͠ࠒͷ࿩Λͨ͠Βɺ ୭͔ͷ໾ʹཱͯΔ͔΋ʁ
  8. Copyright © DeNA Co.,Ltd. All Rights Reserved. Worldwide ޲͚ϒϥ΢βήʔϜΛ࡞͍ͬͯͨ͜Ζɺ ϒϥ΢βήʔϜʹ΋೔ʑɺϦονͳ

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

    : ॳΊͯϦϦʔε͞Εͨ JS ϦϦʔε͞ΕͨॳΊͯͷ JS ͸ class ͷ੾Γସ͑Λ͢Δ͚ͩͷΞίʔσΟΦϯɻ ▪ Variables ▪ if else statements ▪ Events ▪ DOM API class ͷ੾Γସ͚͑ͩͰɺΞίʔσΟΦϯ΍λϒ͕Ͱ͖Δɻ ʰAjaxTowerʱ͞Μ΍ʰϚϯΨͰ෼͔Δ JavaScriptʱ͞Μ͕ษڧʹͳΓ· ͨ͠
  10. Copyright © DeNA Co.,Ltd. All Rights Reserved. Carousel Λ1ߦͣͭɺΏͬ͘ΓΏͬ͘Γཧղ͍ͯͬͨ͠ɻ 2ϲ݄͘Β͍͔͔͔ͬͨ΋ɻ

    + ▪ Function ▪ Scope ▪ Array ▪ For ͳͥ Carousel ͔͸ɺࣗ෼ͷϞνϕʔγϣϯΛอͭͨΊͰͨ͠ɻ ɹ Carousel Έ͍ͨͳͷΛ͍͖ͳΓ࡞Ζ͏ͱ͢Δͷ͸Φεεϝ͠ͳ͍ʂ ɹͱ͍͏هࣄΛݟ͔͚ͨ͜ͱ͕͋Γ·͕͢ɺ JS ͷجૅ͕ͭ·͍༷ͬͯͯʑͳ͜ͱֶ͕΂ͨͱݸਓతʹ͸ࢥ͍ͬͯ·͢ɻ 14 Topic 2 : ͍֮͑ͯ͘աఔ
  11. 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ΞϓϦ࡞੒
  12. 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 Λಋೖͨ͜͠ͱ
  13. 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 ͯ͠ ٕज़ྗΛߴΊΔຖ೔ɻ
  14. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ͜͜ΛݟΕ͹෼͔ΔͰOK ▪

    ࣮ݱ͍ͨ͜͠ͱʹͿͪ͋ͨͬͨ࣌ͷݕࡧྗ ▪ Ͳ͏ͯ͠΋෼͔Βͳ͚Ε͹ਓʹฉ͘ جૅ͕Ͱ͖ͨΒɺ͋ͱ͸ௐ΂ͯεΩϧΛ৳͹͍͚ͯ͠ΔͱΘ͔ͬͨɻ ͦ͜·Ͱ͕ΩπΠͱײͨ͡ 19 ؾ͖ͮ 1 : JSͬͯશ෦Λ֮͑ΔΜͰ͔͢ʁΨΫϒϧ
  15. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ϓϩδΣΫτΛ௨ͯ͠੒௕ͨ͠ ⁃

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

    ࣗ෼ͷίʔυ͕Ϋιͩͳͱࢥͬͯ΋ࡽͨ͠ɻίʔυ͸෼͔Δਓ͕ݟΕ ͹͙͢෼͔Δ ⁃ ͲΜͳʹ༏ΕͨΤϯδχΞ΋ɺ࠷ॳ͸ΫιίʔυΛॻ͍͍ͯͨ͸ͣ ⁃ 3ϲ݄ޙɺ൒೥ޙɺΫιίʔυ͡Όͳ͘ͳΕ͹͍͍ 23 ·ͱΊ 2
  17. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ෼͔Δ·Ͱษڧͨ͠ ⁃

    ԟ෮ͷిं΍ٳ೔ʹ input ͠ଓ͚ͨ 24 ·ͱΊ 3
  18. Copyright © DeNA Co.,Ltd. All Rights Reserved. ▪ ໨ඪΛཱͯΔ ⁃

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