Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
あらゆる人のためのフロントエンド #frontkansai
Potato4d(Hanatani Takuma)
March 18, 2017
Technology
7
1.7k
あらゆる人のためのフロントエンド #frontkansai
FRONTEND CONFERENCE 2017の基調講演のスライドです。
Potato4d(Hanatani Takuma)
March 18, 2017
Tweet
Share
More Decks by Potato4d(Hanatani Takuma)
See All by Potato4d(Hanatani Takuma)
potato4d
8
3k
potato4d
21
4.1k
potato4d
0
370
potato4d
8
2.3k
potato4d
8
1.8k
potato4d
38
16k
potato4d
5
2.1k
potato4d
11
2.6k
potato4d
1
1.5k
Other Decks in Technology
See All in Technology
shotakashihara
1
1.3k
kappa4
4
2k
ymas0315
0
130
ama_ch
0
3.3k
minamizaki
0
530
greymd
0
600
layerx
1
740
osonoi
0
160
yasuakiomokawa
0
300
clustervr
0
180
cmwatanabeseigo
0
320
toshinoritakai
1
190
Featured
See All Featured
jmmastey
8
530
sugarenia
233
830k
maggiecrowley
8
400
chriscoyier
780
240k
imathis
478
150k
jlugia
216
16k
holman
288
130k
dougneiner
55
5.4k
smashingmag
283
47k
yeseniaperezcruz
302
31k
sstephenson
144
12k
addyosmani
494
110k
Transcript
͋ΒΏΔਓͷͨΊͷ ϑϩϯτΤϯυ FRONTEND CONFERENCE 2017 TAKUMA HANATANI
Ֆ୩ຏ • @potato4d • 18 years old • Developer at
pixiv inc. • JavaScript, Production development * ԍ
jQuery → Vue.js SCOUTER at SCOUTER inc.( https://service.scouter.co.jp )
Coffee + Backbone → Vue.js BOOTH at pixiv inc.( https://booth.pm
)
Vue.js SPA GNEX ltd. ( https://globalnet-ex.com )
JavaScriptࠓͳ͓ɺ ʮ୭ʹͰқ͍͠ݴޠʯͰ͋Δ͔ʁ Q.
No
ʮϑϩϯτΤϯυʯ ݱʹ͓͍ͯઐ৬ͱͳͬͨ
͍ͭʹReact͕jQueryͷγΣΞΛൈ͍ͨ npm trendsʹͯ؍ଌՄೳͳϞμϯڥʹݶΔ( http://www.npmtrends.com/jquery-vs-react )
αʔόʔαΠυͷʮ͓·͚ʯͰͳ͘ͳͬͨ Browser Server Browser Server
ઐ༻ͷઃܭύλʔϯ͕ੜ·Εͨ ը૾ɿ10Ͱ࣮͢ΔFlux http://azu.github.io/slide/react-meetup/flux.html
ʮաظʯΛӽ͑ΔͨΊͷπʔϧ૿͑ଓ͚Δ How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-
❝ ❞ ʮͳ͊ɻ͏͜ΕͰऴΘΓͩͱࢥ͏Μͩɻ࣮ࡍͷ ͱ͜Ζ͏ेͩɻwebेͩ͠ɺJavaScript ·ͬͨͬͯ͘ेɺ͏͍͍ɻʯ ʲ༁ʳ 2016ʹJavaScriptΛֶΜͰͲ͏ײ͔ͨ͡ http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404
ݱߦIEͷαϙʔτΓ8 https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years
ݱߦIEͷαϙʔτΓ8 https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years ʮաظʯ͕ऴΘΔ͜ͱͳ͍
$ npm install -D babel-preset-es2015
$ npm install -D babel-preset-es2016
$ npm install -D babel-preset-es2017
$ npm install -D babel-preset-es20..
$ npm install -D babel-preset-es2023
$ npm install -D babel-preset-es2024
$ npm install -D babel-preset-es2025
2025ʹͳͬͨΒ શ͕ͯٹΘΕΔͷ͔ʁ Q.
No
ະདྷͷ༷Λར༻Ͱ͖ΔڥݶΒΕΔ https://www.infoq.com/jp/news/2017/03/node-76-async-await async/await 2017/02 2017/03 2016/12
Ϟδϡʔϧόϯυϥ͕ແ͘ͳΔ͜ͱͳ͍ ESM/CommonJSͷղܾ ES2015+ͷղܾ ର͕͗͢ΔͨΊ ϒϥβͰͷαϙʔτෆՄ ϑϨʔϜϫʔΫจ๏ͷղܾ bundle.js ϒϥβ࣮ͷน
͔͜͜ΒΘ͔Δ͜ͱ
ݱࡏͷΑ͏ͳελοΫͰͷ։ൃ͘ଓ͘ + + any
͋ΒΏΔਓ͕͜ͷઌੜ͖ΔͨΊʹ
3ͭͷબࢶ
ྲྀߦͷܹ͍͠ք۾ʹ͓͚Δ3ͭͷબࢶ ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ 1 2 3 ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ͍͍ٕͨज़Λڭ͢Δ Stableͳٕज़ҠߦΛਐΊɺ҆ఆͨ͠ڥͰڠۀ͍͢͠ಓΛ୳͢
ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ •ࠓޙͦͷۀքʹશͯϕοτΛଓ͚Δਓ͕ߦ͏ࢪࡦ •ϑϩϯτΤϯυͰݴ͏ͱɺಛʹෆ͕ͪ͠ͳʮࣄྫʯΛࣗΒ͕ ੜΈग़͢͜ͱʹΑͬͯɺεςʔΫϗϧμʔͷૌٻϋʔυϧΛ Լ͛Δ •࣌ʹ௧ΈΛ͏ͷͷɺઐۀͰ͋ΔͳΒɺࠓޙͷੜଘͷͨΊ ͷࢪࡦͱͯͬ͠ͱ༗ޮ 1
ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ͍͍ٕͨज़Λڭ͢Δ •ʮϑϩϯτΤϯυΤϯδχΞʯͱͯ͠ੜ͖Δ߹ʹඞਢͱͳ Δࢪࡦ •ʮΑΓ৽͍͠πʔϧʯͷΈʹڧྗͳิॿπʔϧ͕ఏڙ͞ΕΔੈ քͰ͋ΔͨΊɺશͯΛѲ্ͨ͠Ͱɺ͕ࣗ࠷༏Ε͍ͯΔͱ ࢥ͏πʔϧʹ͍ͭͯͷใΛڞ༗͍ͯ͘͠ 2
Stableͳٕज़ҠߦΛਐΊɺ҆ఆͨ͠ڥͰڠۀ͍͢͠ಓΛ୳͢ •ϑϩϯτΤϯυΛαϒελοΫͱͯ࣋ͭ͠߹ͷ҆ఆࢪࡦ •શମͱͯ͠ΕΛऔΔ͕ɺσϑΝΫτʹ͍ٕۙज़͔ͭࣗʹ ؔͷ͋ΔϨΠϠͷΈΛΥον͢Δͱ͍͏ख๏͋Δ •جຊతʹ৽ͨͳߏΛఏ্ࣔͨ͠Ͱɺϝδϟʔʹͳͬͨޙʹࣗ ͨͪҎ֎͕͍͍͢උΛߦ͏ʹ͋Δ͜ͱΛར༻͢Δ •css-loader/style-loaderͳͲ͕ݦஶʹͦͷΛද͍ͯ͠Δ •ͯ҆ఆखʹೖΔ 3
React୯ମʹ͓͚ΔCSSͷ”ͭΒ͞” // greeting.js const styles = { greeting: { color:
#f00 } }; export default class Greeting extends Component { render() { return (<div className={styles.greeting}>Hello</div>); } };
css-loader͕खʹೖΕͨ҆ఆ // greeting.css :local{ .greeting{ color:#f00; } } // greeting.js
import styles from './greeting.css'; export default class Greeting extends Component { render() { return (<div className={styles.greeting}>Hello</div>); } };
ͯ҆ఆखʹೖΔ
େ͕ٛ͋ΔͳΒΓଓ͚Δ
ফͨ͘͠ͳ͍ͳΒউͪഅʹΔ
ʮΠϚʯͱʮະདྷʯ͕ͭͳ͕Δ FRONTEND CONFERENCE 2017
ʮ10ઓ͑Δج൫ʯ͜͜ʹ͋Δ
Let’s Enjoy!