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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tsubasa SEKIGUCHI Tsubasa SEKIGUCHI PRO
December 07, 2022
Programming
0
110

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

Gunma.web #44

Avatar for Tsubasa SEKIGUCHI

Tsubasa SEKIGUCHI PRO

December 07, 2022
Tweet

More Decks by Tsubasa SEKIGUCHI

See All by Tsubasa SEKIGUCHI
TrainLCD v10リリース記念 TrainLCDを支える技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
94
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
220
初めてのハッカソンを「紙芝居」で終わらせた話
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
39
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
290
今日から使える AI駆動開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
88
Reactで始める リグレッションテスト概論
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
55
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1.4k
Gunma.web #55
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
290
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
140

Other Decks in Programming

See All in Programming
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.6k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
470
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
220
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
180
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
AI & Enginnering
Avatar for codelynx codelynx
0
120
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
1.3k

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110

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