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.2k
それでもどうして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
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
99
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
30
9.5k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
1.9k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.5k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
580
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
5.9k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
920
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.2k
Vercel monorepo対策 / Vercel monorepo
okunokentaro
0
220
Other Decks in Technology
See All in Technology
ChatGPT for IT Service Management (IT Pro)
dahatake
2
110
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
0→1開発における技術選定において一番大切なこと
bicstone
1
320
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
190
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
ユーザーストーリーのレビューを自動化したみたの
bun913
1
310
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
アプリがつくるNOT A HOTELブランド
hokuts
1
450
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
60
17k
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Code Reviewing Like a Champion
maltzj
513
39k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Facilitating Awesome Meetings
lara
41
5.6k
How to name files
jennybc
64
92k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Faster Mobile Websites
deanohume
297
30k
How to train your dragon (web standard)
notwaldorf
72
5.1k
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