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. ͦΕͰ΋Ͳ͏
    ͯ͠3FDPJMΛ࢖͏ͷ͔
    +BO )BSBKVLVUT.FFUVQ3FDPJMͷࣄྫूΊ·ͨ͠
    !PLVOPLFOUBSP

    View full-size slide


  2. w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP
    w ΫϨε΢ΣΞגࣜձࣾ
    w 5ZQF4DSJQUྺ೥
    w ϑϩϯ
    τΤϯ
    υ
    ɾ
    όοΫΤϯ
    υ

    View full-size slide

  3. 3FDPJMΛੵۃతʹ࢖Θͳ͍࿩Λ͠·͢

    View full-size slide

  4. ΈΜͳঢ়ଶΛ؅ཧ͍ͨ͠
    ʁ
    w ঢ়ଶͷଟ͞͸ݕূΛࠔ೉ʹ͢Δ
    w ૊Έ߹Θͤͷֻ͚ࢉͰݕূ߲໨͕૿͑Δͱ
    w ݕূ࿙ΕͷϦ
    εΫ
    ˠ඼࣭ҡ࣋ͷ໘Ͱෆར
    w ঢ়ଶ͸ۃྗ؅ཧͨ͘͠ͳ͍
    w ϒϥ΢β͸৘ใΛදࣔ͢ΔͷΈɺ
    ঢ়ଶθϩ
    ʂ
    ˡ͜
    ͏͋Ε͹γϯϓϧ

    View full-size slide

  5. ঢ়ଶͱ͸
    w ϢʔβͷϩάΠϯ
    ɾ
    ηογϣϯͳͲೝূ৘ใ
    w ϑ
    ΥʔϜͷೖྗ஋
    w (6*ͷදࣔঢ়گ
    w දࣔඇදࣔΛ੾Γସ͑Δ
    τάϧɺ
    ΞίʔσΟ
    ΦϯͳͲ
    w ϒϥ΢β͝ͱʹهԱ͞ΕΔ
    ʮ࠷ۙදࣔͨ͠ϖʔδҰཡʯ

    ͳΜ͔΋ؚ·ΕΔ͔΋͠Εͳ͍ʜ

    View full-size slide

  6. ঢ়ଶ͸Ͳ͜Ͱ؅ཧ͢Δ
    ʁ
    w LocalStorage, SessionStorageɹ


    w URLSearchParams
    ʢ63-ΫΤϦจࣈྻʣ
    ɹ
    w IndexedDBɹ
    w ঢ়ଶ؅ཧ޲͚"1*΍ϥΠ
    ϒϥ
    Ϧ
    ʢ3FBDU$POUFYU 3FEVY 3FDPJMͳͲʣ

    w useState(), useRef()
    w άϩʔόϧม਺

    View full-size slide

  7. ঢ়ଶͷଟ͞ΞϓϦέʔγϣϯͷෳࡶ͞
    w ঢ়ଶͷଟ͍ΞϓϦέʔγϣϯ͸ෳࡶͰ͋Δ
    w ͜͜Ͱʜ
    w ঢ়ଶͷଟ͞දࣔཁૉͷଟ͞

    Ͱ͸ͳ͍
    ʂ

    w ͦΕ͕%#ʹͯӬଓԽ͞Εͨ΋ͷʹ༝དྷ͢ΔͷͰ͋Ε͹

    ͦΕ͸
    ʢϑϩϯ
    τΤϯυจ຺ʹ͓͍ͯʣ
    ঢ়ଶͰ͸ͳ͍
    w αʔόʔ͔Βऔಘ͠ϒϥ΢β্Ͱදࣔ͢Δ
    ʮݹయత8FCʯ
    ͦͷ΋ͷͰ͋Δ

    View full-size slide

  8. ঢ়ଶ؅ཧΩϟογϡ؅ཧͰ͸ͳ͍
    w ঢ়ଶ؅ཧͷ֓೦ͱΩϟογϡͷ֓೦Λࠞͥͳ͍
    w ঢ়ଶ؅ཧϥΠ
    ϒϥ
    Ϧ͸ɺ
    GFUDIͨ͠৘ใͷஔ͖৔Ͱ͸ͳ͍
    w ͳ͔ͥGFUDIͨ͠Βɺ
    ·ͣϨεϙϯεΛঢ়ଶ؅ཧϥΠ
    ϒϥ
    Ϧʹε
    τΞ͕ͪ͠

    View full-size slide

  9. IUUQTTXSWFSDFMBQQ

    View full-size slide

  10. 483Λ࢖͏
    w όοΫΤϯ
    υʹͯɺ
    Ϩεϙϯε
    ɾ
    ϔομʹ

    Cache-Control max-age=300, stale-while-revalidate=300

    Λ෇༩͓ͯ͘͠
    w ඵؒ͸ΩϟογϡΛ࢖͏
    w ඵҎ্ܦա͍ͯͨ͠Βɺ
    ͔ͦ͜Βඵؒ͸طଘͷΩϟογϡΛ࢖͍

    όοΫΤϯ
    υ͸৽نΩϟογϡΛੜ੒
    w ࣍ͷGFUDIͰ͸࠷৽ͷ΋ͷΛಘΔ
    w
    ඵҎ্ܦա͍ͯͨ͠ΒΩϟογϡΛ࢖Θͣ࠷৽ͷ΋ͷΛಘΔ

    View full-size slide

  11. ࢥߟఀࢭͰΦϨΦϨΩϟογϡΛ࣮૷͠ͳ͍
    w GFUDIͨ݁͠ՌΛ
    ʮͱ
    Γ͋͑ͣ3FEVY΍3FDPJMʹೖΕΔʯ
    Λ΍ΊΔ
    w ࢥߟఀࢭͰ؅ཧ͢΂͖ঢ়ଶΛ૿΍͞ͳ͍
    w Ͳ͏ͤࢥߟఀࢭ͢ΔͳΒ
    ʮࢥߟఀࢭͯ͠ϒϥ΢βͷΩϟογϡʹ਎ΛҕͶΔʯ
    ΄͏͕Ϛγ
    w ͦ΋ͦ΋ࢥߟఀࢭ͠ͳ͍

    View full-size slide

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

    w ঢ়ଶ؅ཧ͸
    ʮӬଓԽ͞Ε͍ͯͳ͍ϒϥ΢β্ͷม਺ͷهԱͱૢ࡞ʯ

    w Ωϟογϡͷ༗ޮੑΛͲ͏΍ͬͯݕূ͢Δ͔ͱ

    ঢ়ଶͷ૊Έ߹ΘͤΛͲ͏΍ͬͯݕূ͢Δ͔͸ผ֓೦
    w ޮ͖໨΋ݕূํ๏΋ҟͳΔ֓೦ͳͷͰࠞͥͳ͍

    View full-size slide

  13. ΦϨΦϨ࣮૷͸ਓΛஔ͖ڈΓʹ͢Δ
    w ͔ͭͯ3FEVY5PPMLJUΦϨΦϨϥούʔ࣮૷Ͱେ૚ͳϦϙδτ
    Ϧ૚Λ࣮૷ͨ͠ਓ͕͍ͨ
    w ޙܧऀ͕શવಡΈղ͚ͣɺ
    ໰୊ղফ΍ػೳ௥Ճʹେۤઓ
    w ࣮૷ऀ͸νʔϜ͔Βڈ͓ͬͯΓɺ
    ίϛο
    τϩάͳͲ͔Βಡղ
    w Ωϟογϡͱͯ͠ͷ଎౓޲্ޮՌ͸͞΄Ͳແ͠
    ʢόοΫΤϯ
    υଆͷΩϟογϡߟྀ͕؁͔ͬͨͨΊʣ

    w ͨͩෳࡶͳ3FEVYϞϊ
    Ϧ
    ε͕ͦ͜ʹ͋Δʜ
    ˞ࣄ࣮ʹج͍ͮͨϑΟ
    ΫγϣϯͰ͢˞3FEVY5PPMLJUࣗମͷੋඇʹ͸ݴٴ͠·ͤΜ

    View full-size slide

  14. ࢓૊Έͮ͘
    Γ͸ΦϯϘʔσΟ
    ϯάίε
    τ͔Β
    w Կ೥΋νʔϜϝϯόʔ͕มΘΒͳ͍ͳΒɺ
    ࣗ༝ʹ੾᛭ୖຏ͍͚ͯ͠͹Α͍
    w ͦΜͳอূ͸ͳ͍
    w νʔϜϝϯόʔͷग़ೖΓ͕ى͜ΔͷͰ͋Ε͹

    ΦϯϘʔσΟ
    ϯάίε
    τΛແҋʹ্͛Δͷ͸ಘࡦͱ͸͍͑ͳ͍

    ʢචऀ͸डୗઐ໳ͷͨΊɺ
    ։ൃνʔϜશһ͕ಉ྅ͷΈͱ͍͏ঢ়گ͕ͳ͍ಛघੑʹ΋ΑΔʣ

    w νʔϜՃೖ௚ޙ͔Βߴੜ࢈ੑΛൃشͤ͞ΒΕΔ͔
    ʁ

    w લ೚ऀͷ཭୤Ҏ߱΋ϝϯςφϯεΛҡ࣋Ͱ͖Δ͔
    ʁ

    View full-size slide

  15. ΩϟογϡҎલʹGFUDIΛݮΒ͢
    w GFUDIͨ͠஋͸ͦͷ··ίϯϙʔωϯ
    τͷඞཁՕॴʹόΠϯσΟ
    ϯάͯ͠ඳը͢Ε͹े෼
    w ίϯϙʔωϯ
    τ࠶ඳըͰൃੜ͢Δ௨৴͸ϒϥ΢βΛ৴ͯ͡ΨϯΨϯ࣮ߦ
    w ͦ΋ͦ΋3FBDUࣗମΛΑ
    ֶ͘श͠ɺ
    ৑௕ͳίϯϙʔωϯ
    τ࠶ඳըΛݮΒ͢౒ྗΛ͢Δ
    w ςε
    τʹ͸.48Λ࠾༻

    IUUQTNTXKTJP

    View full-size slide

  16. 3FDPJM͸͍ͭ࢖͏ͷ͔
    w ·ͩग़൪͡Όͳ͍
    w (6*ͷද੍ࣔޚ͸useState()Ͱे෼
    w ϑ
    ΥʔϜʹؔͯ͠͸SFBDUIPPLGPSNΛಋೖ

    IUUQTSFBDUIPPLGPSNDPN
    w ෳ਺ͷϖʔδΛ·͍ͨͰ࢖༻͢Δঢ়ଶ͸URLSearchParamsΛݕ౼͢Δ
    w ΤϯυϢʔβʹΑͬͯϒοΫϚʔΫ͞Ε͏
    Δϖʔδ͔
    ʁ

    w -*/&ͷΑ
    ͏ͳϝ
    οηʔδΞϓϦͰڞ༗͞ΕΔ͔
    ʁ

    w ϒϥ΢βͷ໭ΔػೳΛซ༻͞Εͨͱ͖ͷ࠶ݱੑΛ༏ઌ͍͔ͨ͠
    ʁ

    View full-size slide

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

    View full-size slide

  18. 3FDPJM͕ग़൪ͱͳΔͱ͖
    w 1SPQTόέπ
    Ϧ
    Ϩʔ͕͋·
    Γʹ΋සൟͰੜ࢈ੑ
    ɾ
    Մಡੑͱ΋ʹ௿ԼΛ࣮ײ͢Δͱ͖
    w ଟ͘ͷࢠίϯϙʔωϯ
    τ͕ͲΕ΋ڊେͳ1SPQTΛ͍࣋ͬͯͯ

    ਌ίϯϙʔωϯ
    τʹେྔͷuseState()͕ฒΜͰ͠·
    ͏
    Α
    ͏ͳঢ়گ
    w 3FBDU$POUFYUͷग़൪ʹͳΓͦ͏ͳશϖʔδશίϯϙʔωϯ
    τͰڞ༗͢Δ৘ใ͕͋Δͱ͖
    w શϖʔδͰຖճಉ͡಺༰ΛGFUDI͢Δͷ͸

    ͕͢͞ʹա৒Ͱ͸ͳ͍͔
    ʢओ؍ʣ
    ͱ൑அͰ͖Δͱ͖
    w ྫ
    ɿ
    ϢʔβʔʹΑΔΧϥʔςʔϚઃఆͳͲɺ
    $44JO+4্Ͱڞ༗ར༻͍ͨ͠஋ͷऔಘ

    View full-size slide

  19. $POUFYUͷͭΒ͍఺
    w 1SPWJEFSλϫʔ͕஀ੜ͢Δ఺



















    ग़యIUUQT[FOOEFWVIZPBSUJDMFTQSPWJEFSUPXFSUPSFDPJM

    View full-size slide

  20. Ͳ͏
    ͯͭ͠Β͍͔
    w ୯७ʹՄಡੑ͕Լ͕Δ
    w 4UPSZCPPLଆͷϝϯςφϯε͕൥ࡶʹͳΔ
    w ૿͑Ε͹૿͑Δ΄ͲґଘॱΛ೺Ѳ͢Δඞཁ͕͋Δ
    ˠޓ͍ʹૄͰ͋Γɺ
    ͔ͭ1SPQTόέπϦ
    ϨʔΛ؆ུԽ͢Δঢ়ଶऔಘͷखஈ͕ཉ͘͠ͳΔ

    View full-size slide

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

    View full-size slide

  22. 3FDPJM4FMFDUPS͸࢖͏ͷ͔
    w ࠷ޙ·Ͱ࢖Θͳ͍
    w $POUFYUͷ୅༻඼ͱ͍͏ཱͪҐஔͳͷͰ$POUFYUͷ୅༻Ҏ֎ͷ͜ͱ͸͠ͳ͍
    wʮ։ൃऀͷग़ೖΓ͕ܹ͍͠νʔϜʯ
    ͱ͍͏૊৫ߏ଄ʹ͓͍ͯ

    3FDPJM4FMFDUPSΛ
    ʮ͍ͭ࢖͏΂͖Ͱɺ
    ͍ͭ࢖ͬͯ͸ͳΒͳ͍͔ʯ
    ͷ

    ϧʔϧप஌͕ࠔ೉ͱ൑அ
    w useCallback(), useMemo()͸Ұൠతͳ3FBDUεΩϧͱ͍͏ѻ͍Ͱ

    प஌ͤͣʹڞ௨ೝࣝΛಘ΍͍͢
    w ςε
    τʹ͸3FBDU5FTUJOH-JCSBSZΛ࠾༻

    IUUQTUFTUJOHMJCSBSZDPN

    View full-size slide

  23. VTF3FDPJM4UBUF
    ͷѻ͍ํ
    w ίϯϙʔωϯ
    τ಺Ͱ͍͖ͳΓuseRecoilState()Λݺ͹ͳ͍ن໿ʹ͓ͯ͘͠
    w useRecoilState()͸ඞͣ΋͏ҰͭͷuseSomething()Ͱϥοϓ͔ͯ͠Βѻ͏
    w ཧ༝
    w useRecoilState()ͷ஋Λѻ͏ॲཧͷςε
    τΛίϯϙʔωϯ
    τແ͠ʹ࣮ࢪ͢ΔͨΊ
    w ίϯϙʔωϯ
    τͷςε
    τʹ͓͚ΔϞοΫ஫ೖʹ3FDPJMͷґଘΛؚΊͳ͍ͨΊ
    w Ͳ͔͜ΒͰ΋ݺ΂ͳ͍Α
    ͏ʹ@packageΛ෇͚Δ

    IUUQTHJUIVCDPNVIZPFTMJOUQMVHJOJNQPSUBDDFTT

    View full-size slide

  24. ੵۃత3FDPJM΋ফۃత3FDPJM΋ΞϦ
    w චऀ͸ɺ
    3FDPJM͕උ͑Δ͋ΒΏΔ"1*Λ׆༻͖ͬͯ͠

    3FDPJMલఏͷ࣮૷ΛੵΈॏͶΔελΠϧΛ൱ఆ͠ͳ͍
    w ͨͩ͠ຊߨͰ࣮ྫΛ঺հ͢Δ্Ͱɺ
    ੵۃతಋೖ͸͍ͯ͠ͳ͍ͨΊ

    $POUFYUͷ୅༻ࢭ·
    Γ
    ͱ͍͏ফۃతಋೖͷ঺հͱͳͬͨ
    w 3FDPJM͸3FBDUͷᙱ͍ͱ͜ΖΛ͔͚ΔϥΠ
    ϒϥ
    ϦͰ͋Δ͜ͱʹ͸ҧ͍ͳ͍

    View full-size slide