$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VanillaJSでIsomorphicなFluxアプリ作ってみた話
Search
Amagi
February 03, 2016
Programming
6
2.4k
VanillaJSでIsomorphicなFluxアプリ作ってみた話
Kyoto.js #9
Amagi
February 03, 2016
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
140
How to hack VS Code: evil ways (Japanese)
fand
5
3.7k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
550
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.9k
Real World GLSL
fand
0
290
APIs for VJ-ing
fand
1
7k
Other Decks in Programming
See All in Programming
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
120
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
110
ゲームの物理 剛体編
fadis
0
320
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
8
5.4k
AIコーディングエージェント(Gemini)
kondai24
0
190
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
190
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
690
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
18
7.2k
WebRTC と Rust と8K 60fps
tnoho
2
1.9k
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
6
2.1k
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
ttskch
3
790
無秩序からの脱却 / Emergence from chaos
nrslib
2
13k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Being A Developer After 40
akosma
91
590k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Automating Front-end Workflow
addyosmani
1371
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
4 Signs Your Business is Dying
shpigford
186
22k
KATA
mclloyd
PRO
32
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Become a Pro
speakerdeck
PRO
31
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
*TPNPSQIJD Α· @amagitakayosi Kyoto.js #9
@amagitakayosi
ࠓ͢͜ͱ
ΦϨΦϨ'MVYߏங *TPNPSQIJDԽϋϚΓॴ
ΦϨΦϨ 'MVY
https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa /PEFֶԂࡇͰհ͠·ͨ͠
ͯͳϒϩάͷFlux w &WFOU&NJUUFSϕʔε w ͷ0CTFSWFSύλʔϯ͔Β نʹԠͯ͡εέʔϧͤ͞Δ
https://gist.github.com/fand/cc70b35eb901bd0ccb24 ݱࡏ ͯͳϒϩάͰಈ͍ͯΔίʔυ
EventEmitter͚ͩͰFlux $PNQPOFOU Πϕϯτ ө Action σʔλมߋ %JTQBUDIFS "DUJPO $SFBUPS 4UPSF
։ൃ߹॓ d
߹॓ w ͓ʮ৽ٕज़Λࢼ͢ʯ w ฐνʔϜશһ5ZQF4DSJQUͰ w ීஈ+4ॻ͍ͯͳ͍ਓʂ
߹॓ΞϓϦͷߏ w ΫϥΠΞϯτ w 54 3FBDU ΦϨΦϨ'MVY w αʔόαΠυ w
54 FYQSFTT BTZODόϦόϦ
BTZOD࠷ߴʂʂ
݁Ռ
None
None
͍ͰΖ͏ w 'MVYͷϦϑΝΫλ ࠶ߏ w ͍ͭͰʹ৭ʑ࣮ݧ͠Α͏ w ͯͳϒϩάͷ'MVYʹ ϑΟʔυόοΫ͠Α͏
*TPNPSQIJD *TPNPSQIJD *TPNPSQIJD *TPNPSQIJD
*TPNPSQIJD w αʔόΫϥΠΞϯτͰ ಉ͡ίʔυΛڞ༗͢Δ͜ͱ
https://speakerdeck.com/koichik/isomorphic-survival-guide *TPNPSQIJD ͷղઆ
IsomorphicԽͷϝϦοτ w ॏෳ͢ΔίʔυΛݮΒͤΔ w αʔόαΠυϨϯμϦϯά 443 w ϊϋΛڞ༗͍͢͠
*TPNPSQIJDԽͷϝϦοτ w ॏෳ͢ΔίʔυΛݮΒͤΔ w αʔόαΠυϨϯμϦϯά 443 w ϊϋڞ༗͍͢͠ ʮαʔό͔͠ग़དྷͳ͍ʯ
ʮΫϥΠΞϯτ͔͠৮Εͳ͍ʯ ʹͳΓʹ͍͘ ……ͣ
*TPNPSQIJDԽʹඞཁͳ͜ͱ
SFBDUSPVUFS ؾ߹ JTPͱ͔ ؾ߹
4JOHMFUPO 'SFF
γϯάϧτϯ w ΫϥΠΞϯτPOMZͷ߹ɺ 4UPSF%JTQBUDIFS γϯάϧτϯͰ0, w 'BDFCPPLͷυΩϡϝϯτͰ lBTJOHMFUPONPEFMPGBMPHJDBMEPNBJOz ͬͯݴͬͯΔ
None
ΫϥΠΞϯτonlyͷ߹ w XJOEPXຖʹ'MVYΞϓϦ͕Ұݸ
SSR͢Δ߹ w ϦΫΤετຖʹ'MVYΞϓϦ͕Ұݸ αʔό
ඞཁͳมߋ w ɹɹɹɹɹΊΔ w ΞϓϦͷΤϯτϦʔϙΠϯτͰ OFXͯ͋͛͠Δඞཁ͕͋Δ
γϯάϧτϯͳStoreΛॻ͖͑Δ
C / S݉༻ͷॳظԽUtil࡞ͬͯ͏
ؾ߹Ͱॻ͖͑
3PVUJOH
react-routerΛ͍·͠ΐ͏ w υΩϡϝϯτʹ443ͷํ๏ࡌͬͯΔ w FYQSFTTͷSPVUFS Bɹɹɹɹɹͱ͔ w SFBDUSPVUFS͡Όͳ͍߹ؤுͬͯ
'FUDIJOH
ํ2ͭ w 3FMBZ 'BMDPSࢼ͢ w ૉʹBKBY͢Δ
Relay w 3FBDUίϯϙʔωϯτఆٛʹ ඞཁͳσʔλΛهड़͢Δͱ উखʹϑΣονͯ͘͠ΕΔ lϑϨʔϜϫʔΫz w ίετߴ͗͢Δ
Falcor w /FUqJY w 3FMBZͱࣅͨΑ͏ͳΜ w ίετߴ͗͢
݁ہૉʹajax w ΫϥΠΞϯτ͔Βݺͼ͍ͨ ΫΤϦϝιουશ෦ʹ ΤϯυϙΠϯτΛ༻ҙ͢Δ w Bͨ͠Β DPOUSJCVUPSTશ෦ฦͬͯདྷΔɺ Έ͍ͨͳ
ॳظԽͲ͏͢Δʁ w ॳظԽ࣌ʹHFU ͯ͠Δॴ ॻ͖͑Δඞཁ͕͋Δʁ w SFBDUEPNTFSWFSͩͱ DPNQPOFOU%JE.PVOUݺΕͳ͍ ɹˠॻ͖͑ෆཁ
componentDidMountͷΑ͏͢
)ZESBUJPO
Hydration/Dehydration w ΞϓϦέʔγϣϯͷঢ়ଶΛ ΫϥΠΞϯταʔόؒͰڞ༗͢Δ w 443ͰඞཁʹͳΔ
ϦΫΤετ͕དྷͨΒ αʔό
αʔό্ͰΞϓϦΛॳظԽͯ͠ HTMLʹrender αʔό )5.-
renderࡁΈHTMLʹ σʔλΛຒΊࠐΜͰฦ͢ αʔό )5.-
ΫϥΠΞϯτॳظԽ࣌ʹ ຒΊࠐ·ΕͨσʔλΛϩʔυ )5.-
ΫϥΠΞϯτͰrender্ͯ͠ॻ͖ αʔόͰ SFOEFS͞Εͨ %0. ৽͍͠ %0.
HydrationͲ͏Δͷ w ϑϨʔϜϫʔΫͷػೳΛ͏ w 'MVYJCMF "MU w HPBUTMBDLFSJTP͔ͭ͏ w "MU࡞ऀͷIZESBUJPOϥΠϒϥϦ
w ࠓճ+40/TUSJOHJSZQBSTFͰ
dehydrationͷΑ͏͢
dehydrationͷΑ͏͢
rehydrationͷΑ͏͢
3िؒ΄Ͳઓͬͨ ݁Ռ
None
None
·ͱΊ
͚ͬ͜͏େม w *TPNPSQIJDͳΈ࡞Δͷ ͔͔࣌ؒΔ w Ұ׳ΕͨΒ؆୯͚ͩͲ νʔϜϝϯόʔͱͷϊϋڞ༗Ή͍ͣ
ϑϨʔϜϫʔΫ࠷ߴ w ϑϨʔϜϫʔΫ࡞ऀ ؤு͍ͬͯͯ͢͝ w େͷਓؾϑϨʔϜϫʔΫ *TPNPSQIJDରԠͯ͠Δ w ίʔυಡΉͱ݁ߏటष͔ͬͨΓ͢Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