×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