あらゆる人のためのフロントエンド #frontkansai

FRONTEND CONFERENCE 2017の基調講演のスライドです。

Transcript

1. ͋ΒΏΔਓͷͨΊͷ ϑϩϯτΤϯυ FRONTEND CONFERENCE 2017 TAKUMA HANATANI
2. Ֆ୩୓ຏ • @potato4d • 18 years old • Developer at pixiv inc. • JavaScript, Production development *
   ԍ
3. jQuery → Vue.js SCOUTER at SCOUTER inc.( https://service.scouter.co.jp )
4. Coffee + Backbone → Vue.js BOOTH at pixiv inc.( https://booth.pm )
5. Vue.js SPA GNEX ltd. ( https://globalnet-ex.com )
6. JavaScript͸ࠓ΋ͳ͓ɺ ʮ୭ʹͰ΋қ͍͠ݴޠʯͰ͋Δ͔ʁ Q.
7. No
8. ʮϑϩϯτΤϯυʯ͸ ݱ୅ʹ͓͍ͯ͸ઐ໳৬ͱͳͬͨ
9. ͍ͭʹReact͕jQueryͷγΣΞΛൈ͍ͨ npm trendsʹͯ؍ଌՄೳͳϞμϯ؀ڥʹݶΔ( http://www.npmtrends.com/jquery-vs-react )
10. αʔόʔαΠυͷʮ͓·͚ʯͰ͸ͳ͘ͳͬͨ Browser Server Browser Server
11. ઐ༻ͷઃܭύλʔϯ͕ੜ·Εͨ ը૾ɿ10෼Ͱ࣮૷͢ΔFlux http://azu.github.io/slide/react-meetup/flux.html
12. ʮա౉ظʯΛӽ͑ΔͨΊͷπʔϧ͸૿͑ଓ͚Δ How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-
13. ❝ ❞ ʮͳ͊ɻ΋͏͜ΕͰऴΘΓͩͱࢥ͏Μͩɻ࣮ࡍͷ ͱ͜Ζ΋͏े෼ͩɻweb΋े෼ͩ͠ɺJavaScript ΋·ͬͨ͘΋ͬͯे෼ɺ΋͏͍͍ɻʯ ʲ຋༁ʳ 2016೥ʹJavaScriptΛֶΜͰͲ͏ײ͔ͨ͡ http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404
14. ݱߦIEͷαϙʔτ͸࢒Γ8೥ https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years
15. ݱߦIEͷαϙʔτ͸࢒Γ8೥ https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years ౰෼ʮա౉ظʯ͕ऴΘΔ͜ͱ͸ͳ͍
16. $ npm install -D babel-preset-es2015
17. $ npm install -D babel-preset-es2016
18. $ npm install -D babel-preset-es2017
19. $ npm install -D babel-preset-es20..
20. $ npm install -D babel-preset-es2023
21. $ npm install -D babel-preset-es2024
22. $ npm install -D babel-preset-es2025
23. 2025೥ʹͳͬͨΒ શ͕ͯٹΘΕΔͷ͔ʁ Q.
24. No
25. ະདྷͷ࢓༷Λར༻Ͱ͖Δ؀ڥ͸ݶΒΕΔ https://www.infoq.com/jp/news/2017/03/node-76-async-await async/await 2017/02 2017/03 2016/12
26. Ϟδϡʔϧόϯυϥ͕ແ͘ͳΔ͜ͱ͸ͳ͍ ESM/CommonJSͷղܾ ES2015+ͷղܾ ର৅͕޿͗͢ΔͨΊ ϒϥ΢βͰͷαϙʔτ͸ෆՄ ϑϨʔϜϫʔΫจ๏ͷղܾ bundle.js ϒϥ΢β࣮૷ͷน
27. ͔͜͜ΒΘ͔Δ͜ͱ
28. ݱࡏͷΑ͏ͳελοΫͰͷ։ൃ͸௕͘ଓ͘ + + any
29. ͋ΒΏΔਓ͕͜ͷઌੜ͖࢒ΔͨΊʹ
30. 3ͭͷબ୒ࢶ
31. ྲྀߦͷܹ͍͠ք۾ʹ͓͚Δ3ͭͷબ୒ࢶ ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ଍͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ 1 2 3 ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ࢖͍͍ٕͨज़Λ෍ڭ͢Δ Stableͳٕज़΁ҠߦΛਐΊɺ҆ఆͨ͠؀ڥͰڠۀ͠΍͍͢ಓΛ୳͢
32. ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ଍͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ •ࠓޙ΋ͦͷۀքʹશͯϕοτΛଓ͚Δਓ͕ߦ͏ࢪࡦ •ϑϩϯτΤϯυͰݴ͏ͱɺಛʹෆ଍͕ͪ͠ͳʮࣄྫʯΛࣗΒ͕ ੜΈग़͢͜ͱʹΑͬͯɺεςʔΫϗϧμʔ΁ͷૌٻϋʔυϧΛ Լ͛Δ •࣌ʹ௧ΈΛ൐͏΋ͷͷɺઐۀͰ͋ΔͳΒ͹ɺࠓޙͷੜଘͷͨΊ ͷࢪࡦͱͯ͠͸΋ͬͱ΋༗ޮ 1
33. ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ࢖͍͍ٕͨज़Λ෍ڭ͢Δ •ʮϑϩϯτΤϯυΤϯδχΞʯͱͯ͠ੜ͖Δ৔߹ʹ͸ඞਢͱͳ Δࢪࡦ •ʮΑΓ৽͍͠πʔϧʯͷΈʹڧྗͳิॿπʔϧ͕ఏڙ͞ΕΔੈ քͰ͋ΔͨΊɺશͯΛ೺Ѳ্ͨ͠Ͱɺࣗ෼͕࠷΋༏Ε͍ͯΔͱ ࢥ͏πʔϧʹ͍ͭͯͷ৘ใΛڞ༗͍ͯ͘͠ 2
34. Stableͳٕज़΁ҠߦΛਐΊɺ҆ఆͨ͠؀ڥͰڠۀ͠΍͍͢ಓΛ୳͢ •ϑϩϯτΤϯυΛαϒελοΫͱͯ࣋ͭ͠৔߹ͷ҆ఆࢪࡦ •શମͱͯ͠͸஗ΕΛऔΔ͕ɺσϑΝΫτʹ͍ٕۙज़͔ͭࣗ෼ʹ ؔ܎ͷ͋ΔϨΠϠͷΈΛ΢Υον͢Δͱ͍͏ख๏͸͋Δ •جຊతʹ৽ͨͳߏ੒Λఏ্ࣔͨ͠Ͱɺϝδϟʔʹͳͬͨޙʹࣗ ෼ͨͪҎ֎͕࢖͍΍͍͢੔උΛߦ͏܏޲ʹ͋Δ͜ͱΛར༻͢Δ •css-loader/style-loaderͳͲ͕ݦஶʹͦͷ܏޲Λද͍ͯ͠Δ •଴ͯ͹҆ఆ͸खʹೖΔ 3
35. React୯ମʹ͓͚ΔCSSͷ”ͭΒ͞” // greeting.js const styles = { greeting: { color: #f00 } }; export default class Greeting extends Component { render() { return (<div className={styles.greeting}>Hello</div>); } };
36. 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>); } };
37. ଴ͯ͹҆ఆ͸खʹೖΔ
38. େ͕ٛ͋ΔͳΒ૸Γଓ͚Δ
39. ফ໣ͨ͘͠ͳ͍ͳΒউͪഅʹ৐Δ
40. ʮΠϚʯͱʮະདྷʯ͕ͭͳ͕Δ৔ FRONTEND CONFERENCE 2017
41. ʮ10೥ઓ͑Δج൫ʯ͸͜͜ʹ͋Δ
42. Let’s Enjoy!