Jotaiをプロジェクトに導入してみた

Transcript

1. Jotaiをプロジェクトに導 入してみた @react_nextjs 2022/12/10
2. 自己紹介 ・フロントエンドエンジニア(フリーランス) ・経験2年8ヶ月 ・React Next.js TypeScript ・大手決済サービスのフロントエンド開発 ・技術ブログ(https://react-uncle-blog.netlify.app/) ・Twitter(https://twitter.com/react_nextjs)
3. アジェンダ ・Jotaiってなに？ ・プロジェクトに導入した経緯 ・サンプルソースの紹介
4. 皆さん！！ Jotaiって知ってますか？？
5. Reactの状態管理ライブラリです！！ 公式: https://jotai.org/
6. JavaScript Rising Starsで堂々の3位 参考: JavaScript Rising Stars 2021
7. 詳しくは技術ブログで！！ Reactの状態管理ライブラリを比較してベストな選択肢をしよう！
8. なぜプロジェクトで導入したのか？
9. 要件 ・複数のページ間で保持しないといけない値が多かっ た ・グローバルで管理する状態を永続的に管理しないと いけなかった
10. その他候補に上がった状態管理ライブラリ ・Recoil ・Zustand 候補には上がりましたが、次の理由で選定から外しました。
11. • Recoil ◦ 正式リリースじゃないので破壊的変更がくる可能性があった ◦ パッケージサイズがやたらと重い(2.2MBくらい) ◦ 永続化するにはrecoil-persistというライブラリを別で導入しない といけない • Zustand ◦ Reduxよりは簡潔に記述できるが、プロジェクトが始まった当初、 他メンバーのスキル感があまり高くなかったので学習コストがか かると感じた
12. 消去法ではあったがJotaiに決まった ・学習コストがとても低く、React HooksのuseStateのように状態管理が できるので最低限のReactの知識があれば問題ないと感じた ・Recoilは状態の永続化をするのに別ライブラリを導入しないといけな かったが、Jotaiであれば標準搭載しているAPIがあるのでライブラリを 導入する必要がなかった ・作者が日本人なので日本語の情報が豊富
13. Jotaiのコードを簡単に紹介！！
16. ご静聴ありがとうございました！！