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

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

Transcript

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

   View Slide

2. Ֆ୩୓ຏ
   • @potato4d
   • 18 years old
   • Developer at pixiv inc.
   • JavaScript, Production development
   *
   ԍ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. No
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. $ npm install -D babel-preset-es2015
    

    View Slide

17. $ npm install -D babel-preset-es2016
    

    View Slide

18. $ npm install -D babel-preset-es2017
    

    View Slide

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

    View Slide

20. $ npm install -D babel-preset-es2023
    

    View Slide

21. $ npm install -D babel-preset-es2024
    

    View Slide

22. $ npm install -D babel-preset-es2025
    

    View Slide

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

    View Slide

24. No
    

    View Slide

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

    View Slide

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

    View Slide

27. ͔͜͜ΒΘ͔Δ͜ͱ
    

    View Slide

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

    View Slide

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

    View Slide

30. 3ͭͷબ୒ࢶ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. React୯ମʹ͓͚ΔCSSͷ”ͭΒ͞”
    // greeting.js
    const styles = {
    greeting: {
    color: #f00
    }
    };
    export default class Greeting extends Component {
    render() {
    return (Hello);
    }
    };
    

    View Slide

36. css-loader͕खʹೖΕͨ҆ఆ
    // greeting.css
    :local{
    .greeting{ color:#f00; }
    }
    // greeting.js
    import styles from './greeting.css';
    export default class Greeting extends Component {
    render() {
    return (Hello);
    }
    };
    

    View Slide

37. ଴ͯ͹҆ఆ͸खʹೖΔ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. Let’s Enjoy!
    

    View Slide