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
140
0

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

Gunma.web #44

Avatar for Tsubasa SEKIGUCHI

Tsubasa SEKIGUCHI

December 07, 2022

More Decks by Tsubasa SEKIGUCHI

See All by Tsubasa SEKIGUCHI
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
0
280
React Native × GraphQLで TanStack Queryを 選んだ理由
Avatar for Tsubasa SEKIGUCHI tinykitten
0
68
第3木曜LT会 #28
Avatar for Tsubasa SEKIGUCHI tinykitten
0
160
スモールスタートでいこう 自作テレメトリシステム概論
Avatar for Tsubasa SEKIGUCHI tinykitten
0
66
TrainLCD v10リリース記念 TrainLCDを支える技術
Avatar for Tsubasa SEKIGUCHI tinykitten
1
590
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
0
290
初めてのハッカソンを「紙芝居」で終わらせた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
77
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
0
590
今日から使える AI駆動開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
1
130

Other Decks in Programming

See All in Programming
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
550
in-process GraphQL のすすめ #ginzajs
Avatar for izumin5210 izumin5210
4
1.3k
What's New in Android 2026
Avatar for Veronikapj veronikapj
0
260
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
150
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
290
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
160
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
Avatar for yasei no otoko yasei_no_otoko
0
100
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
3
800
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
1
140
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.6k
Google Apps Script で Ruby を動かす
Avatar for Shogo Kawahara kawahara
0
260

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
610
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
480
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
430
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
400
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
390
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k

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