Universal JavaScript

Roppongi.rb #3 Rails x Frontend-Tech

Transcript

1. Universal JavaScript - ࠓޙ10
   ೥Λੜ͖ൈͨ͘Ίʹ
   @mizchi
   Roppongi.rb #3 Rails x Frontend-Tech
   

   View Slide

2. About Me
   • ϑϩϯτΤϯυ/SPA/Node.js ΤϯδχΞ
   • ήʔϜܥ => ڭҭܥ => Increments(Qiita)
   • 4݄͔ΒϑϦʔϥϯεͰ Redux ΍ Express middleware
   • ࠷ۙͷڵຯ: ReactNative / AMP / ےτϨ
   

   View Slide

3. Podcast ͸͡Ί·ͨ͠
   https://genba.fm/
   • #1 Awesome Vue
   • #0 React vs Angular - ͋Δ͍͸ Functional
   JavaScript
   

   View Slide

4. ͓඼ॻ͖
   • Sprockets ͷࡴ͠ํ
   • ͓લͷ Webpack ͸ࢮ͵
   • ͜ͷઌ10೥ੜ͖࢒ΔͨΊʹ
   

   View Slide

5. !!!!CAUTION!!!!
   !!!!!!!!!!!!
   ຊࢿྉͷະདྷ༧ଌ͸๻ࣗ਎ͷצͰ͋Γ
   ੹೚ΛऔΕΔ΋ͷͰ͸͋Γ·ͤΜ
   !!!!!!!!!!!!
   

   View Slide

6. ୈҰ෦: Sprockets ͷ
   ࡴ͠ํ
   

   View Slide

7. ࠓ೔ͷจ຺
   toshimaru_e
   ʮQiitaͷSprockesΛࡴͨ࣌͠ͷ࿩Λ͓ئ͍Ͱ͖·͔͢ʯ
   mizchi
   ʮ͸͍ʯ
   

   View Slide

8. SprocketsΛࡴͨ͠هࣄ
   • Qiita - app/assets/javascriptsҎԼͷJSΛશͯ
   commonjsͷrequireʹॻ͖׵͑Δ
   • Qiita - decafͰcoffeeͷίʔυΛES.next ʹॻ͖׵͑Δ
   ஫ҙ: 2೥͙Β͍લ
   

   View Slide

9. લఏ: ͳͥ Sprockets ͸ࢮ͵΂͖͔
   • Ϟδϡʔϧղܾʹ͸ ES Modules ͱ͍͏ඪ४ ͕͋Δ
   • JSͰϑΝΠϧείʔϓΛ࣋ͯͣ ࢀর͕άϩʔόϧ౉͠ ʹͳΔ
   • ධՁॱͷ੍ޚ͕೉͍͠
   • RailsଆʹӅṭ͞Εͯͯ node πʔϧνΣΠϯΛ࢖͍ʹ͍͘
   • ஗͍ (ExecJS)
   

   View Slide

10. (2015೥౰࣌ͷ) Sprockets ͷࡴ͠ํ
    • browserify-rails ͷಋೖ, ޙʹ webpack
    • εΫϦϓτॻ͍ͯ sprockets/require Λ commonjs ʹ
    • άϩʔόϧม਺ͷࢀরΛ module.exports = ... ʹ୅ೖ
    • ࢀরղܾΛάϩʔόϧม਺͔Β require('...') ʹ
    

    View Slide

11. before
    // define
    window.App.View.render = function () {/* render */}
    // use
    App.View.render()
    

    View Slide

12. after: commonjs
    // define on render.js
    module.exports = () => {/* render */}
    // use
    const render = require('./render')
    render()
    

    View Slide

13. ౰࣌ͷ੍໿
    • ES Modules Ͱ͸ͳ͘ commonjs ͳͷ͸ɺ coffee ͕΄ͱ
    ΜͲͩͬͨͨΊ
    • ࠓͳΒ ES Modules
    

    View Slide

14. େࣄͳ͜ͱ: ߟ͑ํͷస׵
    • ෼ׂ୯ҐΛ ࣮ߦίʔυ ͔Β ؔ਺Ϟδϡʔϧ ΁
    • Ϟδϡʔϧఆٛͱͦͷ࣮ߦΛڧ۠͘ผ͢Δ
    • େࣄͳͷ͸ɺ ࣮ߦ࣌ͷ෭࡞༻ͷநग़ ͱɺ༧ଌ͠΍͢͞
    

    View Slide

