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

2023年1月20日 Harajuku.ts Meetup 〜 Recoilの事例集めました〜 にて発表した資料です。

Transcript

1. ͦΕͰ΋Ͳ͏ ͯ͠3FDPJMΛ࢖͏ͷ͔ +BO
   
   
   
   )BSBKVLVUT
   .FFUVQ
   
   3FDPJMͷࣄྫूΊ·ͨ͠
   !PLVOPLFOUBSP
2. ୭ w Ԟ໺
   ݡଠ࿠
   !PLVOPLFOUBSP
   w ΫϨε΢ΣΞגࣜձࣾ
   w 5ZQF4DSJQUྺ೥
   w ϑϩϯ τΤϯ υ ɾ όοΫΤϯ υ
3. 3FDPJMΛੵۃతʹ࢖Θͳ͍࿩Λ͠·͢
4. ΈΜͳঢ়ଶΛ؅ཧ͍ͨ͠ ʁ w ঢ়ଶͷଟ͞͸ݕূΛࠔ೉ʹ͢Δ
   w ૊Έ߹Θͤͷֻ͚ࢉͰݕূ߲໨͕૿͑Δͱ
   w ݕূ࿙ΕͷϦ εΫ
   ˠ
   ඼࣭ҡ࣋ͷ໘Ͱෆར
   w ঢ়ଶ͸ۃྗ؅ཧͨ͘͠ͳ͍
   w ϒϥ΢β͸৘ใΛදࣔ͢ΔͷΈɺ ঢ়ଶθϩ ʂ
   ˡ
   ͜ ͏͋Ε͹γϯϓϧ
