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
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
Search
OKUNOKENTARO
January 20, 2023
Technology
19
5.5k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
2023年1月20日 Harajuku.ts Meetup 〜 Recoilの事例集めました〜 にて発表した資料です。
OKUNOKENTARO
January 20, 2023
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
180
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.3k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.6k
Other Decks in Technology
See All in Technology
OSMnx Galleryの紹介
mopinfish
0
120
ゼロコードで実現! - OpenTelemetryとOCI APM Agentによる簡単アプリケーション監視 - / Zero-Code Observability with OpenTelemetry and OCI APM
oracle4engineer
PRO
1
170
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
100
初参加のハノーバーメッセで感じた世界最大級イベントの熱気とAI活用の未来
hamadakoji
0
210
AWS LambdaでSocket通信サーバーレスアプリケーションのリアルタイム通信 / 20250523 Kumiko Hennmi
shift_evolve
1
300
[JAWS-UG 栃木 #2]AWS FISはドSなのか?システムに試練を与えて強くする!
sh_fk2
1
250
GigaViewerにおけるMackerel APM導入の裏側
7474
0
150
Standard Schema: スキーマライブラリの統一企画とは何か
nozomuikuta
1
440
テスト設計チュートリアル ちびこん編 ’25
omn
1
430
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
37k
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
6
630
CloudTrailも、GuardDutyも、VPC Flow logsも… ログ多すぎ問題の整理術
nikuyoshi
5
540
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Building Applications with DynamoDB
mza
95
6.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
600
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Designing for Performance
lara
608
69k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
56
A Tale of Four Properties
chriscoyier
159
23k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Adopting Sorbet at Scale
ufuk
76
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Transcript
ͦΕͰͲ͏ ͯ͠3FDPJMΛ͏ͷ͔ +BO )BSBKVLVUT.FFUVQ3FDPJMͷࣄྫूΊ·ͨ͠ !PLVOPLFOUBSP
୭ w Ԟݡଠ!PLVOPLFOUBSP w ΫϨεΣΞגࣜձࣾ w 5ZQF4DSJQUྺ w ϑϩϯ τΤϯ
υ ɾ όοΫΤϯ υ
3FDPJMΛੵۃతʹΘͳ͍Λ͠·͢
ΈΜͳঢ়ଶΛཧ͍ͨ͠ ʁ w ঢ়ଶͷଟ͞ݕূΛࠔʹ͢Δ w Έ߹Θͤͷֻ͚ࢉͰݕূ߲͕૿͑Δͱ w ݕূ࿙ΕͷϦ εΫ ˠ࣭ҡ࣋ͷ໘Ͱෆར
w ঢ়ଶۃྗཧͨ͘͠ͳ͍ w ϒϥβใΛදࣔ͢ΔͷΈɺ ঢ়ଶθϩ ʂ ˡ͜ ͏͋Εγϯϓϧ
ঢ়ଶͱ w ϢʔβͷϩάΠϯ ɾ ηογϣϯͳͲೝূใ w ϑ ΥʔϜͷೖྗ w (6*ͷදࣔঢ়گ
w දࣔඇදࣔΛΓସ͑Δ τάϧɺ ΞίʔσΟ ΦϯͳͲ w ϒϥβ͝ͱʹهԱ͞ΕΔ ʮ࠷ۙදࣔͨ͠ϖʔδҰཡʯ ͳΜؚ͔·ΕΔ͔͠Εͳ͍ʜ
ঢ়ଶͲ͜Ͱཧ͢Δ ʁ w LocalStorage, SessionStorageɹ w URLSearchParams ʢ63-ΫΤϦจࣈྻʣ ɹ w
IndexedDBɹ w ঢ়ଶཧ͚"1*ϥΠ ϒϥ Ϧ ʢ3FBDU$POUFYU 3FEVY 3FDPJMͳͲʣ w useState(), useRef() w άϩʔόϧม
ঢ়ଶͷଟ͞ΞϓϦέʔγϣϯͷෳࡶ͞ w ঢ়ଶͷଟ͍ΞϓϦέʔγϣϯෳࡶͰ͋Δ w ͜͜Ͱʜ w ঢ়ଶͷଟ͞දࣔཁૉͷଟ͞ Ͱͳ͍ ʂ
w ͦΕ͕%#ʹͯӬଓԽ͞Εͨͷʹ༝དྷ͢ΔͷͰ͋Ε ͦΕ ʢϑϩϯ τΤϯυจ຺ʹ͓͍ͯʣ ঢ়ଶͰͳ͍ w αʔόʔ͔Βऔಘ͠ϒϥβ্Ͱදࣔ͢Δ ʮݹయత8FCʯ ͦͷͷͰ͋Δ
ঢ়ଶཧΩϟογϡཧͰͳ͍ w ঢ়ଶཧͷ֓೦ͱΩϟογϡͷ֓೦Λࠞͥͳ͍ w ঢ়ଶཧϥΠ ϒϥ Ϧɺ GFUDIͨ͠ใͷஔ͖Ͱͳ͍ w ͳ͔ͥGFUDIͨ͠Βɺ
·ͣϨεϙϯεΛঢ়ଶཧϥΠ ϒϥ Ϧʹε τΞ͕ͪ͠
IUUQTTXSWFSDFMBQQ
483Λ͏ w όοΫΤϯ υʹͯɺ Ϩεϙϯε ɾ ϔομʹ Cache-Control max-age=300,
stale-while-revalidate=300 Λ༩͓ͯ͘͠ w ඵؒΩϟογϡΛ͏ w ඵҎ্ܦա͍ͯͨ͠Βɺ ͔ͦ͜ΒඵؒطଘͷΩϟογϡΛ͍ όοΫΤϯ υ৽نΩϟογϡΛੜ w ࣍ͷGFUDIͰ࠷৽ͷͷΛಘΔ w ඵҎ্ܦա͍ͯͨ͠ΒΩϟογϡΛΘͣ࠷৽ͷͷΛಘΔ
ࢥߟఀࢭͰΦϨΦϨΩϟογϡΛ࣮͠ͳ͍ w GFUDIͨ݁͠ՌΛ ʮͱ Γ͋͑ͣ3FEVY3FDPJMʹೖΕΔʯ ΛΊΔ w ࢥߟఀࢭͰཧ͖͢ঢ়ଶΛ૿͞ͳ͍ w Ͳ͏ͤࢥߟఀࢭ͢ΔͳΒ
ʮࢥߟఀࢭͯ͠ϒϥβͷΩϟογϡʹΛҕͶΔʯ ΄͏͕Ϛγ w ͦͦࢥߟఀࢭ͠ͳ͍
ঢ়ଶཧͱΩϟογϡઓུҟͳΔ֓೦ w Ωϟογϡઓུ ʮදࣔͷߴԽʯ ʮϦΫΤε τͷݮʹΑΔίε τݮʯ w
ঢ়ଶཧ ʮӬଓԽ͞Ε͍ͯͳ͍ϒϥβ্ͷมͷهԱͱૢ࡞ʯ w Ωϟογϡͷ༗ޮੑΛͲ͏ͬͯݕূ͢Δ͔ͱ ঢ়ଶͷΈ߹ΘͤΛͲ͏ͬͯݕূ͢Δ͔ผ֓೦ w ޮ͖ݕূํ๏ҟͳΔ֓೦ͳͷͰࠞͥͳ͍
ΦϨΦϨ࣮ਓΛஔ͖ڈΓʹ͢Δ w ͔ͭͯ3FEVY5PPMLJU ΦϨΦϨϥούʔ࣮ͰେͳϦϙδτ ϦΛ࣮ͨ͠ਓ͕͍ͨ w ޙܧऀ͕શવಡΈղ͚ͣɺ ղফػೳՃʹେۤઓ w ࣮ऀνʔϜ͔Βڈ͓ͬͯΓɺ
ίϛο τϩάͳͲ͔Βಡղ w Ωϟογϡͱͯ͠ͷ্ޮՌ͞΄Ͳແ͠ ʢόοΫΤϯ υଆͷΩϟογϡߟྀ͕͔ͬͨͨΊʣ w ͨͩෳࡶͳ3FEVYϞϊ Ϧ ε͕ͦ͜ʹ͋Δʜ ˞ࣄ࣮ʹج͍ͮͨϑΟ ΫγϣϯͰ͢˞3FEVY5PPMLJUࣗମͷੋඇʹݴٴ͠·ͤΜ
Έͮ͘ ΓΦϯϘʔσΟ ϯάίε τ͔Β w ԿνʔϜϝϯόʔ͕มΘΒͳ͍ͳΒɺ ࣗ༝ʹ᛭ୖຏ͍͚ͯ͠Α͍ w ͦΜͳอূͳ͍ w
νʔϜϝϯόʔͷग़ೖΓ͕ى͜ΔͷͰ͋Ε ΦϯϘʔσΟ ϯάίε τΛແҋʹ্͛Δͷಘࡦͱ͍͑ͳ͍ ʢචऀडୗઐͷͨΊɺ ։ൃνʔϜશһ͕ಉ྅ͷΈͱ͍͏ঢ়گ͕ͳ͍ಛघੑʹΑΔʣ w νʔϜՃೖޙ͔Βߴੜ࢈ੑΛൃشͤ͞ΒΕΔ͔ ʁ w લऀͷҎ߱ϝϯςφϯεΛҡ࣋Ͱ͖Δ͔ ʁ
ΩϟογϡҎલʹGFUDIΛݮΒ͢ w GFUDIͨͦ͠ͷ··ίϯϙʔωϯ τͷඞཁՕॴʹόΠϯσΟ ϯάͯ͠ඳը͢Εे w ίϯϙʔωϯ τ࠶ඳըͰൃੜ͢Δ௨৴ϒϥβΛ৴ͯ͡ΨϯΨϯ࣮ߦ w ͦͦ3FBDUࣗମΛΑ
ֶ͘श͠ɺ ͳίϯϙʔωϯ τ࠶ඳըΛݮΒ͢ྗΛ͢Δ w ςε τʹ.48Λ࠾༻ IUUQTNTXKTJP
3FDPJM͍ͭ͏ͷ͔ w ·ͩग़൪͡Όͳ͍ w (6*ͷද੍ࣔޚuseState()Ͱे w ϑ ΥʔϜʹؔͯ͠SFBDUIPPLGPSNΛಋೖ IUUQTSFBDUIPPLGPSNDPN
w ෳͷϖʔδΛ·͍ͨͰ༻͢Δঢ়ଶURLSearchParamsΛݕ౼͢Δ w ΤϯυϢʔβʹΑͬͯϒοΫϚʔΫ͞Ε͏ Δϖʔδ͔ ʁ w -*/&ͷΑ ͏ͳϝ οηʔδΞϓϦͰڞ༗͞ΕΔ͔ ʁ w ϒϥβͷΔػೳΛซ༻͞Εͨͱ͖ͷ࠶ݱੑΛ༏ઌ͍͔ͨ͠ ʁ
ͦΕͰͲ͏ ͯ͠3FDPJMΛ͏ͷ͔
3FDPJM͕ग़൪ͱͳΔͱ͖ w 1SPQTόέπ Ϧ Ϩʔ͕͋· ΓʹසൟͰੜ࢈ੑ ɾ ՄಡੑͱʹԼΛ࣮ײ͢Δͱ͖ w ଟ͘ͷࢠίϯϙʔωϯ
τ͕ͲΕڊେͳ1SPQTΛ͍࣋ͬͯͯ ίϯϙʔωϯ τʹେྔͷuseState()͕ฒΜͰ͠· ͏ Α ͏ͳঢ়گ w 3FBDU$POUFYUͷग़൪ʹͳΓͦ͏ͳશϖʔδશίϯϙʔωϯ τͰڞ༗͢Δใ͕͋Δͱ͖ w શϖʔδͰຖճಉ͡༰ΛGFUDI͢Δͷ ͕͢͞ʹաͰͳ͍͔ ʢओ؍ʣ ͱஅͰ͖Δͱ͖ w ྫ ɿ ϢʔβʔʹΑΔΧϥʔςʔϚઃఆͳͲɺ $44JO+4্Ͱڞ༗ར༻͍ͨ͠ͷऔಘ
$POUFYUͷͭΒ͍ w 1SPWJEFSλϫʔ͕ੜ͢Δ <FooProvider> <BarProvider> <BazProvider> <MainContents /> </BazProvider> </BarProvider>
</FooProvider> ग़యIUUQT[FOOEFWVIZPBSUJDMFTQSPWJEFSUPXFSUPSFDPJM
Ͳ͏ ͯͭ͠Β͍͔ w ୯७ʹՄಡੑ͕Լ͕Δ w 4UPSZCPPLଆͷϝϯςφϯε͕ࡶʹͳΔ w ૿͑Ε૿͑Δ΄ͲґଘॱΛѲ͢Δඞཁ͕͋Δ ˠޓ͍ʹૄͰ͋Γɺ ͔ͭ1SPQTόέπϦ
ϨʔΛ؆ུԽ͢Δঢ়ଶऔಘͷखஈ͕ཉ͘͠ͳΔ
Α ͏͘3FDPJM w $POUFYUΑ Γང͔ʹखܰ w චऀ3FDPJMΛ$POUFYUͷ༻ͱଊ͍͑ͯΔ
3FDPJM4FMFDUPS͏ͷ͔ w ࠷ޙ·ͰΘͳ͍ w $POUFYUͷ༻ͱ͍͏ཱͪҐஔͳͷͰ$POUFYUͷ༻Ҏ֎ͷ͜ͱ͠ͳ͍ wʮ։ൃऀͷग़ೖΓ͕ܹ͍͠νʔϜʯ ͱ͍͏৫ߏʹ͓͍ͯ 3FDPJM4FMFDUPSΛ ʮ͍ͭ͏͖Ͱɺ
͍ͭͬͯͳΒͳ͍͔ʯ ͷ ϧʔϧप͕ࠔͱஅ w useCallback(), useMemo()Ұൠతͳ3FBDUεΩϧͱ͍͏ѻ͍Ͱ पͤͣʹڞ௨ೝࣝΛಘ͍͢ w ςε τʹ3FBDU5FTUJOH-JCSBSZΛ࠾༻ IUUQTUFTUJOHMJCSBSZDPN
VTF3FDPJM4UBUF ͷѻ͍ํ w ίϯϙʔωϯ τͰ͍͖ͳΓuseRecoilState()Λݺͳ͍نʹ͓ͯ͘͠ w useRecoilState()ඞͣ͏ҰͭͷuseSomething()Ͱϥοϓ͔ͯ͠Βѻ͏ w ཧ༝ w
useRecoilState()ͷΛѻ͏ॲཧͷςε τΛίϯϙʔωϯ τແ͠ʹ࣮ࢪ͢ΔͨΊ w ίϯϙʔωϯ τͷςε τʹ͓͚ΔϞοΫೖʹ3FDPJMͷґଘΛؚΊͳ͍ͨΊ w Ͳ͔͜ΒͰݺͳ͍Α ͏ʹ@packageΛ͚Δ IUUQTHJUIVCDPNVIZPFTMJOUQMVHJOJNQPSUBDDFTT
ੵۃత3FDPJMফۃత3FDPJMΞϦ w චऀɺ 3FDPJM͕උ͑Δ͋ΒΏΔ"1*Λ׆༻͖ͬͯ͠ 3FDPJMલఏͷ࣮ΛੵΈॏͶΔελΠϧΛ൱ఆ͠ͳ͍ w ͨͩ͠ຊߨͰ࣮ྫΛհ͢Δ্Ͱɺ ੵۃతಋೖ͍ͯ͠ͳ͍ͨΊ
$POUFYUͷ༻ࢭ· Γ ͱ͍͏ফۃతಋೖͷհͱͳͬͨ w 3FDPJM3FBDUͷᙱ͍ͱ͜ΖΛ͔͚ΔϥΠ ϒϥ ϦͰ͋Δ͜ͱʹҧ͍ͳ͍
5IBOLZPV