あと3年フロントエンドでやる力

https://frokan.connpass.com/event/57554/
「Frontend de KANPAI! #01 - これからフロントエンドに求められる力 -」

Transcript

1. Copyright © DeNA Co.,Ltd. All Rights Reserved. ͋ͱ3೥ϑϩϯτΤϯυͰ΍Δྗ 2017/06/21(Wed) Naoki Endo σβΠϯઓུࣨ DeNA Co., Ltd.
2. Copyright © DeNA Co.,Ltd. All Rights Reserved. Whois ԕ౻௚थ גࣜձࣾσΟʔɾΤψɾΤʔɹσβΠϯઓུࣨ 2015೥ೖࣾ
3. Copyright © DeNA Co.,Ltd. All Rights Reserved. Back ground 1.  ϕϯνϟʔاۀ 2.  ϑϦʔϥϯε 3.  ΠλϦΞϯϨετϥϯʢΩονϯελοϑʣ 4.  ੍࡞ձࣾʢpuzzle inc.ʣ
4. Copyright © DeNA Co.,Ltd. All Rights Reserved. Overview ! 26ࡀ ↓ɹࢮ͵ؾͰΨϯόͬͯεΩϧΛ਎ʹ͚ͭΑ͏ " # 30ࡀ ↓ɹ΋ͬͱεΩϧΞοϓ͢Δʹ͸Ͳ͏ͨ͠Β % 32ࡀ ↓ɹ←ࠓ͜͜ɺ͋ͱ3೥ʁ & 35ࡀʢఆ೥ʣ
5. Copyright © DeNA Co.,Ltd. All Rights Reserved. The skills I had •  Design •  Project Management •  Git •  PHP •  jQuery •  Flash •  Grunt •  Bower •  Google AnalyPcs •  IE6 ରԠྗ
6. Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮ͜Μͳࣗ෼͕΍͍͚ͬͯΔͩΖ͏͔…ʯ
7. Copyright © DeNA Co.,Ltd. All Rights Reserved. Gaps aLer joining the DeNA •  ੍࡞ձࣾ→αʔϏεࣄۀձࣾ •  ʢϏδωε + ΤϯδχΞ + σβΠφʔʣx ϓϩδΣΫτ •  ϦϦʔε·Ͱͷεϐʔυʢ࡞Δ΋ͷͷେ͖͞ʣ •  αʔϏεΛࢭΊͳ͍௕ظӡ༻ •  ࣗಈԽͰ͖Δ͜ͱ͸ࣗಈԽ͢Δ
8. Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮٕज़ྗͷߴ͞ʹ௥͍͔ͭͶ͹…ʯ
9. Copyright © DeNA Co.,Ltd. All Rights Reserved. Learning history 1.  Dev tools 2.  Styleguide 3.  JS frameworks 4.  JSON API 5.  Other
10. Copyright © DeNA Co.,Ltd. All Rights Reserved. Dev tools νʔϜϝϯόʔ <-> νʔϜϝϯόʔ •  Package Manager (bower, npm, yarn) •  Build & Task AutomaPon (gulp, npm script) •  Module bundler (Webpack, Rollup)
11. Copyright © DeNA Co.,Ltd. All Rights Reserved. Styleguide σβΠφʔ <-> ΤϯδχΞ •  Bootstrap •  FoundaPon •  Material Design Lite •  KSS-node •  StyleDocco
12. Copyright © DeNA Co.,Ltd. All Rights Reserved. JS frameworks View <-> Model •  Marionefe.js •  Angular •  React •  Vue.js
13. Copyright © DeNA Co.,Ltd. All Rights Reserved. Data API ϒϥ΢β <-> APIαʔόʔ •  JSON Schema •  Redux •  FuncPonal Programming
14. Copyright © DeNA Co.,Ltd. All Rights Reserved. Other •  Progressive Web App •  TesPng •  SEO Tools •  NaPve App with JS
15. Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮ͍Ζ͍ΖͳνʔϜΛܦݧ͚ͨ͠Ͳ…ʯ
16. Copyright © DeNA Co.,Ltd. All Rights Reserved. •  ࠷খݶͷνʔϜߏ੒ʹ͸ෆࡏ ◦  Ϗδωεɾاը ◦  ΤϯδχΞ ◦  σβΠφʔ •  ਓखෆ଍Ͱ༷ʑͳ৽نࣄۀʹܞΘΔ •  ͍Ζ͍ΖͳνʔϜͰٻΊΒΕΔείʔϓ Small team & Many projects
17. Copyright © DeNA Co.,Ltd. All Rights Reserved. Frontend circumstances •  ҠΓมΘΓͷૣ͍τϨϯυ •  ϑϨʔϜϫʔΫͷछྨଟ͍ •  ϑϩϯτΤϯυ໘ͷઃܭྗ ͱ͸͍͑… •  ݹ͍ٕज़Λ࢖͍ଓ͚Δ͜ͱ΋Մೳ
18. Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮͲͷΑ͏ͳಈ͖ํ͕νʔϜʹߩݙ͢Δ͔…ʯ
19. Copyright © DeNA Co.,Ltd. All Rights Reserved. Awareness of frontend posiWon •  ΤϯδχΞͱσβΠφʔͷݴޠ͸ผ •  ϓϩάϥϛϯάݴޠʁPhotoshopݴޠʁ •  ྆ํʹରͯ͠ཧղ͕͋Δ •  ͭ·ΓϩδΧϧͳ಄ͱΤϞʔγϣφϧͳ಄ͷ੾Γସ͑ •  ྆ํͰ͖Δͷ͕ϑϩϯτΤϯυ
20. Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮΠϯλʔϑΣʔεͱͯ͠ػೳ͢Δʯ
21. Copyright © DeNA Co.,Ltd. All Rights Reserved. As a interface 1.  Dev tools - νʔϜϝϯόʔ <-> νʔϜϝϯόʔ 2.  Styleguide - σβΠφʔ <-> ΤϯδχΞ 3.  JS frameworks - View <-> Model 4.  JSON API - ϒϥ΢β <-> APIαʔόʔ
22. Copyright © DeNA Co.,Ltd. All Rights Reserved. The power of frontend within 3 years •  ઐ໳ٕज़ͷϑΥϩʔΞοϓ͠ଓ͚ΔମྗΛ͚ͭΔ " •  ڞ௨ݴޠΛ૿΍͢ •  ϓϩδΣΫτϝϯόʔͷͭͳ͗໾ΛऔΔ
23. Copyright © DeNA Co.,Ltd. All Rights Reserved. - Thank you -