Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ͕DeNAͰ JavaScriptΛֶΜͩ Oct 25, 2017 Keita Sakamoto Design Strategies Office DeNA Co., Ltd. 1
Slide 2
Slide 2 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ࡔຊܒଠ Frontend Engineer FINAL FANTASY BRIGADE ͳͲͷϒϥβήʔϜɺ ϋοΧυʔϧͳͲͷϝσΟΞαʔϏεΛ୲ɻ ݱࡏɺओʹ৽نαʔϏε։ൃʹैࣄɻ 2 ࣗݾհ
Slide 3
Slide 3 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ HTML ■ CSS ■ JavaScript ⁃ Vue.js ⁃ Vuex etc ■ Node.js, npm ■ webpack ■ gulp ■ Babel etc 3 ݱࡏ
Slide 4
Slide 4 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ HTML ■ CSS ■ JavaScript ⁃ Vue.js ⁃ Vuex etc ■ Node.js, npm ࣌ͳ͔͚ͬͨͲͶ ■ webpack ■ gulp ■ Babel etc 4 ೖࣾ࣌
Slide 5
Slide 5 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ static ͳҊ݅ͷܦݧͷΈ ■ JavaScript ͪΖΜ Template Engine ⁃ DeNA MobaSiF ͷ Template Syntax ʹ໘৯Βͬͨ ࣌ͷʹͱͬͯढจͰͨ͠ 5 ೖࣾ࣌
Slide 6
Slide 6 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 6 ೖࣾ·Ͱͷܦྺ ■ 2005 ʙɹɹϛϡʔδγϟϯɹiTunes Released ■ 2011/05ɹɹʰWeb Designer ཆίʔεʱ3ϲ݄डߨ ■ 2011/11ɹɹࢢͷWebվमҊ݅ ■ 2012/04ɹɹDeNA ѹతܦݧෆ ෆΛຒΊΔ͘ྗ͠·ͨ͠
Slide 7
Slide 7 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 7 ൃදͷత
Slide 8
Slide 8 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮͲ͏֮ͬͯ͑·ͨ͠ʁʯ ΩϥΩϥͯ͠ݟ͑Δઌഐ Frontend Engineer ʮ͏ʔΜɺͲ͏͔ͩͬͨͳ͋ʯ 8 ൃදͷత
Slide 9
Slide 9 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ଞݴޠग़ͷΤϯδχΞ ͭΑ͍ Backend Engineer ʮ+4͍ͬͯ͠ʁʯ 9 ൃදͷత
Slide 10
Slide 10 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 10 ൃදͷత هԱബΕ͍ͯ͘ͷ هԱ͕͍ͬͯΔ͏ͪʹ JS ʹ࢛ۤീۤͯͨ͠ࠒͷΛͨ͠Βɺ ୭͔ͷʹཱͯΔ͔ʁ
Slide 11
Slide 11 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 11 Topic
Slide 12
Slide 12 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. Worldwide ͚ϒϥβήʔϜΛ࡞͍ͬͯͨ͜Ζɺ ϒϥβήʔϜʹʑɺϦονͳ UI/UX ͕ٻΊΒΕΔதɺ ࣾʹ༏लͳ Frontend Engineer ͕͍·ͨ͠ɻ ͦͷਓͨͪͷΑ͏ʹ JS ॻ͚ΔΑ͏ʹͳΓ͍ͨʂͱࢥ͍ɺ JavaScript ೖͷΑ͏ͳαΠτΛݟͯษڧ͢ΔΑ͏ʹͳͬͨɻ 12 Topic 1 : ॳΊͯϦϦʔε͞Εͨ JS
Slide 13
Slide 13 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 13 Topic 1 : ॳΊͯϦϦʔε͞Εͨ JS ϦϦʔε͞ΕͨॳΊͯͷ JS class ͷΓସ͑Λ͢Δ͚ͩͷΞίʔσΟΦϯɻ ■ Variables ■ if else statements ■ Events ■ DOM API class ͷΓସ͚͑ͩͰɺΞίʔσΟΦϯλϒ͕Ͱ͖Δɻ ʰAjaxTowerʱ͞ΜʰϚϯΨͰ͔Δ JavaScriptʱ͞Μ͕ษڧʹͳΓ· ͨ͠
Slide 14
Slide 14 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. Carousel Λ1ߦͣͭɺΏͬ͘ΓΏͬ͘Γཧղ͍ͯͬͨ͠ɻ 2ϲ݄͘Β͍͔͔͔ͬͨɻ + ■ Function ■ Scope ■ Array ■ For ͳͥ Carousel ͔ɺࣗͷϞνϕʔγϣϯΛอͭͨΊͰͨ͠ɻ ɹ Carousel Έ͍ͨͳͷΛ͍͖ͳΓ࡞Ζ͏ͱ͢ΔͷΦεεϝ͠ͳ͍ʂ ɹͱ͍͏هࣄΛݟ͔͚ͨ͜ͱ͕͋Γ·͕͢ɺ JS ͷجૅ͕ͭ·͍༷ͬͯͯʑͳ͜ͱֶ͕ͨͱݸਓతʹࢥ͍ͬͯ·͢ɻ 14 Topic 2 : ͍֮͑ͯ͘աఔ
Slide 15
Slide 15 text
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ΞϓϦ࡞
Slide 16
Slide 16 text
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 Λಋೖͨ͜͠ͱ
Slide 17
Slide 17 text
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 ͯ͠ ٕज़ྗΛߴΊΔຖɻ
Slide 18
Slide 18 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 18 ؾ͖ͮ
Slide 19
Slide 19 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ ͜͜ΛݟΕ͔ΔͰOK ■ ࣮ݱ͍ͨ͜͠ͱʹͿͪ͋ͨͬͨ࣌ͷݕࡧྗ ■ Ͳ͏͔ͯ͠Βͳ͚Εਓʹฉ͘ جૅ͕Ͱ͖ͨΒɺ͋ͱௐͯεΩϧΛ৳͍͚ͯ͠ΔͱΘ͔ͬͨɻ ͦ͜·Ͱ͕ΩπΠͱײͨ͡ 19 ؾ͖ͮ 1 : JSͬͯશ෦Λ֮͑ΔΜͰ͔͢ʁΨΫϒϧ
Slide 20
Slide 20 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. Πν͔Βॻ͘߹͋Δ͕ɺੵ͖ͯͨ͠ίʔυɺ ϥΠϒϥϦɺϑϨʔϜϫʔΫɺgithub ͳͲࢀߟʹͨ͠Γ͢Δ 20 ؾ͖ͮ 2 : ࣌ؒͰੌ͍ίʔυྔɻͲ͏ͬͯॻ͍ͯΜͷ
Slide 21
Slide 21 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 21 ·ͱΊ
Slide 22
Slide 22 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ ϓϩδΣΫτΛ௨ͯͨ͠͠ ⁃ ઌഐɾಉ྅ͨͪϓϩδΣΫτͷ͓͔͛ɻࠓ͕͔ࣗΓ͘͢ ڭ͑ΒΕΔΑ͏ʹͳΖ͏ ⁃ ࣾ Github QA Λ௨ա࣮ͨ͠ઓతͳιʔείʔυ͕ͨ͘͞Μ 22 ·ͱΊ 1
Slide 23
Slide 23 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ ίʔυΛࡽͨ͠ ⁃ ࣗͷίʔυ͕Ϋιͩͳͱࢥͬͯࡽͨ͠ɻίʔυ͔Δਓ͕ݟΕ ͙͔͢Δ ⁃ ͲΜͳʹ༏ΕͨΤϯδχΞɺ࠷ॳΫιίʔυΛॻ͍͍ͯͨͣ ⁃ 3ϲ݄ޙɺޙɺΫιίʔυ͡Όͳ͘ͳΕ͍͍ 23 ·ͱΊ 2
Slide 24
Slide 24 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ ͔Δ·Ͱษڧͨ͠ ⁃ ԟ෮ͷిंٳʹ input ͠ଓ͚ͨ 24 ·ͱΊ 3
Slide 25
Slide 25 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ ඪΛཱͯΔ ⁃ ݱࡏͷεΩϧʹ3ͰͳΖ͏ͱͨ͠ɻ࣮ࡍ4͔͔ͬͨ ⁃ ඪΛ࣋ͭ͜ͱେࣄͩͱ࠶֬ೝ 25 ·ͱΊ 4
Slide 26
Slide 26 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. ■ JS Ͱ͖ΔΑ͏ʹͳͬͨͷͰλεΫΒ͍ͤͯͩ͘͞ͱݴ͍ଓ͚ͨ ⁃ ͙͢ʹΞαΠϯ͞Εͳͯ͘ݴ͍ଓ͚Δ͜ͱେࣄ 26 ·ͱΊ 5
Slide 27
Slide 27 text
Copyright © DeNA Co.,Ltd. All Rights Reserved. 27 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