Universal JavaScript

Transcript

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

   Frontend-Tech

2. About Me • ϑϩϯτΤϯυ/SPA/Node.js ΤϯδχΞ • ήʔϜܥ => ڭҭܥ =>

   Increments(Qiita) • 4݄͔ΒϑϦʔϥϯεͰ Redux ΍ Express middleware • ࠷ۙͷڵຯ: ReactNative / AMP / ےτϨ

3. Podcast ͸͡Ί·ͨ͠ https://genba.fm/ • #1 Awesome Vue • #0 React

   vs Angular - ͋Δ͍͸ Functional JavaScript

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

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

6. ୈҰ෦: Sprockets ͷ ࡴ͠ํ

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

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

   ʹॻ͖׵͑Δ ஫ҙ: 2೥͙Β͍લ

9. લఏ: ͳͥ Sprockets ͸ࢮ͵΂͖͔ • Ϟδϡʔϧղܾʹ͸ ES Modules ͱ͍͏ඪ४ ͕͋Δ

   • JSͰϑΝΠϧείʔϓΛ࣋ͯͣ ࢀর͕άϩʔόϧ౉͠ ʹͳΔ • ධՁॱͷ੍ޚ͕೉͍͠ • RailsଆʹӅṭ͞Εͯͯ node πʔϧνΣΠϯΛ࢖͍ʹ͍͘ • ஗͍ (ExecJS)

10. (2015೥౰࣌ͷ) Sprockets ͷࡴ͠ํ • browserify-rails ͷಋೖ, ޙʹ webpack • εΫϦϓτॻ͍ͯ

    sprockets/require Λ commonjs ʹ • άϩʔόϧม਺ͷࢀরΛ module.exports = ... ʹ୅ೖ • ࢀরղܾΛάϩʔόϧม਺͔Β require('...') ʹ

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

    // use App.View.render()

12. after: commonjs // define on render.js module.exports = () =>

    {/* render */} // use const render = require('./render') render()

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

    • ࠓͳΒ ES Modules

14. େࣄͳ͜ͱ: ߟ͑ํͷస׵ • ෼ׂ୯ҐΛ ࣮ߦίʔυ ͔Β ؔ਺Ϟδϡʔϧ ΁ • Ϟδϡʔϧఆٛͱͦͷ࣮ߦΛڧ۠͘ผ͢Δ

    • େࣄͳͷ͸ɺ ࣮ߦ࣌ͷ෭࡞༻ͷநग़ ͱɺ༧ଌ͠΍͢͞

15. ʮ࣮ߦίʔυʯ͔Βʮؔ਺Ϟδϡʔϧʯ΁ // Bad document.title = 'foo' // Good // setTitle.js

    export default function setTitle(title) { document.title = title } // runner.js setTitle('foo')

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

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

18. Webpack ͷ໾ׂ • ES Modules ͷόϯυϧ • ֦ுࢠ͝ͱͷ transform •

    ։ൃ࣌ͷ Hot Reload • ࢀরղܾͷ Alias • etc...

19. ໰୊ҙࣝ: ػೳ͕͋Γׂ͗ͯ͢Ε૭ • JSόϯυϥͷൣᙝΛӽ͍͑ͯͯ node.js Ͱ࠶ݱͰ͖ͳ͍ • ઃఆϑΝΠϧ͕Ͱ͔͍ & Α͘Θ͔ΒΜ

    • css-modules ಋೖ͕ࠇຐज़Ͱਏ͍ • ίϐϖͰಈ͍ͨޙɺಈ͔ͳ͘ͳͬͨͱ͖ͷௐ͕ࠪେม

20. Universal JavaScript • Universal: ECMAScript ͷ Spec Λຬͨͤ͹ɺͲΜͳ؀ ڥͰ΋ಈ͘JS •

    Isomorphic : ڱٛͷUniversalɻBrowser/Node͕ର৅ɻ => Webpack ͸ Universal ੑΛഁյ͢Δ(͠΍͍͢)͔ΒϞδ ϡϥϦςΟ͕௿Լ͢ΔΑͱ͍͏࿩

21. Babel ͸ Universal ͔ʁ • DOM Λ৮Βͣɺbabel-preset-es201* Λ࢖ͬͯΔ͏ͪ͸ Yes •

    ͨͩ͠ ES Modules ͷύεղܾ͸ commonjs + α • lib/index ͱ͔ node_modules ͱ͔ • stage0~3, jsx, flow ͸ඪ४֎

22. Native ES Modules ͷ଍Ի

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

    • Edge ϑϥάͰ

24. ES Moduls in Browser <script type="module"> import {addTextToBody} from './utils.js';

    addTextToBody('Modules are pretty cool.'); </script> https://jakearchibald.com/2017/es-modules-in- browsers/

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

    • Cache aware server push - kazuho

26. ES Modules: ࠓޙͷ༧૝ • དྷ೥ʹ͸࣮૷͕ग़ἧ͏ • ࠷ॳ͸ Fastly ͷΑ͏ͳ CDN

    Ͱղܾ͞ΕΔͷͰ͸ • কདྷతʹ͸ nginx/h2o ͷϞδϡʔϧԽ͞Εͯ࢖͑ΔΑ͏ʹͳ ͬͯΔ͸ͣ • ES Modules ͷ੩తղੳεςοϓ͸ඞཁ ϓϩμΫγϣϯͰ࢖͑Δͷ͸ɺ͓ͦΒ͘ 2~3೥ޙ

27. Webpack ͷ໰୊ͱࢮ͵ཧ༝: ·ͱΊ • ศརͳׂΕ૭ • Universal ੑΛഁյ͠ίʔυͷϞδϡϥϦςΟ͕௿Լ • ωΠςΟϒͷ

    ES Modules Ͱ૬ରతʹॏཁੑ͕௿Լ δϯΫεతʹ͸ɺDHH͕બΜͩϑϩϯτͷπʔϧ͸ࢮ͵

28. ଈࢮ͠ͳ͍ Webpack ͷ࢖͍ํ • ES Modules ΁ͷܨ͗ͱׂΓ੾ͬͯ࢖͏ • ಠࣗͳtransformΛՄೳͳݶΓ babelଆ΁ಀ͕͢

    • css-modules => styled-jsx • resolve.alias => babel-plugin-module-resolver

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

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

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

32. Easy > Simple Ͱ࠷ѱ

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

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

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

    State => View => Event Handler ...

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

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

    render(getState()) } mainloop()

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

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

40. ͓ΘΓ