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
75
Jotaiをプロジェクトに導入してみた
Shogo
December 10, 2022
Tweet
Share
More Decks by Shogo
See All by Shogo
フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい!
shogo4131
0
220
本業 + 副業2社で働くエンジニアの時間術
shogo4131
0
210
スタートアップで学ぶフルリモート開発の進め方
shogo4131
0
540
フリーランスエンジニア辞めてみた!
shogo4131
0
600
激戦区東京でフリーランスとして生き残った方法3選
shogo4131
0
40
MUIは不要? React次世代コンポーネントライブラリ Mantine!!!
shogo4131
0
160
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Automating Front-end Workflow
addyosmani
1370
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Bash Introduction
62gerente
615
210k
Code Reviewing Like a Champion
maltzj
525
40k
Fireside Chat
paigeccino
39
3.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
BBQ
matthewcrist
89
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Typedesign – Prime Four
hannesfritz
42
2.8k
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
ご静聴ありがとうございました!!