15. ʮ࣮ߦίʔυʯ͔Βʮؔ਺Ϟδϡʔϧʯ΁
    // Bad
    document.title = 'foo'
    // Good
    // setTitle.js
    export default function setTitle(title) {
    document.title = title
    }
    // runner.js
    setTitle('foo')
    

    View Slide

16. ͍͍͍ͨ͜ͱ
    • ଞͷݴޠ/؀ڥͰ΋ʮධՁɺଈɺ࣮ߦɺ෭࡞༻์Γ౤͛ʯΈ͍ͨ
    ͳίʔυ͸͋·Γॻ͔ͳ͍͸ͣ
    • ౰ͨΓલͷ͜ͱΛ౰ͨΓલʹ ΍Γ·͠ΐ͏
    

    View Slide

17. ୈೋ෦: ͓લͷ Webpack ͸ࢮ͵
    

    View Slide

18. Webpack ͷ໾ׂ
    • ES Modules ͷόϯυϧ
    • ֦ுࢠ͝ͱͷ transform
    • ։ൃ࣌ͷ Hot Reload
    • ࢀরղܾͷ Alias
    • etc...
    

    View Slide

19. ໰୊ҙࣝ: ػೳ͕͋Γׂ͗ͯ͢Ε૭
    • JSόϯυϥͷൣᙝΛӽ͍͑ͯͯ node.js Ͱ࠶ݱͰ͖ͳ͍
    • ઃఆϑΝΠϧ͕Ͱ͔͍ & Α͘Θ͔ΒΜ
    • css-modules ಋೖ͕ࠇຐज़Ͱਏ͍
    • ίϐϖͰಈ͍ͨޙɺಈ͔ͳ͘ͳͬͨͱ͖ͷௐ͕ࠪେม
    

    View Slide

20. Universal JavaScript
    • Universal: ECMAScript ͷ Spec Λຬͨͤ͹ɺͲΜͳ؀
    ڥͰ΋ಈ͘JS
    • Isomorphic : ڱٛͷUniversalɻBrowser/Node͕ର৅ɻ
    => Webpack ͸ Universal ੑΛഁյ͢Δ(͠΍͍͢)͔ΒϞδ
    ϡϥϦςΟ͕௿Լ͢ΔΑͱ͍͏࿩
    

    View Slide

21. Babel ͸ Universal ͔ʁ
    • DOM Λ৮Βͣɺbabel-preset-es201* Λ࢖ͬͯΔ͏ͪ͸
    Yes
    • ͨͩ͠ ES Modules ͷύεղܾ͸ commonjs + α
    • lib/index ͱ͔ node_modules ͱ͔
    • stage0~3, jsx, flow ͸ඪ४֎
    

    View Slide

22. Native ES Modules ͷ଍Ի
    

    View Slide

23. Native ES Modules
    • Safari 10.1
    • Chrome M60(Canary) ϑϥάͰ
    • Edge ϑϥάͰ
    

    View Slide

24. ES Moduls in Browser
    <br/>import {addTextToBody} from './utils.js';<br/>addTextToBody('Modules are pretty cool.');<br/>
    https://jakearchibald.com/2017/es-modules-in-
    browsers/
    

    View Slide

25. ES Modules ͕͋ͬͨΒ࢖͑Δ͔ʁ
    • ࢓༷తʹ͸YES
    • ͨͩ͠HTTP/2Ͱͳ͍ͱύϑΥʔϚϯε͕େ෯ʹྼԽ͢ΔՄೳੑ
    • ES Modules͸HTTP/2Ͱ෦෼ߋ৽ͷເΛݟΔ͔ʁ
    • Cache aware server push - kazuho
    

    View Slide

26. ES Modules: ࠓޙͷ༧૝
    • དྷ೥ʹ͸࣮૷͕ग़ἧ͏
    • ࠷ॳ͸ Fastly ͷΑ͏ͳ CDN Ͱղܾ͞ΕΔͷͰ͸
    • কདྷతʹ͸ nginx/h2o ͷϞδϡʔϧԽ͞Εͯ࢖͑ΔΑ͏ʹͳ
    ͬͯΔ͸ͣ
    • ES Modules ͷ੩తղੳεςοϓ͸ඞཁ
    ϓϩμΫγϣϯͰ࢖͑Δͷ͸ɺ͓ͦΒ͘ 2~3೥ޙ
    

    View Slide

