Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

OKUNOKENTARO
January 20, 2023

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

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

OKUNOKENTARO

January 20, 2023
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

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

    w දࣔඇදࣔΛ੾Γସ͑Δ τάϧɺ ΞίʔσΟ ΦϯͳͲ w ϒϥ΢β͝ͱʹهԱ͞ΕΔ ʮ࠷ۙදࣔͨ͠ϖʔδҰཡʯ 
 ͳΜ͔΋ؚ·ΕΔ͔΋͠Εͳ͍ʜ
  2. ঢ়ଶ͸Ͳ͜Ͱ؅ཧ͢Δ ʁ w LocalStorage, SessionStorageɹ w URLSearchParams ʢ63-ΫΤϦจࣈྻʣ ɹ w

    IndexedDBɹ w ঢ়ଶ؅ཧ޲͚"1*΍ϥΠ ϒϥ Ϧ ʢ3FBDU$POUFYU 3FEVY 3FDPJMͳͲʣ  w useState(), useRef() w άϩʔόϧม਺
  3. ঢ়ଶͷଟ͞ΞϓϦέʔγϣϯͷෳࡶ͞ w ঢ়ଶͷଟ͍ΞϓϦέʔγϣϯ͸ෳࡶͰ͋Δ w ͜͜Ͱʜ w ঢ়ଶͷଟ͞දࣔཁૉͷଟ͞ 
 Ͱ͸ͳ͍ ʂ

     w ͦΕ͕%#ʹͯӬଓԽ͞Εͨ΋ͷʹ༝དྷ͢ΔͷͰ͋Ε͹ 
 ͦΕ͸ ʢϑϩϯ τΤϯυจ຺ʹ͓͍ͯʣ ঢ়ଶͰ͸ͳ͍ w αʔόʔ͔Βऔಘ͠ϒϥ΢β্Ͱදࣔ͢Δ ʮݹయత8FCʯ ͦͷ΋ͷͰ͋Δ
  4. 483Λ࢖͏ w όοΫΤϯ υʹͯɺ Ϩεϙϯε ɾ ϔομʹ 
 Cache-Control max-age=300,

    stale-while-revalidate=300 
 Λ෇༩͓ͯ͘͠ w ඵؒ͸ΩϟογϡΛ࢖͏ w ඵҎ্ܦա͍ͯͨ͠Βɺ ͔ͦ͜Βඵؒ͸طଘͷΩϟογϡΛ࢖͍ 
 όοΫΤϯ υ͸৽نΩϟογϡΛੜ੒ w ࣍ͷGFUDIͰ͸࠷৽ͷ΋ͷΛಘΔ w   ඵҎ্ܦա͍ͯͨ͠ΒΩϟογϡΛ࢖Θͣ࠷৽ͷ΋ͷΛಘΔ
  5. ঢ়ଶ؅ཧͱΩϟογϡઓུ͸ҟͳΔ֓೦ w Ωϟογϡઓུ͸ ʮදࣔͷߴ଎Խʯ ΍ ʮϦΫΤε τͷ࡟ݮʹΑΔίε τ࡟ݮʯ  w

    ঢ়ଶ؅ཧ͸ ʮӬଓԽ͞Ε͍ͯͳ͍ϒϥ΢β্ͷม਺ͷهԱͱૢ࡞ʯ  w Ωϟογϡͷ༗ޮੑΛͲ͏΍ͬͯݕূ͢Δ͔ͱ 
 ঢ়ଶͷ૊Έ߹ΘͤΛͲ͏΍ͬͯݕূ͢Δ͔͸ผ֓೦ w ޮ͖໨΋ݕূํ๏΋ҟͳΔ֓೦ͳͷͰࠞͥͳ͍
  6. ΦϨΦϨ࣮૷͸ਓΛஔ͖ڈΓʹ͢Δ w ͔ͭͯ3FEVY5PPMLJU ΦϨΦϨϥούʔ࣮૷Ͱେ૚ͳϦϙδτ Ϧ૚Λ࣮૷ͨ͠ਓ͕͍ͨ w ޙܧऀ͕શવಡΈղ͚ͣɺ ໰୊ղফ΍ػೳ௥Ճʹେۤઓ w ࣮૷ऀ͸νʔϜ͔Βڈ͓ͬͯΓɺ

    ίϛο τϩάͳͲ͔Βಡղ w Ωϟογϡͱͯ͠ͷ଎౓޲্ޮՌ͸͞΄Ͳແ͠ ʢόοΫΤϯ υଆͷΩϟογϡߟྀ͕؁͔ͬͨͨΊʣ  w ͨͩෳࡶͳ3FEVYϞϊ Ϧ ε͕ͦ͜ʹ͋Δʜ ˞ࣄ࣮ʹج͍ͮͨϑΟ ΫγϣϯͰ͢˞3FEVY5PPMLJUࣗମͷੋඇʹ͸ݴٴ͠·ͤΜ
  7. ࢓૊Έͮ͘ Γ͸ΦϯϘʔσΟ ϯάίε τ͔Β w Կ೥΋νʔϜϝϯόʔ͕มΘΒͳ͍ͳΒɺ ࣗ༝ʹ੾᛭ୖຏ͍͚ͯ͠͹Α͍ w ͦΜͳอূ͸ͳ͍ w

    νʔϜϝϯόʔͷग़ೖΓ͕ى͜ΔͷͰ͋Ε͹ 
 ΦϯϘʔσΟ ϯάίε τΛແҋʹ্͛Δͷ͸ಘࡦͱ͸͍͑ͳ͍ 
 ʢචऀ͸डୗઐ໳ͷͨΊɺ ։ൃνʔϜશһ͕ಉ྅ͷΈͱ͍͏ঢ়گ͕ͳ͍ಛघੑʹ΋ΑΔʣ  w νʔϜՃೖ௚ޙ͔Βߴੜ࢈ੑΛൃشͤ͞ΒΕΔ͔ ʁ  w લ೚ऀͷ཭୤Ҏ߱΋ϝϯςφϯεΛҡ࣋Ͱ͖Δ͔ ʁ
  8. 3FDPJM͸͍ͭ࢖͏ͷ͔ w ·ͩग़൪͡Όͳ͍ w (6*ͷද੍ࣔޚ͸useState()Ͱे෼ w ϑ ΥʔϜʹؔͯ͠͸SFBDUIPPLGPSNΛಋೖ 
 IUUQTSFBDUIPPLGPSNDPN

    w ෳ਺ͷϖʔδΛ·͍ͨͰ࢖༻͢Δঢ়ଶ͸URLSearchParamsΛݕ౼͢Δ w ΤϯυϢʔβʹΑͬͯϒοΫϚʔΫ͞Ε͏ Δϖʔδ͔ ʁ  w -*/&ͷΑ ͏ͳϝ οηʔδΞϓϦͰڞ༗͞ΕΔ͔ ʁ  w ϒϥ΢βͷ໭ΔػೳΛซ༻͞Εͨͱ͖ͷ࠶ݱੑΛ༏ઌ͍͔ͨ͠ ʁ
  9. 3FDPJM͕ग़൪ͱͳΔͱ͖ w 1SPQTόέπ Ϧ Ϩʔ͕͋· Γʹ΋සൟͰੜ࢈ੑ ɾ Մಡੑͱ΋ʹ௿ԼΛ࣮ײ͢Δͱ͖ w ଟ͘ͷࢠίϯϙʔωϯ

    τ͕ͲΕ΋ڊେͳ1SPQTΛ͍࣋ͬͯͯ 
 ਌ίϯϙʔωϯ τʹେྔͷuseState()͕ฒΜͰ͠· ͏ Α ͏ͳঢ়گ w 3FBDU$POUFYUͷग़൪ʹͳΓͦ͏ͳશϖʔδશίϯϙʔωϯ τͰڞ༗͢Δ৘ใ͕͋Δͱ͖ w શϖʔδͰຖճಉ͡಺༰ΛGFUDI͢Δͷ͸ 
 ͕͢͞ʹա৒Ͱ͸ͳ͍͔ ʢओ؍ʣ ͱ൑அͰ͖Δͱ͖ w ྫ ɿ ϢʔβʔʹΑΔΧϥʔςʔϚઃఆͳͲɺ $44JO+4্Ͱڞ༗ར༻͍ͨ͠஋ͷऔಘ
  10. 3FDPJM4FMFDUPS͸࢖͏ͷ͔ w ࠷ޙ·Ͱ࢖Θͳ͍ w $POUFYUͷ୅༻඼ͱ͍͏ཱͪҐஔͳͷͰ$POUFYUͷ୅༻Ҏ֎ͷ͜ͱ͸͠ͳ͍ wʮ։ൃऀͷग़ೖΓ͕ܹ͍͠νʔϜʯ ͱ͍͏૊৫ߏ଄ʹ͓͍ͯ 
 3FDPJM4FMFDUPSΛ ʮ͍ͭ࢖͏΂͖Ͱɺ

    ͍ͭ࢖ͬͯ͸ͳΒͳ͍͔ʯ ͷ 
 ϧʔϧप஌͕ࠔ೉ͱ൑அ w useCallback(), useMemo()͸Ұൠతͳ3FBDUεΩϧͱ͍͏ѻ͍Ͱ 
 प஌ͤͣʹڞ௨ೝࣝΛಘ΍͍͢ w ςε τʹ͸3FBDU5FTUJOH-JCSBSZΛ࠾༻ 
 IUUQTUFTUJOHMJCSBSZDPN
  11. VTF3FDPJM4UBUF ͷѻ͍ํ w ίϯϙʔωϯ τ಺Ͱ͍͖ͳΓuseRecoilState()Λݺ͹ͳ͍ن໿ʹ͓ͯ͘͠ w useRecoilState()͸ඞͣ΋͏ҰͭͷuseSomething()Ͱϥοϓ͔ͯ͠Βѻ͏ w ཧ༝ w

    useRecoilState()ͷ஋Λѻ͏ॲཧͷςε τΛίϯϙʔωϯ τແ͠ʹ࣮ࢪ͢ΔͨΊ w ίϯϙʔωϯ τͷςε τʹ͓͚ΔϞοΫ஫ೖʹ3FDPJMͷґଘΛؚΊͳ͍ͨΊ w Ͳ͔͜ΒͰ΋ݺ΂ͳ͍Α ͏ʹ@packageΛ෇͚Δ 
 IUUQTHJUIVCDPNVIZPFTMJOUQMVHJOJNQPSUBDDFTT