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

Transcript

1. 1.

   ͋ΒΏΔਓͷͨΊͷ ϑϩϯτΤϯυ FRONTEND CONFERENCE 2017 TAKUMA HANATANI

2. 2.

   Ֆ୩୓ຏ • @potato4d • 18 years old • Developer at

   pixiv inc. • JavaScript, Production development *
   ԍ
3. 3.

   jQuery → Vue.js SCOUTER at SCOUTER inc.( https://service.scouter.co.jp )

4. 4.

   Coffee + Backbone → Vue.js BOOTH at pixiv inc.( https://booth.pm

   )
5. 5.

   Vue.js SPA GNEX ltd. ( https://globalnet-ex.com )

6. 6.

   JavaScript͸ࠓ΋ͳ͓ɺ ʮ୭ʹͰ΋қ͍͠ݴޠʯͰ͋Δ͔ʁ Q.

7. 7.

   No

8. 8.

   ʮϑϩϯτΤϯυʯ͸ ݱ୅ʹ͓͍ͯ͸ઐ໳৬ͱͳͬͨ

9. 9.

   ͍ͭʹReact͕jQueryͷγΣΞΛൈ͍ͨ npm trendsʹͯ؍ଌՄೳͳϞμϯ؀ڥʹݶΔ( http://www.npmtrends.com/jquery-vs-react )

10. 10.

    αʔόʔαΠυͷʮ͓·͚ʯͰ͸ͳ͘ͳͬͨ Browser Server Browser Server

11. 11.

    ઐ༻ͷઃܭύλʔϯ͕ੜ·Εͨ ը૾ɿ10෼Ͱ࣮૷͢ΔFlux http://azu.github.io/slide/react-meetup/flux.html

12. 12.

    ʮա౉ظʯΛӽ͑ΔͨΊͷπʔϧ͸૿͑ଓ͚Δ How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-

13. 13.

    ❝ ❞ ʮͳ͊ɻ΋͏͜ΕͰऴΘΓͩͱࢥ͏Μͩɻ࣮ࡍͷ ͱ͜Ζ΋͏े෼ͩɻweb΋े෼ͩ͠ɺJavaScript ΋·ͬͨ͘΋ͬͯे෼ɺ΋͏͍͍ɻʯ ʲ຋༁ʳ 2016೥ʹJavaScriptΛֶΜͰͲ͏ײ͔ͨ͡ http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404

14. 14.

    ݱߦIEͷαϙʔτ͸࢒Γ8೥ https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years

15. 15.

    ݱߦIEͷαϙʔτ͸࢒Γ8೥ https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years ౰෼ʮա౉ظʯ͕ऴΘΔ͜ͱ͸ͳ͍

16. 16.

    $ npm install -D babel-preset-es2015

17. 17.

    $ npm install -D babel-preset-es2016

18. 18.

    $ npm install -D babel-preset-es2017

19. 19.

    $ npm install -D babel-preset-es20..

20. 20.

    $ npm install -D babel-preset-es2023

21. 21.

    $ npm install -D babel-preset-es2024

22. 22.

    $ npm install -D babel-preset-es2025

23. 23.

    2025೥ʹͳͬͨΒ શ͕ͯٹΘΕΔͷ͔ʁ Q.

24. 24.

    No

25. 25.

    ະདྷͷ࢓༷Λར༻Ͱ͖Δ؀ڥ͸ݶΒΕΔ https://www.infoq.com/jp/news/2017/03/node-76-async-await async/await 2017/02 2017/03 2016/12

26. 26.

    Ϟδϡʔϧόϯυϥ͕ແ͘ͳΔ͜ͱ͸ͳ͍ ESM/CommonJSͷղܾ ES2015+ͷղܾ ର৅͕޿͗͢ΔͨΊ ϒϥ΢βͰͷαϙʔτ͸ෆՄ ϑϨʔϜϫʔΫจ๏ͷղܾ bundle.js ϒϥ΢β࣮૷ͷน

27. 27.

    ͔͜͜ΒΘ͔Δ͜ͱ

28. 28.

    ݱࡏͷΑ͏ͳελοΫͰͷ։ൃ͸௕͘ଓ͘ + + any

29. 29.

    ͋ΒΏΔਓ͕͜ͷઌੜ͖࢒ΔͨΊʹ

30. 30.

    3ͭͷબ୒ࢶ

31. 31.

    ྲྀߦͷܹ͍͠ք۾ʹ͓͚Δ3ͭͷબ୒ࢶ ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ଍͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ 1 2 3 ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ࢖͍͍ٕͨज़Λ෍ڭ͢Δ Stableͳٕज़΁ҠߦΛਐΊɺ҆ఆͨ͠؀ڥͰڠۀ͠΍͍͢ಓΛ୳͢

32. 32.

    ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ଍͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ •ࠓޙ΋ͦͷۀքʹશͯϕοτΛଓ͚Δਓ͕ߦ͏ࢪࡦ •ϑϩϯτΤϯυͰݴ͏ͱɺಛʹෆ଍͕ͪ͠ͳʮࣄྫʯΛࣗΒ͕ ੜΈग़͢͜ͱʹΑͬͯɺεςʔΫϗϧμʔ΁ͷૌٻϋʔυϧΛ Լ͛Δ •࣌ʹ௧ΈΛ൐͏΋ͷͷɺઐۀͰ͋ΔͳΒ͹ɺࠓޙͷੜଘͷͨΊ ͷࢪࡦͱͯ͠͸΋ͬͱ΋༗ޮ 1

33. 33.

    ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ࢖͍͍ٕͨज़Λ෍ڭ͢Δ •ʮϑϩϯτΤϯυΤϯδχΞʯͱͯ͠ੜ͖Δ৔߹ʹ͸ඞਢͱͳ Δࢪࡦ •ʮΑΓ৽͍͠πʔϧʯͷΈʹڧྗͳิॿπʔϧ͕ఏڙ͞ΕΔੈ քͰ͋ΔͨΊɺશͯΛ೺Ѳ্ͨ͠Ͱɺࣗ෼͕࠷΋༏Ε͍ͯΔͱ ࢥ͏πʔϧʹ͍ͭͯͷ৘ใΛڞ༗͍ͯ͘͠ 2

34. 34.

    Stableͳٕज़΁ҠߦΛਐΊɺ҆ఆͨ͠؀ڥͰڠۀ͠΍͍͢ಓΛ୳͢ •ϑϩϯτΤϯυΛαϒελοΫͱͯ࣋ͭ͠৔߹ͷ҆ఆࢪࡦ •શମͱͯ͠͸஗ΕΛऔΔ͕ɺσϑΝΫτʹ͍ٕۙज़͔ͭࣗ෼ʹ ؔ܎ͷ͋ΔϨΠϠͷΈΛ΢Υον͢Δͱ͍͏ख๏͸͋Δ •جຊతʹ৽ͨͳߏ੒Λఏ্ࣔͨ͠Ͱɺϝδϟʔʹͳͬͨޙʹࣗ ෼ͨͪҎ֎͕࢖͍΍͍͢੔උΛߦ͏܏޲ʹ͋Δ͜ͱΛར༻͢Δ •css-loader/style-loaderͳͲ͕ݦஶʹͦͷ܏޲Λද͍ͯ͠Δ •଴ͯ͹҆ఆ͸खʹೖΔ 3

35. 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. 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. 37.

    ଴ͯ͹҆ఆ͸खʹೖΔ

38. 38.

    େ͕ٛ͋ΔͳΒ૸Γଓ͚Δ

39. 39.

    ফ໣ͨ͘͠ͳ͍ͳΒউͪഅʹ৐Δ

40. 40.

    ʮΠϚʯͱʮະདྷʯ͕ͭͳ͕Δ৔ FRONTEND CONFERENCE 2017

41. 41.

    ʮ10೥ઓ͑Δج൫ʯ͸͜͜ʹ͋Δ

42. 42.

    Let’s Enjoy!