それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil

ͦΕͰ΋Ͳ͏ ͯ͠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ͨ݁͠ՌΛ ʮͱ Γ͋͑ͣ3FEVY΍3FDPJMʹೖΕΔʯ Λ΍ΊΔ 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 3FDPJM͸3FBDUͷᙱ͍ͱ͜ΖΛ͔͚ΔϥΠ ϒϥ ϦͰ͋Δ͜ͱʹ͸ҧ͍ͳ͍

5IBOLZPV

それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil

それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil

OKUNOKENTARO

More Decks by OKUNOKENTARO

Other Decks in Technology

Featured

Transcript

ͦΕͰ΋Ͳ͏ ͯ͠3FDPJMΛ࢖͏ͷ͔ +BO )BSBKVLVUT.FFUVQ3FDPJMͷࣄྫूΊ·ͨ͠ !PLVOPLFOUBSP

୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞגࣜձࣾ w 5ZQF4DSJQUྺ೥ w ϑϩϯ τΤϯ

3FDPJMΛੵۃతʹ࢖Θͳ͍࿩Λ͠·͢

ΈΜͳঢ়ଶΛ؅ཧ͍ͨ͠ ʁ w ঢ়ଶͷଟ͞͸ݕূΛࠔ೉ʹ͢Δ w ૊Έ߹Θͤͷֻ͚ࢉͰݕূ߲໨͕૿͑Δͱ w ݕূ࿙ΕͷϦ εΫ ˠ඼࣭ҡ࣋ͷ໘Ͱෆར