5. ঢ়ଶͱ͸ w ϢʔβͷϩάΠϯ ɾ ηογϣϯͳͲೝূ৘ใ
   w ϑ ΥʔϜͷೖྗ஋
   w (6*ͷදࣔঢ়گ
   w දࣔඇදࣔΛ੾Γସ͑Δ τάϧɺ ΞίʔσΟ ΦϯͳͲ
   w ϒϥ΢β͝ͱʹهԱ͞ΕΔ ʮ࠷ۙදࣔͨ͠ϖʔδҰཡʯ 
 ͳΜ͔΋ؚ·ΕΔ͔΋͠Εͳ͍ʜ
6. ঢ়ଶ͸Ͳ͜Ͱ؅ཧ͢Δ ʁ w LocalStorage, SessionStorageɹ w URLSearchParams
   ʢ63-ΫΤϦจࣈྻʣ ɹ
   w IndexedDBɹ
   w ঢ়ଶ؅ཧ޲͚"1*΍ϥΠ ϒϥ Ϧ
   ʢ3FBDU
   $POUFYU
   3FEVY
   3FDPJMͳͲʣ
   w useState(), useRef()
   
   w άϩʔόϧม਺
7. ঢ়ଶͷଟ͞
   
   ΞϓϦέʔγϣϯͷෳࡶ͞ w ঢ়ଶͷଟ͍ΞϓϦέʔγϣϯ͸ෳࡶͰ͋Δ
   w ͜͜Ͱʜ
   w ঢ়ଶͷଟ͞
   
   දࣔཁૉͷଟ͞ 
 Ͱ͸ͳ͍ ʂ
   w ͦΕ͕%#ʹͯӬଓԽ͞Εͨ΋ͷʹ༝དྷ͢ΔͷͰ͋Ε͹ 
 ͦΕ͸ ʢϑϩϯ τΤϯυจ຺ʹ͓͍ͯʣ ঢ়ଶͰ͸ͳ͍
   w αʔόʔ͔Βऔಘ͠ϒϥ΢β্Ͱදࣔ͢Δ ʮݹయత8FCʯ ͦͷ΋ͷͰ͋Δ
8. ঢ়ଶ؅ཧ
   
   Ωϟογϡ؅ཧͰ͸ͳ͍ w ঢ়ଶ؅ཧͷ֓೦ͱΩϟογϡͷ֓೦Λࠞͥͳ͍
   w ঢ়ଶ؅ཧϥΠ ϒϥ Ϧ͸ɺ GFUDIͨ͠৘ใͷஔ͖৔Ͱ͸ͳ͍
   w ͳ͔ͥGFUDIͨ͠Βɺ ·ͣϨεϙϯεΛঢ়ଶ؅ཧϥΠ ϒϥ Ϧʹε τΞ͕ͪ͠
9. IUUQTTXSWFSDFMBQQ
10. 483Λ࢖͏ w όοΫΤϯ υʹͯɺ Ϩεϙϯε ɾ ϔομʹ 
 Cache-Control max-age=300, stale-while-revalidate=300 
 Λ෇༩͓ͯ͘͠
    w ඵؒ͸ΩϟογϡΛ࢖͏
    w ඵҎ্ܦա͍ͯͨ͠Βɺ ͔ͦ͜Βඵؒ͸طଘͷΩϟογϡΛ࢖͍ 
 όοΫΤϯ υ͸৽نΩϟογϡΛੜ੒
    w ࣍ͷGFUDIͰ͸࠷৽ͷ΋ͷΛಘΔ
    w 
    
     ඵҎ্ܦա͍ͯͨ͠ΒΩϟογϡΛ࢖Θͣ࠷৽ͷ΋ͷΛಘΔ
11. ࢥߟఀࢭͰΦϨΦϨΩϟογϡΛ࣮૷͠ͳ͍ w GFUDIͨ݁͠ՌΛ ʮͱ Γ͋͑ͣ3FEVY΍3FDPJMʹೖΕΔʯ Λ΍ΊΔ
    w ࢥߟఀࢭͰ؅ཧ͢΂͖ঢ়ଶΛ૿΍͞ͳ͍
    w Ͳ͏ͤࢥߟఀࢭ͢ΔͳΒ ʮࢥߟఀࢭͯ͠ϒϥ΢βͷΩϟογϡʹ਎ΛҕͶΔʯ ΄͏͕Ϛγ
    w ͦ΋ͦ΋ࢥߟఀࢭ͠ͳ͍
12. ঢ়ଶ؅ཧͱΩϟογϡઓུ͸ҟͳΔ֓೦ w Ωϟογϡઓུ͸ ʮදࣔͷߴ଎Խʯ ΍ ʮϦΫΤε τͷ࡟ݮʹΑΔίε τ࡟ݮʯ
    w ঢ়ଶ؅ཧ͸ ʮӬଓԽ͞Ε͍ͯͳ͍ϒϥ΢β্ͷม਺ͷهԱͱૢ࡞ʯ
    w Ωϟογϡͷ༗ޮੑΛͲ͏΍ͬͯݕূ͢Δ͔ͱ 
 ঢ়ଶͷ૊Έ߹ΘͤΛͲ͏΍ͬͯݕূ͢Δ͔͸ผ֓೦
    w ޮ͖໨΋ݕূํ๏΋ҟͳΔ֓೦ͳͷͰࠞͥͳ͍
13. ΦϨΦϨ࣮૷͸ਓΛஔ͖ڈΓʹ͢Δ w ͔ͭͯ3FEVY
    5PPMLJU
    
    ΦϨΦϨϥούʔ࣮૷Ͱେ૚ͳϦϙδτ Ϧ૚Λ࣮૷ͨ͠ਓ͕͍ͨ
    w ޙܧऀ͕શવಡΈղ͚ͣɺ ໰୊ղফ΍ػೳ௥Ճʹେۤઓ
    w ࣮૷ऀ͸νʔϜ͔Βڈ͓ͬͯΓɺ ίϛο τϩάͳͲ͔Βಡղ
    w Ωϟογϡͱͯ͠ͷ଎౓޲্ޮՌ͸͞΄Ͳແ͠ ʢόοΫΤϯ υଆͷΩϟογϡߟྀ͕؁͔ͬͨͨΊʣ
    w ͨͩෳࡶͳ3FEVYϞϊ Ϧ ε͕ͦ͜ʹ͋Δʜ ˞ࣄ࣮ʹج͍ͮͨϑΟ ΫγϣϯͰ͢
    ˞3FEVY
    5PPMLJUࣗମͷੋඇʹ͸ݴٴ͠·ͤΜ
14. ࢓૊Έͮ͘ Γ͸ΦϯϘʔσΟ ϯάίε τ͔Β w Կ೥΋νʔϜϝϯόʔ͕มΘΒͳ͍ͳΒɺ ࣗ༝ʹ੾᛭ୖຏ͍͚ͯ͠͹Α͍
    w ͦΜͳอূ͸ͳ͍
    w νʔϜϝϯόʔͷग़ೖΓ͕ى͜ΔͷͰ͋Ε͹ 
 ΦϯϘʔσΟ ϯάίε τΛແҋʹ্͛Δͷ͸ಘࡦͱ͸͍͑ͳ͍ 
 ʢචऀ͸डୗઐ໳ͷͨΊɺ ։ൃνʔϜશһ͕ಉ྅ͷΈͱ͍͏ঢ়گ͕ͳ͍ಛघੑʹ΋ΑΔʣ
    w νʔϜՃೖ௚ޙ͔Βߴੜ࢈ੑΛൃشͤ͞ΒΕΔ͔ ʁ
    w લ೚ऀͷ཭୤Ҏ߱΋ϝϯςφϯεΛҡ࣋Ͱ͖Δ͔ ʁ
15. ΩϟογϡҎલʹGFUDIΛݮΒ͢ w GFUDIͨ͠஋͸ͦͷ··ίϯϙʔωϯ τͷඞཁՕॴʹόΠϯσΟ ϯάͯ͠ඳը͢Ε͹े෼
    w ίϯϙʔωϯ τ࠶ඳըͰൃੜ͢Δ௨৴͸ϒϥ΢βΛ৴ͯ͡ΨϯΨϯ࣮ߦ
    w ͦ΋ͦ΋3FBDUࣗମΛΑ ֶ͘श͠ɺ ৑௕ͳίϯϙʔωϯ τ࠶ඳըΛݮΒ͢౒ྗΛ͢Δ
    w ςε τʹ͸.48Λ࠾༻ 
 IUUQTNTXKTJP
16. 3FDPJM͸͍ͭ࢖͏ͷ͔ w ·ͩग़൪͡Όͳ͍
    w (6*ͷද੍ࣔޚ͸useState()Ͱे෼
    w ϑ ΥʔϜʹؔͯ͠͸SFBDUIPPLGPSNΛಋೖ 
 IUUQTSFBDUIPPLGPSNDPN
    w ෳ਺ͷϖʔδΛ·͍ͨͰ࢖༻͢Δঢ়ଶ͸URLSearchParamsΛݕ౼͢Δ
    w ΤϯυϢʔβʹΑͬͯϒοΫϚʔΫ͞Ε͏ Δϖʔδ͔ ʁ
    w -*/&ͷΑ ͏ͳϝ οηʔδΞϓϦͰڞ༗͞ΕΔ͔ ʁ
    w ϒϥ΢βͷ໭ΔػೳΛซ༻͞Εͨͱ͖ͷ࠶ݱੑΛ༏ઌ͍͔ͨ͠ ʁ
17. ͦΕͰ΋Ͳ͏ ͯ͠3FDPJMΛ࢖͏ͷ͔
18. 3FDPJM͕ग़൪ͱͳΔͱ͖ w 1SPQTόέπ Ϧ Ϩʔ͕͋· Γʹ΋සൟͰੜ࢈ੑ ɾ Մಡੑͱ΋ʹ௿ԼΛ࣮ײ͢Δͱ͖
    w ଟ͘ͷࢠίϯϙʔωϯ τ͕ͲΕ΋ڊେͳ1SPQTΛ͍࣋ͬͯͯ 
 ਌ίϯϙʔωϯ τʹେྔͷuseState()͕ฒΜͰ͠· ͏ Α ͏ͳঢ়گ
    w 3FBDU
    $POUFYUͷग़൪ʹͳΓͦ͏ͳશϖʔδશίϯϙʔωϯ τͰڞ༗͢Δ৘ใ͕͋Δͱ͖
    w શϖʔδͰຖճಉ͡಺༰ΛGFUDI͢Δͷ͸ 
 ͕͢͞ʹա৒Ͱ͸ͳ͍͔ ʢओ؍ʣ ͱ൑அͰ͖Δͱ͖
    w ྫ ɿ
    ϢʔβʔʹΑΔΧϥʔςʔϚઃఆͳͲɺ $44JO+4্Ͱڞ༗ར༻͍ͨ͠஋ͷऔಘ
19. $POUFYUͷͭΒ͍఺ w 1SPWJEFSλϫʔ͕஀ੜ͢Δ఺ <FooProvider> <BarProvider> <BazProvider> <MainContents /> </BazProvider> </BarProvider> </FooProvider> ग़య
    IUUQT[FOOEFWVIZPBSUJDMFTQSPWJEFSUPXFSUPSFDPJM
20. Ͳ͏ ͯͭ͠Β͍͔ w ୯७ʹՄಡੑ͕Լ͕Δ
    w 4UPSZCPPLଆͷϝϯςφϯε͕൥ࡶʹͳΔ
    w ૿͑Ε͹૿͑Δ΄ͲґଘॱΛ೺Ѳ͢Δඞཁ͕͋Δ
    ˠ
    ޓ͍ʹૄͰ͋Γɺ ͔ͭ1SPQTόέπϦ ϨʔΛ؆ུԽ͢Δঢ়ଶऔಘͷखஈ͕ཉ͘͠ͳΔ
21. Α ͏΍͘3FDPJM w $POUFYUΑ Γང͔ʹखܰ
    w චऀ͸3FDPJMΛ$POUFYUͷ୅༻඼ͱଊ͍͑ͯΔ
22. 3FDPJM
    4FMFDUPS͸࢖͏ͷ͔ w ࠷ޙ·Ͱ࢖Θͳ͍
    w $POUFYUͷ୅༻඼ͱ͍͏ཱͪҐஔͳͷͰ$POUFYUͷ୅༻Ҏ֎ͷ͜ͱ͸͠ͳ͍
    wʮ։ൃऀͷग़ೖΓ͕ܹ͍͠νʔϜʯ ͱ͍͏૊৫ߏ଄ʹ͓͍ͯ 
 3FDPJM
    4FMFDUPSΛ ʮ͍ͭ࢖͏΂͖Ͱɺ ͍ͭ࢖ͬͯ͸ͳΒͳ͍͔ʯ ͷ 
 ϧʔϧप஌͕ࠔ೉ͱ൑அ
    w useCallback(), useMemo()͸Ұൠతͳ3FBDUεΩϧͱ͍͏ѻ͍Ͱ 
 प஌ͤͣʹڞ௨ೝࣝΛಘ΍͍͢
    w ςε τʹ͸3FBDU
    5FTUJOH
    -JCSBSZΛ࠾༻ 
 IUUQTUFTUJOHMJCSBSZDPN
23. VTF3FDPJM4UBUF ͷѻ͍ํ w ίϯϙʔωϯ τ಺Ͱ͍͖ͳΓuseRecoilState()Λݺ͹ͳ͍ن໿ʹ͓ͯ͘͠
    w useRecoilState()͸ඞͣ΋͏ҰͭͷuseSomething()Ͱϥοϓ͔ͯ͠Βѻ͏
    w ཧ༝
    w useRecoilState()ͷ஋Λѻ͏ॲཧͷςε τΛίϯϙʔωϯ τແ͠ʹ࣮ࢪ͢ΔͨΊ
    w ίϯϙʔωϯ τͷςε τʹ͓͚ΔϞοΫ஫ೖʹ3FDPJMͷґଘΛؚΊͳ͍ͨΊ
    w Ͳ͔͜ΒͰ΋ݺ΂ͳ͍Α ͏ʹ@packageΛ෇͚Δ 
 IUUQTHJUIVCDPNVIZPFTMJOUQMVHJOJNQPSUBDDFTT
24. ੵۃత3FDPJM΋ফۃత3FDPJM΋ΞϦ w චऀ͸ɺ 3FDPJM͕උ͑Δ͋ΒΏΔ"1*Λ׆༻͖ͬͯ͠ 
 3FDPJMલఏͷ࣮૷ΛੵΈॏͶΔελΠϧΛ൱ఆ͠ͳ͍
    w ͨͩ͠ຊߨͰ࣮ྫΛ঺հ͢Δ্Ͱɺ ੵۃతಋೖ͸͍ͯ͠ͳ͍ͨΊ 
 $POUFYUͷ୅༻ࢭ· Γ ͱ͍͏ফۃతಋೖͷ঺հͱͳͬͨ
    w 3FDPJM͸3FBDUͷᙱ͍ͱ͜ΖΛ͔͚ΔϥΠ ϒϥ ϦͰ͋Δ͜ͱʹ͸ҧ͍ͳ͍
25. 5IBOL
    ZPV