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.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.6k
Other Decks in Technology
See All in Technology
産業機械をElixirで制御する
kikuyuta
0
160
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
13
7.5k
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
2
140
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
120
OpenTelemetry Collector internals
ymotongpoo
5
530
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
ykagano
1
480
データ戦略部門 紹介資料
sansan33
PRO
1
3.2k
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
0
280
「伝える」を加速させるCursor術
naomix
0
610
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
160
DB 醬,嗨!哪泥嘎斯基?
line_developers_tw
PRO
0
150
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
180
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Scaling GitHub
holman
459
140k
A better future with KSS
kneath
239
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Optimizing for Happiness
mojombo
379
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
BBQ
matthewcrist
89
9.7k
Faster Mobile Websites
deanohume
307
31k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The World Runs on Bad Software
bkeepers
PRO
68
11k
What's in a price? How to price your products and services
michaelherold
245
12k
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