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.6k
それでもどうして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
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.4k
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.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.7k
Other Decks in Technology
See All in Technology
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
120
With Devin -AIの自律とメンバーの自立
kotanin0
2
990
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
120
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
210
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
250
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.3k
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
150
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2k
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
150
ファインディにおける Dataform ブランチ戦略
hiracky16
0
240
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
500
Microsoft Clarityでインサイトを見つけよう
nakasho
0
100
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Making Projects Easy
brettharned
117
6.3k
Producing Creativity
orderedlist
PRO
346
40k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Thoughts on Productivity
jonyablonski
69
4.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing for Performance
lara
610
69k
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