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

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

Avatar for Tsubasa SEKIGUCHI Tsubasa SEKIGUCHI
December 07, 2022
Programming
0
100

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

Gunma.web #44

Avatar for Tsubasa SEKIGUCHI

Tsubasa SEKIGUCHI

December 07, 2022
Tweet

More Decks by Tsubasa SEKIGUCHI

See All by Tsubasa SEKIGUCHI
今日から使える AI駆動開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
1
76
Reactで始める リグレッションテスト概論
Avatar for Tsubasa SEKIGUCHI tinykitten
0
45
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
1
1.3k
Gunma.web #55
Avatar for Tsubasa SEKIGUCHI tinykitten
0
250
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
Avatar for Tsubasa SEKIGUCHI tinykitten
0
130
AWS/GCPで始める 生成AI入門
Avatar for Tsubasa SEKIGUCHI tinykitten
0
170
Rustとtonicで始める gRPC入門(GENIEE Edit)
Avatar for Tsubasa SEKIGUCHI tinykitten
0
54
スモールスタートで始める フィードバック管理システム開発入門
Avatar for Tsubasa SEKIGUCHI tinykitten
0
300
Rustとtonicで始める gRPC再入門
Avatar for Tsubasa SEKIGUCHI tinykitten
0
1k

Other Decks in Programming

See All in Programming
Querying Design System デザインシステムの意思決定を支える構造検索
Avatar for ikuma-t ikumatadokoro
1
1.2k
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
Avatar for hkws kwahiro
12
7.2k
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
300
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
5
2.1k
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
Avatar for ANDPAD inc andpad
0
180
Building AI Agents with TypeScript #TSKaigiHokuriku
Avatar for izumin5210 izumin5210
5
990
Java_プロセスのメモリ監視の落とし穴_NMT_で見抜けない_glibc_キャッシュ問題_.pdf
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
230
Claude Code on the Web を超える!? Codex Cloud の実践テク5選
Avatar for スナガク sunagaku
0
600
無秩序からの脱却 / Emergence from chaos
Avatar for nrs nrslib
1
8.2k
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
3
900
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
Avatar for sg4k0 sg4k0
0
250
All(?) About Point Sets
Avatar for hole hole
0
210

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
410
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.2k

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/[email protected]

  11. ҰํRecoil͸ʜ Mini fi ed 72.3kB Mini fi ed + Gzipped

    21.1kB JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/[email protected]

  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