Jōtaiではじめる 超軽量 React.jsステート管理

Gunma.web #44

Transcript

1. JōtaiͰ͸͡ΊΔ ௒ܰྔ React.jsεςʔτ؅ཧ Super lightweight and primitive state management for React.js Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @ Online Tsubasa SEKIGUCHI
2. TinyKitten Freelance frontend engineer I 💖 OSS & Cat🐈 Born in Gunma🐴 Live in Tokyo🗼
3. Tsubasa SEKIGUCHI ౎಺Λڌ఺ͱ͢Δ܈അݝલڮࢢੜ·ΕͷϑϦʔϥϯεͷ
 ϑϩϯτΤϯυΤϯδχΞɻ ͖ͬͨΜͱݺ͹Ε͍ͯ·͢ɻ ͪͳΈʹࠓ೔26ࡀʹͳΓ·ͨ͠ɻ
4. ಺෦ςελʔืूத TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
5. ͸͡Ίʹ օ༷͸ʜ
   React.jsͷεςʔτ؅ཧɺͲ͏ͯ͠·͔͢ʁ
   ๻͸RecoilΛओʹ࢖͍ͬͯ·͢ɻ
6. ͸͡Ίʹ ࠓճͷεϥΠυͰ͸
   Jōtaiͱ͍͏εςʔτ؅ཧϥΠϒϥϦ 
 ʹ͍ͭͯ࿩͠·͢ɻ
7. JōtaiͬͯԿʁ ฏͨ͘ݴ͏ͱʜ
   ϓϦϛςΟϒ͔ͭॊೈͳ
   React.js༻
   εςʔτ؅ཧϥΠϒϥϦ
   ൃԻ͸
   joe-tie
   ͱ೔ຊޠͱಉ͡Ͱ͢ɻ
8. ެࣜͷઆ໌͔ΒҾ༻͢Δͱʜ
    ϘτϜΞοϓɾΞϓϩʔνͷεςʔτϚωʔδϝϯτ
    Recoil͔ΒΠϯεύΠΞ͞ΕͨAtomicͳϞσϧ
    TypeScriptࢤ޲ͷඇৗʹϛχϚϧͳAPIΛ࣋ͭ JōtaiͬͯԿʁ
9. JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ Pros.
10. όϯυϧαΠζ͸ʜ
    Mini fi ed 8.1kB Mini fi ed + Gzipped 3.2kB JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/jotai@1.5.3
11. ҰํRecoil͸ʜ
    Mini fi ed 72.3kB Mini fi ed + Gzipped 21.1kB JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/recoil@0.5.2
12. JōtaiΛ࢖͏ͱʜ
    Mini fi ed 64.2kB Mini fi ed + Gzipped 17.9kB ͷ࡟ݮ͕Ͱ͖·͢ 0KB 20KB 40KB 60KB 80KB Mini fi ed Gzipped Recoil Jōtai JōtaiΛ࢖͏ͱԿ͕خ͍͔͠
13. ΄͔ʹ΋͜ΜͳϢʔςΟϦςΟ(jotai/utils)͕͋Γ·͢
     localStorageͰatom(state)ͷӬଓԽ
     SSRಋೖ࣌ͷϋΠυϨʔτ
     Redux෩ͷReducer/ActionTypes JōtaiͬͯԿʁ ެ͔ࣜΒҾ༻
    atomӬଓԽͷσϞ
14. JōtaiͷΠϚΠνͳͱ͜Ζ Cons.
15. Ͳ͜Ͱ΋atomΛ࡞Εͯ͠·͏ͷͰʜ
    ComponentͰatomΛ࡞Δͱ͖ɺ
    ௥ՃͰuseMemo/useRefͰ
    ϝϞԽΛ͢Δඞཁ͕͋Δ ެ͔ࣜΒҾ༻
    atom͕ಈతʹੜ੒͞Εͳ͍Α͏ʹ͢ΔσϞ JōtaiͷΠϚΠνͳͱ͜Ζ
16. atom͸WeakMapʹ֨ೲ͞ΕΔͷͰʜ
    atom͕͢΂ͯͷίϯϙʔωϯτ͔Β ࢀর͞Εͳ͘ͳͬͨ৔߹ ΞϯϚ΢ϯτ࣌ͳͲ
    GCͰ஋͕ॳظԽ͞ΕΔ JōtaiͷΠϚΠνͳͱ͜Ζ https://twitter.com/dai_shi/status/1380885195549597696
17. Recoil vs Jōtai ͦ΋ͦ΋ɺ
    Jōtai͸RecoilͱԿ͕ҧ͏ͷʁ
18. ։ൃऀ
    Recoil͸FacebookνʔϜʹΑͬͯ։ൃ͞Ε͍ͯͯɺ
    Jōtai͸Poimandres(ݩreact-spring) νʔϜͷҰ෦։ൃऀʹΑͬͯ։ൃ͞Ε͍ͯΔ Recoil vs Jōtai
19. ։ൃͷج४
    Recoil͸େن໛։ൃ΍༷ʑͳཁٻʹ
    ରԠ͢ΔΑ͏ʹઃܭ͞Ε͍ͯΔ
    Jōtai͸ϓϦϛςΟϒͳAPIΛॏࢹ͢ΔઃܭΛ͍ͯ͠Δ Recoil vs Jōtai
20. ٕज़తͳࠩҟ
    Recoil͸BUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ
    Jōtai͸atomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)
21. ٕज़తͳࠩҟ
    Recoil͸BUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ
    Jōtai͸atomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)
22. ݸਓతʹ͸ʜ
    େ͖ͳϓϩδΣΫτͷ৔߹͸΍ͬͺΓɺ
    Recoil͕҆৺͔ͳͱࢥ͍·͢ɻ
    খ͍͞ϓϩδΣΫτ΍ɺContext APIͰ஍ࠈʹͳ͍ͬͯΔ
    ϓϩδΣΫτʹ͸ɺ
    JōtaiΛಋೖͯ͠΋͍͍͔ͳͱࢥ͍·͢ɻ ·ͱΊ
23. खલຯḩͰ͕͢ʜ
    JōtaiΛ࢖ͬͨϓϩδΣΫτΛ࡞Γ·ͨ͠ɻ Wordle෩ͷࠃ಺ͷӺ໊౰ͯήʔϜͰ͢ɻ ͥͻ͓ࢼ͍ͩ͘͠͞ɻ JōtaiΛ࢖ͬͨϓϩδΣΫτ IUUQTTUBUMFUJOZLJUUFONF
24. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @ Online Tsubasa SEKIGUCHI