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

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!