$30 off During Our Annual Pro Sale. View Details »

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

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

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

Potato4d(Hanatani Takuma)

March 18, 2017
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Technology

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