Slide 1
Slide 1 text
Universal JavaScript - ࠓޙ10
Λੜ͖ൈͨ͘Ίʹ
@mizchi
Roppongi.rb #3 Rails x Frontend-Tech
Slide 2
Slide 2 text
About Me
• ϑϩϯτΤϯυ/SPA/Node.js ΤϯδχΞ
• ήʔϜܥ => ڭҭܥ => Increments(Qiita)
• 4݄͔ΒϑϦʔϥϯεͰ Redux Express middleware
• ࠷ۙͷڵຯ: ReactNative / AMP / ےτϨ
Slide 3
Slide 3 text
Podcast ͡Ί·ͨ͠
https://genba.fm/
• #1 Awesome Vue
• #0 React vs Angular - ͋Δ͍ Functional
JavaScript
Slide 4
Slide 4 text
͓ॻ͖
• Sprockets ͷࡴ͠ํ
• ͓લͷ Webpack ࢮ͵
• ͜ͷઌ10ੜ͖ΔͨΊʹ
Slide 5
Slide 5 text
!!!!CAUTION!!!!
!!!!!!!!!!!!
ຊࢿྉͷະདྷ༧ଌࣗͷצͰ͋Γ
ΛऔΕΔͷͰ͋Γ·ͤΜ
!!!!!!!!!!!!
Slide 6
Slide 6 text
ୈҰ෦: Sprockets ͷ
ࡴ͠ํ
Slide 7
Slide 7 text
ࠓͷจ຺
toshimaru_e
ʮQiitaͷSprockesΛࡴͨ࣌͠ͷΛ͓ئ͍Ͱ͖·͔͢ʯ
mizchi
ʮ͍ʯ
Slide 8
Slide 8 text
SprocketsΛࡴͨ͠هࣄ
• Qiita - app/assets/javascriptsҎԼͷJSΛશͯ
commonjsͷrequireʹॻ͖͑Δ
• Qiita - decafͰcoffeeͷίʔυΛES.next ʹॻ͖͑Δ
ҙ: 2͙Β͍લ
Slide 9
Slide 9 text
લఏ: ͳͥ Sprockets ࢮ͵͖͔
• Ϟδϡʔϧղܾʹ ES Modules ͱ͍͏ඪ४ ͕͋Δ
• JSͰϑΝΠϧείʔϓΛ࣋ͯͣ ࢀর͕άϩʔόϧ͠ ʹͳΔ
• ධՁॱͷ੍ޚ͕͍͠
• RailsଆʹӅṭ͞Εͯͯ node πʔϧνΣΠϯΛ͍ʹ͍͘
• ͍ (ExecJS)
Slide 10
Slide 10 text
(2015࣌ͷ) Sprockets ͷࡴ͠ํ
• browserify-rails ͷಋೖ, ޙʹ webpack
• εΫϦϓτॻ͍ͯ sprockets/require Λ commonjs ʹ
• άϩʔόϧมͷࢀরΛ module.exports = ... ʹೖ
• ࢀরղܾΛάϩʔόϧม͔Β require('...') ʹ
Slide 11
Slide 11 text
before
// define
window.App.View.render = function () {/* render */}
// use
App.View.render()
Slide 12
Slide 12 text
after: commonjs
// define on render.js
module.exports = () => {/* render */}
// use
const render = require('./render')
render()
Slide 13
Slide 13 text
࣌ͷ੍
• ES Modules Ͱͳ͘ commonjs ͳͷɺ coffee ͕΄ͱ
ΜͲͩͬͨͨΊ
• ࠓͳΒ ES Modules
Slide 14
Slide 14 text
େࣄͳ͜ͱ: ߟ͑ํͷస
• ׂ୯ҐΛ ࣮ߦίʔυ ͔Β ؔϞδϡʔϧ
• Ϟδϡʔϧఆٛͱͦͷ࣮ߦΛڧ۠͘ผ͢Δ
• େࣄͳͷɺ ࣮ߦ࣌ͷ෭࡞༻ͷநग़ ͱɺ༧ଌ͢͠͞
Slide 15
Slide 15 text
ʮ࣮ߦίʔυʯ͔ΒʮؔϞδϡʔϧʯ
// Bad
document.title = 'foo'
// Good
// setTitle.js
export default function setTitle(title) {
document.title = title
}
// runner.js
setTitle('foo')
Slide 16
Slide 16 text
͍͍͍ͨ͜ͱ
• ଞͷݴޠ/ڥͰʮධՁɺଈɺ࣮ߦɺ෭࡞༻์Γ͛ʯΈ͍ͨ
ͳίʔυ͋·Γॻ͔ͳ͍ͣ
• ͨΓલͷ͜ͱΛͨΓલʹ Γ·͠ΐ͏
Slide 17
Slide 17 text
ୈೋ෦: ͓લͷ Webpack ࢮ͵
Slide 18
Slide 18 text
Webpack ͷׂ
• ES Modules ͷόϯυϧ
• ֦ுࢠ͝ͱͷ transform
• ։ൃ࣌ͷ Hot Reload
• ࢀরղܾͷ Alias
• etc...
Slide 19
Slide 19 text
ҙࣝ: ػೳ͕͋Γׂ͗ͯ͢Ε૭
• JSόϯυϥͷൣᙝΛӽ͍͑ͯͯ node.js Ͱ࠶ݱͰ͖ͳ͍
• ઃఆϑΝΠϧ͕Ͱ͔͍ & Α͘Θ͔ΒΜ
• css-modules ಋೖ͕ࠇຐज़Ͱਏ͍
• ίϐϖͰಈ͍ͨޙɺಈ͔ͳ͘ͳͬͨͱ͖ͷௐ͕ࠪେม
Slide 20
Slide 20 text
Universal JavaScript
• Universal: ECMAScript ͷ Spec ΛຬͨͤɺͲΜͳ
ڥͰಈ͘JS
• Isomorphic : ڱٛͷUniversalɻBrowser/Node͕ରɻ
=> Webpack Universal ੑΛഁյ͢Δ(͍͢͠)͔ΒϞδ
ϡϥϦςΟ͕Լ͢ΔΑͱ͍͏
Slide 21
Slide 21 text
Babel Universal ͔ʁ
• DOM Λ৮Βͣɺbabel-preset-es201* ΛͬͯΔ͏ͪ
Yes
• ͨͩ͠ ES Modules ͷύεղܾ commonjs + α
• lib/index ͱ͔ node_modules ͱ͔
• stage0~3, jsx, flow ඪ४֎
Slide 22
Slide 22 text
Native ES Modules ͷԻ
Slide 23
Slide 23 text
Native ES Modules
• Safari 10.1
• Chrome M60(Canary) ϑϥάͰ
• Edge ϑϥάͰ
Slide 24
Slide 24 text
ES Moduls in Browser
import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.');
https://jakearchibald.com/2017/es-modules-in-
browsers/
Slide 25
Slide 25 text
ES Modules ͕͋ͬͨΒ͑Δ͔ʁ
• ༷తʹYES
• ͨͩ͠HTTP/2Ͱͳ͍ͱύϑΥʔϚϯε͕େ෯ʹྼԽ͢ΔՄೳੑ
• ES ModulesHTTP/2Ͱ෦ߋ৽ͷເΛݟΔ͔ʁ
• Cache aware server push - kazuho
Slide 26
Slide 26 text
ES Modules: ࠓޙͷ༧
• དྷʹ࣮͕ग़ἧ͏
• ࠷ॳ Fastly ͷΑ͏ͳ CDN Ͱղܾ͞ΕΔͷͰ
• কདྷతʹ nginx/h2o ͷϞδϡʔϧԽ͞Εͯ͑ΔΑ͏ʹͳ
ͬͯΔͣ
• ES Modules ͷ੩తղੳεςοϓඞཁ
ϓϩμΫγϣϯͰ͑Δͷɺ͓ͦΒ͘ 2~3ޙ
Slide 27
Slide 27 text
Webpack ͷͱࢮ͵ཧ༝: ·ͱΊ
• ศརͳׂΕ૭
• Universal ੑΛഁյ͠ίʔυͷϞδϡϥϦςΟ͕Լ
• ωΠςΟϒͷ ES Modules Ͱ૬ରతʹॏཁੑ͕Լ
δϯΫεతʹɺDHH͕બΜͩϑϩϯτͷπʔϧࢮ͵
Slide 28
Slide 28 text
ଈࢮ͠ͳ͍ Webpack ͷ͍ํ
• ES Modules ͷܨ͗ͱׂΓͬͯ͏
• ಠࣗͳtransformΛՄೳͳݶΓ babelଆಀ͕͢
• css-modules => styled-jsx
• resolve.alias => babel-plugin-module-resolver
Slide 29
Slide 29 text
ୈࡾ෦: ͜ͷઌ10ੜ
͖ΔͨΊ
Slide 30
Slide 30 text
JavaScriptք
Ϣʔβʔ: ΊͬͪΌଟ͍
ϢʔβʔͷόοΫΤϯυ: ଟ༷
JSͷฏۉ࿅: ͍ (ยखؒ)
Slide 31
Slide 31 text
ίϯηϯαεͱΔͷϚδͰແཧ
Slide 32
Slide 32 text
Easy > Simple Ͱ࠷ѱ
Slide 33
Slide 33 text
ϥΠϒϥϦઃܭऀͷؾ࣋ͪ
• Easy ͰϢʔβʔΛὃͯ͠ɺSimple
• npmքͰɺྲྀߦͬͨػೳ୯ػೳʹϒϨʔΫμϯ͞ΕΔ
Slide 34
Slide 34 text
Webpacker ͷ scaffold ͕Ϡόͦ͏
• ίϯηϯαεऔΕͳ͍ڥͰ, ୭͕ೲಘͰ͖ΔϘΠϥʔϓϨ
ʔτΛߏங͢Δͷແཧ
• ԼճΓΛࢧ͑ΔͷʹΑͦ͞͏͕ͩɺׂΕ૭…
Slide 35
Slide 35 text
ຊ࣭͚ͩݟ͍͍ͯͨ…
• Agnostic ʹ Universal ͰϏδωεϩδοΫΛॻ͘
• Domain => UI State => View => Event Handler ...
Slide 36
Slide 36 text
ϑϨʔϜϫʔΫͷׂ
• ͳΜ͔Ͱ͔͍JSONΛ࡞Δ
• ͳΜ͔Ͱ͔͍JSONΛViewʹΔ
• ͳΜ͔Ͱ͔͍JSONΛ࡞ΔͭʹΠϕϯτΛૹΔ
Slide 37
Slide 37 text
ͦͦແݶͷύϑΥʔϚϯε͕͋Ε…
const mainloop = () => {
requestAnimationFrame(mainloop)
document.body.innerHTML = render(getState())
}
mainloop()
Slide 38
Slide 38 text
UIϥΠϒϥϦࢮ͵ͷ͔
• Ϩϯμϥͷ WebComponents
• ঢ়ଶͷཧΔ
Slide 39
Slide 39 text
ϑϩϯτͷྑ͍ઃܭͱ
• x ίʔυ͕Βͳ͍
• ○ ϞδϡʔϧΛँͰ͖Δ
GUIͷਏ͞ɺઃܭ༷͕ίʔυʹΓʹ͍͘ͱ͜Ζ
ࢦ͖͢ɺݎ࿚ͳઃܭΑΓɺࣜભٶͰʁͱ͍͏ఏҊ
Slide 40
Slide 40 text
͓ΘΓ