Pro Yearly is on sale from $80 to $50! »

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

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

March 18, 2017
Tweet

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!