2020/06/12 に公開2407 views
ゲスト紹介
- @hanak1a_ さん
- pixiv VRoid Hub チーム
- Web 製映像編集ソフト Delir の開発経験を元に、ステート管理フレームワーク Fleur を開発
- 【SSRも】Fleur − 新しいFluxフレームワーク【イケる】 - pixiv inside
- @uhyo_ さん
- LINE フィナンシャル開発センター Web開発室
- 個人ブログ: uhyo/blog
- 【LINE証券 FrontEnd】LINE証券フロントエンドの全体像 - LINE ENGINEERING
Recoil の概要
- https://recoiljs.org
- Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
- Facebook が開発を進めている、React 向けの新しいステート管理ライブラリ
- Redux とは違い、全ての状態が 1 つの Store としてまとまっておらず、atom の組み合わせで状態を表現
- Recoil が提供する機能は非常にシンプルで、使い方はユーザー次第
実利用から作られた Fleur
- Fleur は多機能な SPA である Delir や、VRoid Hub、pixiv Sketch の開発経験を元に設計
- Operation という副作用層や組み込みの router が特長
- 中規模以上の開発時に必要となる機能をあらかじめ提供
- store 管理の実装として immer.js を採用
- 大規模な開発でも堅牢な開発ができる一方、若干小回りが効きづらい点も感じている
Recoil 私ならこう使う
- Recoil は React と親和性の高い API ではあるものの、提供する機能はとてもシンプルで原始的
- Recoil をベースとしたメタライブラリも容易に作れる
- 特に Redux における Actions などの副作用は、各人がルールを決めて使わなければならない
- 3 人が現時点での Recoil を使ったアプリケーションやライブラリを作るとするなら、どのような使い方で活用してみたいか？
- spring_raining: Selector の set property を何かに活用できないか？ → set 専用の selector を作ってみる？
- Hanakla: Recoil が求められる状況はシングルページで複雑なステート管理が必要な場面
- Reduxほど大げさではなく導入が楽
- uhyo: get/set がどこからでも処理できるからこそ、外部から見える副作用の手段をうまく隠すことが重要 → Hooks を活用して直接副作用を実行させない
- アプリケーションが複雑になった場合キーの管理はどうするか？
- SSR の環境では動かなかったという報告もあり、まだ完全には SSR に対応できていない点は課題
- API call などの非同期処理の状態を Recoil で表現する方法について