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
21k
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
57
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.3k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.9k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Technology
See All in Technology
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
410
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
250
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
8
1k
バックエンド留学した話/Backend study abroad story
kaonavi
0
110
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
370
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.8k
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
220
10分でわかるfreeeのQA
freee
1
11k
入社後SREチームのミッションや課題の整理をした話
morix1500
1
190
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
490
OCI見積もり入門セミナー
oracle4engineer
PRO
0
140
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
520
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Producing Creativity
orderedlist
PRO
344
40k
Fireside Chat
paigeccino
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
The Pragmatic Product Professional
lauravandoore
33
6.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Optimizing for Happiness
mojombo
377
70k
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ͷਏ͞ɺઃܭ༷͕ίʔυʹΓʹ͍͘ͱ͜Ζ ࢦ͖͢ɺݎ࿚ͳઃܭΑΓɺࣜભٶͰʁͱ͍͏ఏҊ
͓ΘΓ