FRONTEND CONFERENCE 2017の基調講演のスライドです。
͋ΒΏΔਓͷͨΊͷϑϩϯτΤϯυFRONTEND CONFERENCE 2017TAKUMA HANATANI
View Slide
Ֆ୩ຏ• @potato4d• 18 years old• Developer at pixiv inc.• JavaScript, Production development*ԍ
jQuery → Vue.jsSCOUTER at SCOUTER inc.( https://service.scouter.co.jp )
Coffee + Backbone → Vue.jsBOOTH at pixiv inc.( https://booth.pm )
Vue.js SPAGNEX ltd. ( https://globalnet-ex.com )
JavaScriptࠓͳ͓ɺʮ୭ʹͰқ͍͠ݴޠʯͰ͋Δ͔ʁQ.
No
ʮϑϩϯτΤϯυʯݱʹ͓͍ͯઐ৬ͱͳͬͨ
͍ͭʹReact͕jQueryͷγΣΞΛൈ͍ͨnpm trendsʹͯ؍ଌՄೳͳϞμϯڥʹݶΔ( http://www.npmtrends.com/jquery-vs-react )
αʔόʔαΠυͷʮ͓·͚ʯͰͳ͘ͳͬͨBrowserServerBrowserServer
ઐ༻ͷઃܭύλʔϯ͕ੜ·Εͨը૾ɿ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ͷαϙʔτΓ8https://support.microsoft.com/ja-jp/lifecycle/search/181658 years
ݱߦIEͷαϙʔτΓ8https://support.microsoft.com/ja-jp/lifecycle/search/181658 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.
ະདྷͷ༷Λར༻Ͱ͖ΔڥݶΒΕΔhttps://www.infoq.com/jp/news/2017/03/node-76-async-awaitasync/await2017/02 2017/032016/12
Ϟδϡʔϧόϯυϥ͕ແ͘ͳΔ͜ͱͳ͍ESM/CommonJSͷղܾES2015+ͷղܾର͕͗͢ΔͨΊϒϥβͰͷαϙʔτෆՄϑϨʔϜϫʔΫจ๏ͷղܾbundle.jsϒϥβ࣮ͷน
͔͜͜ΒΘ͔Δ͜ͱ
ݱࡏͷΑ͏ͳελοΫͰͷ։ൃ͘ଓ͘+ + any
͋ΒΏΔਓ͕͜ͷઌੜ͖ΔͨΊʹ
3ͭͷબࢶ
ྲྀߦͷܹ͍͠ք۾ʹ͓͚Δ3ͭͷબࢶΠϊϕʔλʔͰ͋Γଓ͚ɺෆ͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢123ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ͍͍ٕͨज़Λڭ͢ΔStableͳٕज़ҠߦΛਐΊɺ҆ఆͨ͠ڥͰڠۀ͍͢͠ಓΛ୳͢
ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢•ࠓޙͦͷۀքʹશͯϕοτΛଓ͚Δਓ͕ߦ͏ࢪࡦ•ϑϩϯτΤϯυͰݴ͏ͱɺಛʹෆ͕ͪ͠ͳʮࣄྫʯΛࣗΒ͕ੜΈग़͢͜ͱʹΑͬͯɺεςʔΫϗϧμʔͷૌٻϋʔυϧΛԼ͛Δ•࣌ʹ௧ΈΛ͏ͷͷɺઐۀͰ͋ΔͳΒɺࠓޙͷੜଘͷͨΊͷࢪࡦͱͯͬ͠ͱ༗ޮ1
ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ͍͍ٕͨज़Λڭ͢Δ•ʮϑϩϯτΤϯυΤϯδχΞʯͱͯ͠ੜ͖Δ߹ʹඞਢͱͳΔࢪࡦ•ʮΑΓ৽͍͠πʔϧʯͷΈʹڧྗͳิॿπʔϧ͕ఏڙ͞ΕΔੈքͰ͋ΔͨΊɺશͯΛѲ্ͨ͠Ͱɺ͕ࣗ࠷༏Ε͍ͯΔͱࢥ͏πʔϧʹ͍ͭͯͷใΛڞ༗͍ͯ͘͠2
Stableͳٕज़ҠߦΛਐΊɺ҆ఆͨ͠ڥͰڠۀ͍͢͠ಓΛ୳͢•ϑϩϯτΤϯυΛαϒελοΫͱͯ࣋ͭ͠߹ͷ҆ఆࢪࡦ•શମͱͯ͠ΕΛऔΔ͕ɺσϑΝΫτʹ͍ٕۙज़͔ͭࣗʹؔͷ͋ΔϨΠϠͷΈΛΥον͢Δͱ͍͏ख๏͋Δ•جຊతʹ৽ͨͳߏΛఏ্ࣔͨ͠ͰɺϝδϟʔʹͳͬͨޙʹࣗͨͪҎ֎͕͍͍͢උΛߦ͏ʹ͋Δ͜ͱΛར༻͢Δ•css-loader/style-loaderͳͲ͕ݦஶʹͦͷΛද͍ͯ͠Δ•ͯ҆ఆखʹೖΔ3
React୯ମʹ͓͚ΔCSSͷ”ͭΒ͞”// greeting.jsconst styles = {greeting: {color: #f00}};export default class Greeting extends Component {render() {return (Hello);}};
css-loader͕खʹೖΕͨ҆ఆ// greeting.css:local{.greeting{ color:#f00; }}// greeting.jsimport styles from './greeting.css';export default class Greeting extends Component {render() {return (Hello);}};
ͯ҆ఆखʹೖΔ
େ͕ٛ͋ΔͳΒΓଓ͚Δ
ফͨ͘͠ͳ͍ͳΒউͪഅʹΔ
ʮΠϚʯͱʮະདྷʯ͕ͭͳ͕ΔFRONTEND CONFERENCE 2017
ʮ10ઓ͑Δج൫ʯ͜͜ʹ͋Δ
Let’s Enjoy!