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.4k
それでもどうして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
9k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
150
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
9.9k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.2k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
620
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.2k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.5k
Other Decks in Technology
See All in Technology
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
110
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
100
物価高なラスベガスでの過ごし方
zakky
0
320
一休.comレストランにおけるRustの活用
kymmt90
3
570
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
260
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
200
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
アジャイルと契約 エッセンシャル版 / Agile Contracts Essential Edition
fkino
0
110
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
160
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Scaling GitHub
holman
458
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
What's in a price? How to price your products and services
michaelherold
243
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Git: the NoSQL Database
bkeepers
PRO
425
64k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Practical Orchestrator
shlominoach
186
10k
Designing Experiences People Love
moore
138
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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