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
40
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
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
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
450
速くて安いWebサイトを作る
nishiharatsubasa
15
15k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
短縮URLをお手軽に導入しよう
nakasho
0
130
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
6
1.9k
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
460
OPENLOGI Company Profile for engineer
hr01
1
20k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
200
Two Blades, One Journey: Engineering While Managing
ohbarye
3
730
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
160
EDRの検知の仕組みと検知回避について
chayakonanaika
8
4.2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Language of Interfaces
destraynor
156
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
It's Worth the Effort
3n
184
28k
Building Applications with DynamoDB
mza
93
6.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Invisible Side of Design
smashingmag
299
50k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Visualization
eitanlees
146
15k
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ͷਏ͞ɺઃܭ༷͕ίʔυʹΓʹ͍͘ͱ͜Ζ ࢦ͖͢ɺݎ࿚ͳઃܭΑΓɺࣜભٶͰʁͱ͍͏ఏҊ
͓ΘΓ