Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Universal JavaScript
Search
Koutarou Chikuba
May 31, 2017
Technology
21
22k
Universal JavaScript
Roppongi.rb #3 Rails x Frontend-Tech
Koutarou Chikuba
May 31, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
110
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Technology
See All in Technology
o11yツールを乗り換えた話
tak0x00
2
510
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
620
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
890
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
400
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
5
570
AI関数が早くなったので試してみよう
kumakura
0
190
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
9
2.1k
Lambda management with ecspresso and Terraform
ijin
2
150
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
350
Serverless Meetup #21
yoshidashingo
1
110
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cost Of JavaScript in 2023
addyosmani
51
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Balancing Empowerment & Direction
lara
1
530
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Scaling GitHub
holman
461
140k
Being A Developer After 40
akosma
90
590k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Adopting Sorbet at Scale
ufuk
77
9.5k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
Universal JavaScript - ࠓޙ10 Λੜ͖ൈͨ͘Ίʹ @mizchi Roppongi.rb #3 Rails x
Frontend-Tech
About Me • ϑϩϯτΤϯυ/SPA/Node.js ΤϯδχΞ • ήʔϜܥ => ڭҭܥ =>
Increments(Qiita) • 4݄͔ΒϑϦʔϥϯεͰ Redux Express middleware • ࠷ۙͷڵຯ: ReactNative / AMP / ےτϨ
Podcast ͡Ί·ͨ͠ https://genba.fm/ • #1 Awesome Vue • #0 React
vs Angular - ͋Δ͍ Functional JavaScript
͓ॻ͖ • Sprockets ͷࡴ͠ํ • ͓લͷ Webpack ࢮ͵ • ͜ͷઌ10ੜ͖ΔͨΊʹ
!!!!CAUTION!!!! !!!!!!!!!!!! ຊࢿྉͷະདྷ༧ଌࣗͷצͰ͋Γ ΛऔΕΔͷͰ͋Γ·ͤΜ !!!!!!!!!!!!
ୈҰ෦: Sprockets ͷ ࡴ͠ํ
ࠓͷจ຺ toshimaru_e ʮQiitaͷSprockesΛࡴͨ࣌͠ͷΛ͓ئ͍Ͱ͖·͔͢ʯ mizchi ʮ͍ʯ
SprocketsΛࡴͨ͠هࣄ • Qiita - app/assets/javascriptsҎԼͷJSΛશͯ commonjsͷrequireʹॻ͖͑Δ • Qiita - decafͰcoffeeͷίʔυΛES.next
ʹॻ͖͑Δ ҙ: 2͙Β͍લ
લఏ: ͳͥ Sprockets ࢮ͵͖͔ • Ϟδϡʔϧղܾʹ ES Modules ͱ͍͏ඪ४ ͕͋Δ
• JSͰϑΝΠϧείʔϓΛ࣋ͯͣ ࢀর͕άϩʔόϧ͠ ʹͳΔ • ධՁॱͷ੍ޚ͕͍͠ • RailsଆʹӅṭ͞Εͯͯ node πʔϧνΣΠϯΛ͍ʹ͍͘ • ͍ (ExecJS)
(2015࣌ͷ) Sprockets ͷࡴ͠ํ • browserify-rails ͷಋೖ, ޙʹ webpack • εΫϦϓτॻ͍ͯ
sprockets/require Λ commonjs ʹ • άϩʔόϧมͷࢀরΛ module.exports = ... ʹೖ • ࢀরղܾΛάϩʔόϧม͔Β require('...') ʹ
before // define window.App.View.render = function () {/* render */}
// use App.View.render()
after: commonjs // define on render.js module.exports = () =>
{/* render */} // use const render = require('./render') render()
࣌ͷ੍ • ES Modules Ͱͳ͘ commonjs ͳͷɺ coffee ͕΄ͱ ΜͲͩͬͨͨΊ
• ࠓͳΒ ES Modules
େࣄͳ͜ͱ: ߟ͑ํͷస • ׂ୯ҐΛ ࣮ߦίʔυ ͔Β ؔϞδϡʔϧ • Ϟδϡʔϧఆٛͱͦͷ࣮ߦΛڧ۠͘ผ͢Δ
• େࣄͳͷɺ ࣮ߦ࣌ͷ෭࡞༻ͷநग़ ͱɺ༧ଌ͢͠͞
ʮ࣮ߦίʔυʯ͔ΒʮؔϞδϡʔϧʯ // Bad document.title = 'foo' // Good // setTitle.js
export default function setTitle(title) { document.title = title } // runner.js setTitle('foo')
͍͍͍ͨ͜ͱ • ଞͷݴޠ/ڥͰʮධՁɺଈɺ࣮ߦɺ෭࡞༻์Γ͛ʯΈ͍ͨ ͳίʔυ͋·Γॻ͔ͳ͍ͣ • ͨΓલͷ͜ͱΛͨΓલʹ Γ·͠ΐ͏
ୈೋ෦: ͓લͷ Webpack ࢮ͵
Webpack ͷׂ • ES Modules ͷόϯυϧ • ֦ுࢠ͝ͱͷ transform •
։ൃ࣌ͷ Hot Reload • ࢀরղܾͷ Alias • etc...
ҙࣝ: ػೳ͕͋Γׂ͗ͯ͢Ε૭ • JSόϯυϥͷൣᙝΛӽ͍͑ͯͯ node.js Ͱ࠶ݱͰ͖ͳ͍ • ઃఆϑΝΠϧ͕Ͱ͔͍ & Α͘Θ͔ΒΜ
• css-modules ಋೖ͕ࠇຐज़Ͱਏ͍ • ίϐϖͰಈ͍ͨޙɺಈ͔ͳ͘ͳͬͨͱ͖ͷௐ͕ࠪେม
Universal JavaScript • Universal: ECMAScript ͷ Spec ΛຬͨͤɺͲΜͳ ڥͰಈ͘JS •
Isomorphic : ڱٛͷUniversalɻBrowser/Node͕ରɻ => Webpack Universal ੑΛഁյ͢Δ(͍͢͠)͔ΒϞδ ϡϥϦςΟ͕Լ͢ΔΑͱ͍͏
Babel Universal ͔ʁ • DOM Λ৮Βͣɺbabel-preset-es201* ΛͬͯΔ͏ͪ Yes •
ͨͩ͠ ES Modules ͷύεղܾ commonjs + α • lib/index ͱ͔ node_modules ͱ͔ • stage0~3, jsx, flow ඪ४֎
Native ES Modules ͷԻ
Native ES Modules • Safari 10.1 • Chrome M60(Canary) ϑϥάͰ
• Edge ϑϥάͰ
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/
ES Modules ͕͋ͬͨΒ͑Δ͔ʁ • ༷తʹYES • ͨͩ͠HTTP/2Ͱͳ͍ͱύϑΥʔϚϯε͕େ෯ʹྼԽ͢ΔՄೳੑ • ES ModulesHTTP/2Ͱ෦ߋ৽ͷເΛݟΔ͔ʁ
• Cache aware server push - kazuho
ES Modules: ࠓޙͷ༧ • དྷʹ࣮͕ग़ἧ͏ • ࠷ॳ Fastly ͷΑ͏ͳ CDN
Ͱղܾ͞ΕΔͷͰ • কདྷతʹ nginx/h2o ͷϞδϡʔϧԽ͞Εͯ͑ΔΑ͏ʹͳ ͬͯΔͣ • ES Modules ͷ੩తղੳεςοϓඞཁ ϓϩμΫγϣϯͰ͑Δͷɺ͓ͦΒ͘ 2~3ޙ
Webpack ͷͱࢮ͵ཧ༝: ·ͱΊ • ศརͳׂΕ૭ • Universal ੑΛഁյ͠ίʔυͷϞδϡϥϦςΟ͕Լ • ωΠςΟϒͷ
ES Modules Ͱ૬ରతʹॏཁੑ͕Լ δϯΫεతʹɺDHH͕બΜͩϑϩϯτͷπʔϧࢮ͵
ଈࢮ͠ͳ͍ Webpack ͷ͍ํ • ES Modules ͷܨ͗ͱׂΓͬͯ͏ • ಠࣗͳtransformΛՄೳͳݶΓ babelଆಀ͕͢
• css-modules => styled-jsx • resolve.alias => babel-plugin-module-resolver
ୈࡾ෦: ͜ͷઌ10ੜ ͖ΔͨΊ
JavaScriptք Ϣʔβʔ: ΊͬͪΌଟ͍ ϢʔβʔͷόοΫΤϯυ: ଟ༷ JSͷฏۉ࿅: ͍ (ยखؒ)
ίϯηϯαεͱΔͷϚδͰແཧ
Easy > Simple Ͱ࠷ѱ
ϥΠϒϥϦઃܭऀͷؾ࣋ͪ • Easy ͰϢʔβʔΛὃͯ͠ɺSimple • npmքͰɺྲྀߦͬͨػೳ୯ػೳʹϒϨʔΫμϯ͞ΕΔ
Webpacker ͷ scaffold ͕Ϡόͦ͏ • ίϯηϯαεऔΕͳ͍ڥͰ, ୭͕ೲಘͰ͖ΔϘΠϥʔϓϨ ʔτΛߏங͢Δͷແཧ • ԼճΓΛࢧ͑ΔͷʹΑͦ͞͏͕ͩɺׂΕ૭…
ຊ࣭͚ͩݟ͍͍ͯͨ… • Agnostic ʹ Universal ͰϏδωεϩδοΫΛॻ͘ • Domain => UI
State => View => Event Handler ...
ϑϨʔϜϫʔΫͷׂ • ͳΜ͔Ͱ͔͍JSONΛ࡞Δ • ͳΜ͔Ͱ͔͍JSONΛViewʹΔ • ͳΜ͔Ͱ͔͍JSONΛ࡞ΔͭʹΠϕϯτΛૹΔ
ͦͦແݶͷύϑΥʔϚϯε͕͋Ε… const mainloop = () => { requestAnimationFrame(mainloop) document.body.innerHTML =
render(getState()) } mainloop()
UIϥΠϒϥϦࢮ͵ͷ͔ • Ϩϯμϥͷ WebComponents • ঢ়ଶͷཧΔ
ϑϩϯτͷྑ͍ઃܭͱ • x ίʔυ͕Βͳ͍ • ◦ ϞδϡʔϧΛँͰ͖Δ GUIͷਏ͞ɺઃܭ༷͕ίʔυʹΓʹ͍͘ͱ͜Ζ ࢦ͖͢ɺݎ࿚ͳઃܭΑΓɺࣜભٶͰʁͱ͍͏ఏҊ
͓ΘΓ