27. Webpack ͷ໰୊ͱࢮ͵ཧ༝: ·ͱΊ
    • ศརͳׂΕ૭
    • Universal ੑΛഁյ͠ίʔυͷϞδϡϥϦςΟ͕௿Լ
    • ωΠςΟϒͷ ES Modules Ͱ૬ରతʹॏཁੑ͕௿Լ
    δϯΫεతʹ͸ɺDHH͕બΜͩϑϩϯτͷπʔϧ͸ࢮ͵
    

    View Slide

28. ଈࢮ͠ͳ͍ Webpack ͷ࢖͍ํ
    • ES Modules ΁ͷܨ͗ͱׂΓ੾ͬͯ࢖͏
    • ಠࣗͳtransformΛՄೳͳݶΓ babelଆ΁ಀ͕͢
    • css-modules => styled-jsx
    • resolve.alias => babel-plugin-module-resolver
    

    View Slide

29. ୈࡾ෦: ͜ͷઌ10೥ੜ
    ͖࢒ΔͨΊ
    

    View Slide

30. JavaScriptք
    Ϣʔβʔ਺: ΊͬͪΌଟ͍
    ϢʔβʔͷόοΫΤϯυ: ଟ༷
    JSͷฏۉ࿅౓: ௿͍ (ยखؒ໰୊)
    

    View Slide

31. ίϯηϯαεͱΔͷϚδͰແཧ
    

    View Slide

32. Easy > Simple Ͱ࠷ѱ
    

    View Slide

33. ϥΠϒϥϦઃܭऀͷؾ࣋ͪ
    • Easy ͰϢʔβʔΛὃͯ͠ɺSimple ΁
    • npmքͰ͸ɺྲྀߦͬͨػೳ͸୯ػೳʹϒϨʔΫμ΢ϯ͞ΕΔ
    

    View Slide

34. Webpacker ͷ scaffold ͕Ϡόͦ͏
    • ίϯηϯαεऔΕͳ͍؀ڥͰ, ୭΋͕ೲಘͰ͖ΔϘΠϥʔϓϨ
    ʔτΛߏங͢Δͷ͸ແཧ
    • ԼճΓΛࢧ͑Δͷʹ͸Αͦ͞͏͕ͩɺׂΕ૭…
    

    View Slide

35. ຊ࣭͚ͩݟ͍͍ͯͨ…
    • Agnostic ʹ Universal ͰϏδωεϩδοΫΛॻ͘
    • Domain => UI State => View => Event Handler ...
    

    View Slide

36. ϑϨʔϜϫʔΫͷ໾ׂ
    • ͳΜ͔Ͱ͔͍JSONΛ࡞Δ
    • ͳΜ͔Ͱ͔͍JSONΛViewʹ഑Δ
    • ͳΜ͔Ͱ͔͍JSONΛ࡞Δ΍ͭʹΠϕϯτΛૹΔ
    

    View Slide

37. ͦ΋ͦ΋ແݶͷύϑΥʔϚϯε͕͋Ε͹…
    const mainloop = () => {
    requestAnimationFrame(mainloop)
    document.body.innerHTML = render(getState())
    }
    mainloop()
    

    View Slide

38. UIϥΠϒϥϦ͸ࢮ͵ͷ͔
    • Ϩϯμϥͷ຤୺͸ WebComponents ΁
    • ঢ়ଶͷ؅ཧ૚͸࢒Δ
    

    View Slide

39. ϑϩϯτͷྑ͍ઃܭͱ͸
    • x ίʔυ͕௕೥෗Βͳ͍
    • ○ ϞδϡʔϧΛ୅ँͰ͖Δ
    GUIͷਏ͞͸ɺઃܭ΍࢓༷͕ίʔυʹ࢒Γʹ͍͘ͱ͜Ζ
    ໨ࢦ͢΂͖͸ɺݎ࿚ͳઃܭΑΓɺࣜ೥ભٶͰ͸ʁͱ͍͏ఏҊ
    

    View Slide

40. ͓ΘΓ
    

    View Slide