ঢ়ଶͱ͸ w ϢʔβͷϩάΠϯ ɾ ηογϣϯͳͲೝূ৘ใ w ϑ ΥʔϜͷೖྗ஋ w (6*ͷදࣔঢ়گ

ঢ়ଶ͸Ͳ͜Ͱ؅ཧ͢Δ ʁ w LocalStorage, SessionStorageɹ w URLSearchParams ʢ63-ΫΤϦจࣈྻʣ ɹ w

ঢ়ଶͷଟ͞ΞϓϦέʔγϣϯͷෳࡶ͞ w ঢ়ଶͷଟ͍ΞϓϦέʔγϣϯ͸ෳࡶͰ͋Δ w ͜͜Ͱʜ w ঢ়ଶͷଟ͞දࣔཁૉͷଟ͞   Ͱ͸ͳ͍ ʂ

ঢ়ଶ؅ཧΩϟογϡ؅ཧͰ͸ͳ͍ w ঢ়ଶ؅ཧͷ֓೦ͱΩϟογϡͷ֓೦Λࠞͥͳ͍ w ঢ়ଶ؅ཧϥΠ ϒϥ Ϧ͸ɺ GFUDIͨ͠৘ใͷஔ͖৔Ͱ͸ͳ͍ w ͳ͔ͥGFUDIͨ͠Βɺ

IUUQTTXSWFSDFMBQQ

483Λ࢖͏ w όοΫΤϯ υʹͯɺ Ϩεϙϯε ɾ ϔομʹ   Cache-Control max-age=300,

ࢥߟఀࢭͰΦϨΦϨΩϟογϡΛ࣮૷͠ͳ͍ w GFUDIͨ݁͠ՌΛ ʮͱ Γ͋͑ͣ3FEVY΍3FDPJMʹೖΕΔʯ Λ΍ΊΔ w ࢥߟఀࢭͰ؅ཧ͢΂͖ঢ়ଶΛ૿΍͞ͳ͍ w Ͳ͏ͤࢥߟఀࢭ͢ΔͳΒ

ঢ়ଶ؅ཧͱΩϟογϡઓུ͸ҟͳΔ֓೦ w Ωϟογϡઓུ͸ ʮදࣔͷߴ଎Խʯ ΍ ʮϦΫΤε τͷ࡟ݮʹΑΔίε τ࡟ݮʯ w

ΦϨΦϨ࣮૷͸ਓΛஔ͖ڈΓʹ͢Δ w ͔ͭͯ3FEVY5PPMLJU ΦϨΦϨϥούʔ࣮૷Ͱେ૚ͳϦϙδτ Ϧ૚Λ࣮૷ͨ͠ਓ͕͍ͨ w ޙܧऀ͕શવಡΈղ͚ͣɺ ໰୊ղফ΍ػೳ௥Ճʹେۤઓ w ࣮૷ऀ͸νʔϜ͔Βڈ͓ͬͯΓɺ

࢓૊Έͮ͘ Γ͸ΦϯϘʔσΟ ϯάίε τ͔Β w Կ೥΋νʔϜϝϯόʔ͕มΘΒͳ͍ͳΒɺ ࣗ༝ʹ੾᛭ୖຏ͍͚ͯ͠͹Α͍ w ͦΜͳอূ͸ͳ͍ w

ΩϟογϡҎલʹGFUDIΛݮΒ͢ w GFUDIͨ͠஋͸ͦͷ··ίϯϙʔωϯ τͷඞཁՕॴʹόΠϯσΟ ϯάͯ͠ඳը͢Ε͹े෼ w ίϯϙʔωϯ τ࠶ඳըͰൃੜ͢Δ௨৴͸ϒϥ΢βΛ৴ͯ͡ΨϯΨϯ࣮ߦ w ͦ΋ͦ΋3FBDUࣗମΛΑ

3FDPJM͸͍ͭ࢖͏ͷ͔ w ·ͩग़൪͡Όͳ͍ w (6*ͷද੍ࣔޚ͸useState()Ͱे෼ w ϑ ΥʔϜʹؔͯ͠͸SFBDUIPPLGPSNΛಋೖ   IUUQTSFBDUIPPLGPSNDPN

ͦΕͰ΋Ͳ͏ ͯ͠3FDPJMΛ࢖͏ͷ͔

3FDPJM͕ग़൪ͱͳΔͱ͖ w 1SPQTόέπ Ϧ Ϩʔ͕͋· Γʹ΋සൟͰੜ࢈ੑ ɾ Մಡੑͱ΋ʹ௿ԼΛ࣮ײ͢Δͱ͖ w ଟ͘ͷࢠίϯϙʔωϯ

$POUFYUͷͭΒ͍఺ w 1SPWJEFSλϫʔ͕஀ੜ͢Δ఺ <FooProvider> <BarProvider> <BazProvider> <MainContents /> </BazProvider> </BarProvider>

Ͳ͏ ͯͭ͠Β͍͔ w ୯७ʹՄಡੑ͕Լ͕Δ w 4UPSZCPPLଆͷϝϯςφϯε͕൥ࡶʹͳΔ w ૿͑Ε͹૿͑Δ΄ͲґଘॱΛ೺Ѳ͢Δඞཁ͕͋Δ ˠޓ͍ʹૄͰ͋Γɺ ͔ͭ1SPQTόέπϦ

Α ͏΍͘3FDPJM w $POUFYUΑ Γང͔ʹखܰ w චऀ͸3FDPJMΛ$POUFYUͷ୅༻඼ͱଊ͍͑ͯΔ

3FDPJM4FMFDUPS͸࢖͏ͷ͔ w ࠷ޙ·Ͱ࢖Θͳ͍ w $POUFYUͷ୅༻඼ͱ͍͏ཱͪҐஔͳͷͰ$POUFYUͷ୅༻Ҏ֎ͷ͜ͱ͸͠ͳ͍ wʮ։ൃऀͷग़ೖΓ͕ܹ͍͠νʔϜʯ ͱ͍͏૊৫ߏ଄ʹ͓͍ͯ   3FDPJM4FMFDUPSΛ ʮ͍ͭ࢖͏΂͖Ͱɺ

VTF3FDPJM4UBUF ͷѻ͍ํ w ίϯϙʔωϯ τ಺Ͱ͍͖ͳΓuseRecoilState()Λݺ͹ͳ͍ن໿ʹ͓ͯ͘͠ w useRecoilState()͸ඞͣ΋͏ҰͭͷuseSomething()Ͱϥοϓ͔ͯ͠Βѻ͏ w ཧ༝ w

ੵۃత3FDPJM΋ফۃత3FDPJM΋ΞϦ w චऀ͸ɺ 3FDPJM͕උ͑Δ͋ΒΏΔ"1*Λ׆༻͖ͬͯ͠   3FDPJMલఏͷ࣮૷ΛੵΈॏͶΔελΠϧΛ൱ఆ͠ͳ͍ w ͨͩ͠ຊߨͰ࣮ྫΛ঺հ͢Δ্Ͱɺ ੵۃతಋೖ͸͍ͯ͠ͳ͍ͨΊ

5IBOLZPV