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
100
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
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
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Technology
See All in Technology
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
280
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
350
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
240
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
microCMSではじめるAIライティング
himaratsu
0
120
インフラ寄りSREの生存戦略
sansantech
PRO
9
3.4k
SREのためのeBPF活用ステップアップガイド
egmc
2
900
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
310
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
240
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Gamification - CAS2011
davidbonilla
81
5.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Thoughts on Productivity
jonyablonski
69
4.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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ͷਏ͞ɺઃܭ༷͕ίʔυʹΓʹ͍͘ͱ͜Ζ ࢦ͖͢ɺݎ࿚ͳઃܭΑΓɺࣜભٶͰʁͱ͍͏ఏҊ
͓ΘΓ