Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あと3年フロントエンドでやる力
Search
naokie
June 21, 2017
Business
1
1.1k
あと3年フロントエンドでやる力
https://frokan.connpass.com/event/57554/
「Frontend de KANPAI! #01 - これからフロントエンドに求められる力 -」
naokie
June 21, 2017
Tweet
Share
More Decks by naokie
See All by naokie
Vue.jsでコンポーネント入門!ハンズオン勉強会
naokie
0
310
Other Decks in Business
See All in Business
株式会社EventHub 会社紹介資料
eventhub
0
20k
【エンジニア採用】BuySell Technologies会社説明資料
buyselltechnologies
1
41k
ワンキャリア 会社説明資料 / Company Deck
onecareer
5
140k
トーキトーク - 登記密着ヒューマンドラマ
takuro_nakajima
PRO
1
1.4k
プロダクトの価値を最大化する「言語化筋トレ」のすすめ / "Verbalizing muscle training” to maximize the value of products
ar_tama
13
4.9k
Delivering More With Less: An Introduction to Value Streams
helenjbeal
3
250
TECH HIRE |「大胆なポジションの開発」によって ハイクラス人材を直接応募で4名採用できた話
trackrecords
PRO
0
220
Findy - 人生で熱くなれるなにかを探している誰かへ / Letter from Findy
findyinc
6
110k
ジンジニアのキャリア ~てぃーびーの場合~ / Tb's career
tbpgr
0
350
20240401 新卒研修 - ピクシブにおける技術領域
harukasan
PRO
1
530
Value Driven DevOps Team
kakehashi
12
2.5k
会社説明について~株式会社リハス~
re9010matsubara
0
130
Featured
See All Featured
Producing Creativity
orderedlist
PRO
337
39k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
In The Pink: A Labor of Love
frogandcode
138
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
Transcript
Copyright © DeNA Co.,Ltd. All Rights Reserved. ͋ͱ3ϑϩϯτΤϯυͰΔྗ 2017/06/21(Wed) Naoki
Endo σβΠϯઓུࣨ DeNA Co., Ltd.
Copyright © DeNA Co.,Ltd. All Rights Reserved. Whois ԕ౻थ גࣜձࣾσΟʔɾΤψɾΤʔɹσβΠϯઓུࣨ
2015ೖࣾ
Copyright © DeNA Co.,Ltd. All Rights Reserved. Back ground 1.
ϕϯνϟʔاۀ 2. ϑϦʔϥϯε 3. ΠλϦΞϯϨετϥϯʢΩονϯελοϑʣ 4. ੍࡞ձࣾʢpuzzle inc.ʣ
Copyright © DeNA Co.,Ltd. All Rights Reserved. Overview ! 26ࡀ
↓ɹࢮ͵ؾͰΨϯόͬͯεΩϧΛʹ͚ͭΑ͏ " # 30ࡀ ↓ɹͬͱεΩϧΞοϓ͢ΔʹͲ͏ͨ͠Β % 32ࡀ ↓ɹ←ࠓ͜͜ɺ͋ͱ3ʁ & 35ࡀʢఆʣ
Copyright © DeNA Co.,Ltd. All Rights Reserved. The skills I
had • Design • Project Management • Git • PHP • jQuery • Flash • Grunt • Bower • Google AnalyPcs • IE6 ରԠྗ
Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮ͜Μͳ͕͍͚ࣗͬͯΔͩΖ͏͔…ʯ
Copyright © DeNA Co.,Ltd. All Rights Reserved. Gaps aLer joining
the DeNA • ੍࡞ձࣾ→αʔϏεࣄۀձࣾ • ʢϏδωε + ΤϯδχΞ + σβΠφʔʣx ϓϩδΣΫτ • ϦϦʔε·Ͱͷεϐʔυʢ࡞Δͷͷେ͖͞ʣ • αʔϏεΛࢭΊͳ͍ظӡ༻ • ࣗಈԽͰ͖Δ͜ͱࣗಈԽ͢Δ
Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮٕज़ྗͷߴ͞ʹ͍͔ͭͶ…ʯ
Copyright © DeNA Co.,Ltd. All Rights Reserved. Learning history 1.
Dev tools 2. Styleguide 3. JS frameworks 4. JSON API 5. Other
Copyright © DeNA Co.,Ltd. All Rights Reserved. Dev tools νʔϜϝϯόʔ
<-> νʔϜϝϯόʔ • Package Manager (bower, npm, yarn) • Build & Task AutomaPon (gulp, npm script) • Module bundler (Webpack, Rollup)
Copyright © DeNA Co.,Ltd. All Rights Reserved. Styleguide σβΠφʔ <->
ΤϯδχΞ • Bootstrap • FoundaPon • Material Design Lite • KSS-node • StyleDocco
Copyright © DeNA Co.,Ltd. All Rights Reserved. JS frameworks View
<-> Model • Marionefe.js • Angular • React • Vue.js
Copyright © DeNA Co.,Ltd. All Rights Reserved. Data API ϒϥβ
<-> APIαʔόʔ • JSON Schema • Redux • FuncPonal Programming
Copyright © DeNA Co.,Ltd. All Rights Reserved. Other • Progressive
Web App • TesPng • SEO Tools • NaPve App with JS
Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮ͍Ζ͍ΖͳνʔϜΛܦݧ͚ͨ͠Ͳ…ʯ
Copyright © DeNA Co.,Ltd. All Rights Reserved. • ࠷খݶͷνʔϜߏʹෆࡏ ◦
Ϗδωεɾاը ◦ ΤϯδχΞ ◦ σβΠφʔ • ਓखෆͰ༷ʑͳ৽نࣄۀʹܞΘΔ • ͍Ζ͍ΖͳνʔϜͰٻΊΒΕΔείʔϓ Small team & Many projects
Copyright © DeNA Co.,Ltd. All Rights Reserved. Frontend circumstances •
ҠΓมΘΓͷૣ͍τϨϯυ • ϑϨʔϜϫʔΫͷछྨଟ͍ • ϑϩϯτΤϯυ໘ͷઃܭྗ ͱ͍͑… • ݹ͍ٕज़Λ͍ଓ͚Δ͜ͱՄೳ
Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮͲͷΑ͏ͳಈ͖ํ͕νʔϜʹߩݙ͢Δ͔…ʯ
Copyright © DeNA Co.,Ltd. All Rights Reserved. Awareness of frontend
posiWon • ΤϯδχΞͱσβΠφʔͷݴޠผ • ϓϩάϥϛϯάݴޠʁPhotoshopݴޠʁ • ྆ํʹରͯ͠ཧղ͕͋Δ • ͭ·ΓϩδΧϧͳ಄ͱΤϞʔγϣφϧͳ಄ͷΓସ͑ • ྆ํͰ͖Δͷ͕ϑϩϯτΤϯυ
Copyright © DeNA Co.,Ltd. All Rights Reserved. ʮΠϯλʔϑΣʔεͱͯ͠ػೳ͢Δʯ
Copyright © DeNA Co.,Ltd. All Rights Reserved. As a interface
1. Dev tools - νʔϜϝϯόʔ <-> νʔϜϝϯόʔ 2. Styleguide - σβΠφʔ <-> ΤϯδχΞ 3. JS frameworks - View <-> Model 4. JSON API - ϒϥβ <-> APIαʔόʔ
Copyright © DeNA Co.,Ltd. All Rights Reserved. The power of
frontend within 3 years • ઐٕज़ͷϑΥϩʔΞοϓ͠ଓ͚ΔମྗΛ͚ͭΔ " • ڞ௨ݴޠΛ૿͢ • ϓϩδΣΫτϝϯόʔͷͭͳ͗ΛऔΔ
Copyright © DeNA Co.,Ltd. All Rights Reserved. - Thank you
-