Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jotaiをプロジェクトに導入してみた
Search
Shogo
December 10, 2022
0
14
Jotaiをプロジェクトに導入してみた
Shogo
December 10, 2022
Tweet
Share
More Decks by Shogo
See All by Shogo
フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい!
shogo4131
0
28
本業 + 副業2社で働くエンジニアの時間術
shogo4131
0
110
スタートアップで学ぶフルリモート開発の進め方
shogo4131
0
410
フリーランスエンジニア辞めてみた!
shogo4131
0
470
激戦区東京でフリーランスとして生き残った方法3選
shogo4131
0
9
MUIは不要? React次世代コンポーネントライブラリ Mantine!!!
shogo4131
0
21
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
GitHub's CSS Performance
jonrohan
1025
450k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Building Your Own Lightsaber
phodgson
100
5.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
A designer walks into a library…
pauljervisheath
201
23k
Transcript
Jotaiをプロジェクトに導 入してみた @react_nextjs 2022/12/10
自己紹介 ・フロントエンドエンジニア(フリーランス) ・経験2年8ヶ月 ・React Next.js TypeScript ・大手決済サービスのフロントエンド開発 ・技術ブログ(https://react-uncle-blog.netlify.app/) ・Twitter(https://twitter.com/react_nextjs)
アジェンダ ・Jotaiってなに? ・プロジェクトに導入した経緯 ・サンプルソースの紹介
皆さん!! Jotaiって知ってますか??
Reactの状態管理ライブラリです!! 公式: https://jotai.org/
JavaScript Rising Starsで堂々の3位 参考: JavaScript Rising Stars 2021
詳しくは技術ブログで!! Reactの状態管理ライブラリを比較してベストな選択肢をしよう!
なぜプロジェクトで導入したのか?
要件 ・複数のページ間で保持しないといけない値が多かっ た ・グローバルで管理する状態を永続的に管理しないと いけなかった
その他候補に上がった状態管理ライブラリ ・Recoil ・Zustand 候補には上がりましたが、次の理由で選定から外しました。
• Recoil ◦ 正式リリースじゃないので破壊的変更がくる可能性があった ◦ パッケージサイズがやたらと重い(2.2MBくらい) ◦ 永続化するにはrecoil-persistというライブラリを別で導入しない といけない •
Zustand ◦ Reduxよりは簡潔に記述できるが、プロジェクトが始まった当初、 他メンバーのスキル感があまり高くなかったので学習コストがか かると感じた
消去法ではあったがJotaiに決まった ・学習コストがとても低く、React HooksのuseStateのように状態管理が できるので最低限のReactの知識があれば問題ないと感じた ・Recoilは状態の永続化をするのに別ライブラリを導入しないといけな かったが、Jotaiであれば標準搭載しているAPIがあるのでライブラリを 導入する必要がなかった ・作者が日本人なので日本語の情報が豊富
Jotaiのコードを簡単に紹介!!
None
None
ご静聴ありがとうございました!!