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
Jōtaiではじめる 超軽量 React.jsステート管理
Search
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Programming
0
95
Jōtaiではじめる 超軽量 React.jsステート管理
Gunma.web #44
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
Reactで始める リグレッションテスト概論
tinykitten
PRO
0
25
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
120
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
44
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
Other Decks in Programming
See All in Programming
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
260
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
140
PHPカンファレンス関西2025 基調講演
sugimotokei
5
920
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
680
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
TypeScriptでDXを上げろ! Hono編
yusukebe
3
850
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
220
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
リッチエディターを安全に開発・運用するために
unachang113
1
230
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
4 Signs Your Business is Dying
shpigford
184
22k
Why Our Code Smells
bkeepers
PRO
337
57k
Raft: Consensus for Rubyists
vanstee
140
7k
Become a Pro
speakerdeck
PRO
29
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Writing Fast Ruby
sferik
628
62k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
JōtaiͰ͡ΊΔ ܰྔ React.jsεςʔτཧ Super lightweight and primitive state management for
React.js Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @ Online Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer I 💖 OSS & Cat🐈 Born
in Gunma🐴 Live in Tokyo🗼
Tsubasa SEKIGUCHI Λڌͱ͢Δ܈അݝલڮࢢੜ·ΕͷϑϦʔϥϯεͷ ϑϩϯτΤϯυΤϯδχΞɻ ͖ͬͨΜͱݺΕ͍ͯ·͢ɻ ͪͳΈʹࠓ26ࡀʹͳΓ·ͨ͠ɻ
෦ςελʔืूத TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
͡Ίʹ օ༷ʜ React.jsͷεςʔτཧɺͲ͏ͯ͠·͔͢ʁ RecoilΛओʹ͍ͬͯ·͢ɻ
͡Ίʹ ࠓճͷεϥΠυͰ Jōtaiͱ͍͏εςʔτཧϥΠϒϥϦ ʹ͍ͭͯ͠·͢ɻ
JōtaiͬͯԿʁ ฏͨ͘ݴ͏ͱʜ ϓϦϛςΟϒ͔ͭॊೈͳ React.js༻ εςʔτཧϥΠϒϥϦ ൃԻjoe-tieͱຊޠͱಉ͡Ͱ͢ɻ
ެࣜͷઆ໌͔ΒҾ༻͢Δͱʜ ϘτϜΞοϓɾΞϓϩʔνͷεςʔτϚωʔδϝϯτ Recoil͔ΒΠϯεύΠΞ͞ΕͨAtomicͳϞσϧ TypeScriptࢤͷඇৗʹϛχϚϧͳAPIΛ࣋ͭ JōtaiͬͯԿʁ
JōtaiΛ͏ͱԿ͕خ͍͔͠ Pros.
όϯυϧαΠζʜ Mini fi ed 8.1kB Mini fi ed + Gzipped
3.2kB JōtaiΛ͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/
[email protected]
ҰํRecoilʜ Mini fi ed 72.3kB Mini fi ed + Gzipped
21.1kB JōtaiΛ͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/
[email protected]
JōtaiΛ͏ͱʜ Mini fi ed 64.2kB Mini fi ed + Gzipped
17.9kB ͷݮ͕Ͱ͖·͢ 0KB 20KB 40KB 60KB 80KB Mini fi ed Gzipped Recoil Jōtai JōtaiΛ͏ͱԿ͕خ͍͔͠
΄͔ʹ͜ΜͳϢʔςΟϦςΟ(jotai/utils)͕͋Γ·͢ localStorageͰatom(state)ͷӬଓԽ SSRಋೖ࣌ͷϋΠυϨʔτ Redux෩ͷReducer/ActionTypes JōtaiͬͯԿʁ ެ͔ࣜΒҾ༻atomӬଓԽͷσϞ
JōtaiͷΠϚΠνͳͱ͜Ζ Cons.
Ͳ͜ͰatomΛ࡞Εͯ͠·͏ͷͰʜ ComponentͰatomΛ࡞Δͱ͖ɺ ՃͰuseMemo/useRefͰ ϝϞԽΛ͢Δඞཁ͕͋Δ ެ͔ࣜΒҾ༻atom͕ಈతʹੜ͞Εͳ͍Α͏ʹ͢ΔσϞ JōtaiͷΠϚΠνͳͱ͜Ζ
atomWeakMapʹ֨ೲ͞ΕΔͷͰʜ atom͕ͯ͢ͷίϯϙʔωϯτ͔Β ࢀর͞Εͳ͘ͳͬͨ߹ ΞϯϚϯτ࣌ͳͲ GCͰ͕ॳظԽ͞ΕΔ JōtaiͷΠϚΠνͳͱ͜Ζ https://twitter.com/dai_shi/status/1380885195549597696
Recoil vs Jōtai ͦͦɺ JōtaiRecoilͱԿ͕ҧ͏ͷʁ
։ൃऀ RecoilFacebookνʔϜʹΑͬͯ։ൃ͞Ε͍ͯͯɺ JōtaiPoimandres(ݩreact-spring) νʔϜͷҰ෦։ൃऀʹΑͬͯ։ൃ͞Ε͍ͯΔ Recoil vs Jōtai
։ൃͷج४ Recoilେن։ൃ༷ʑͳཁٻʹ ରԠ͢ΔΑ͏ʹઃܭ͞Ε͍ͯΔ JōtaiϓϦϛςΟϒͳAPIΛॏࢹ͢ΔઃܭΛ͍ͯ͠Δ Recoil vs Jōtai
ٕज़తͳࠩҟ RecoilBUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ Jōtaiatomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)
ٕज़తͳࠩҟ RecoilBUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ Jōtaiatomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)
ݸਓతʹʜ େ͖ͳϓϩδΣΫτͷ߹ͬͺΓɺ Recoil͕҆৺͔ͳͱࢥ͍·͢ɻ খ͍͞ϓϩδΣΫτɺContext APIͰࠈʹͳ͍ͬͯΔ ϓϩδΣΫτʹɺ JōtaiΛಋೖ͍͍͔ͯ͠ͳͱࢥ͍·͢ɻ ·ͱΊ
खલຯḩͰ͕͢ʜ JōtaiΛͬͨϓϩδΣΫτΛ࡞Γ·ͨ͠ɻ Wordle෩ͷࠃͷӺ໊ͯήʔϜͰ͢ɻ ͥͻ͓ࢼ͍ͩ͘͠͞ɻ JōtaiΛͬͨϓϩδΣΫτ IUUQTTUBUMFUJOZLJUUFONF
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @
Online Tsubasa SEKIGUCHI