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
更新系と状態
Search
uhyo
April 23, 2025
Technology
8
2k
更新系と状態
2025-04-23 Exploring State - LayerX Web Frontend Night
uhyo
April 23, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
390
React 19アップデートのために必要なこと
uhyo
8
2k
color-scheme: light dark; を完全に理解する
uhyo
8
580
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.2k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
8
3.9k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.4k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
11k
React 19を概念から理解する
uhyo
22
11k
Other Decks in Technology
See All in Technology
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
260
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
130
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
5.9k
Dynamic Reteaming And Self Organization
miholovesq
3
670
3D生成AIのための画像生成
kosukeito
2
350
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.7k
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
120
Writing Ruby Scripts with TypeProf
mame
0
410
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
1
450
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
1
210
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
270
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
15
6k
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Embracing the Ebb and Flow
colly
85
4.7k
Bash Introduction
62gerente
611
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
The Cult of Friendly URLs
andyhume
78
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Making Projects Easy
brettharned
116
6.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
570
Transcript
更新系と状態 2025-04-23 Exploring State - LayerX Web Frontend Night
発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 好きな状態管理ライブラリはjotaiだが、 実は業務ではReduxを使っている 2
フロントエンドと状態設計 RSCなどでサーバーがUIに入り込んでくる中で、 フロントエンド(クライアントサイド)の 主な役割はインタラクションである。 そして、UI = f(state)という格言を踏まえると、 フロントエンドの肝に状態設計があることは 疑いようがない! 3
フロントエンドと更新系 このトークでは、更新系に焦点を当てます。 つまり、UIを通じてアプリ上のデータを更新する ときのフロントエンドの動きと、その裏にある 状態設計。 4
React 19と更新系 React 19では、useActionStateやuseOptimistic のように更新系のことを念頭に置いたAPIが 追加された。 便利ですね。 5
ご清聴ありがとうございました 6
というのは冗談で…… 状態を取り扱う組み込みのフックが増えてきた ことで、それらを活かした状態管理の重要性が 増してきた。 そこで、今回はステートを組み合わせて活用する 設計パターンをご紹介します。 7
今回のお題 データの一覧を見られる 編集ボタンがある 8
データを編集したときどうする? とりあえずClineさんに実装をお願いすると こうなった 1. 編集APIを呼び出す 2. データを再読み込みする 実装は分かりやすいけど無駄が多い…… 9
データを編集したときどうする? ぼく「全部再読み込みするのは無駄が多いので、 ローカルで当該データを上書きすればいいのでは (天才的発想)」 ※ 他の人が同時に編集していた場合の挙動とかはここでは 考えないことにします 10
データを編集したときどうする? <EditModal onSave={(data) => { setItems((items) => items.map(/* … */));
updateItemApi(data) .then(/* … */); }} /> 11
データを編集したときどうする? ぼく「じゃあsetItemsを呼び出す必要があるから、 itemsの定義を見に行くか」 12
データを編集したときどうする? export const useData = ( page: number, ): {
items: Item[]; totalPages: number } => { return use(fetchWithCache(page)); }; useさん「ステートを更新したい? うちそれやってないんで」 13
データを編集したときどうする? Suspense前提だと、フェッチしたデータが入って いるローカルステートを更新するのは不可。 useの裏にあるキャッシュを更新するのはアリ (useSWRとかをちゃんと使うときにやる方法) だが、ちゃんとやるのはだるい…… 14
アイデア: 差分をステートに持つ 「フェッチした時点のデータからローカルで 更新された差分」を別で持って、合成すると 良さそう。 15
アイデア: 差分をステートに持つ 16 fetchedItems ネットワーク localDiffs items ユーザーが目に するデータ 更新
実際の実装 const { items: fetchedItems, totalPages } = useData(currentPage); const
[itemsLocalDiff, setItemsLocalDiff] = useState(new Map()); const items = useMemo(() => { return fetchedItems.map((item) => { const localDiff = itemsLocalDiff.get(item.id); if (localDiff) { return { ...item, description: localDiff.description }; } return item; }); }, [fetchedItems, itemsLocalDiff]); 17 2 つ の ス テ ー ト を useMemo 内 で 合 成 してitemsを得ている
比較してみよう 18 fetchedItems ネットワーク localDiffs items 更新 items ネットワーク 更新
ステートが分かれており、 それぞれの更新理由が明確 1つのステートが複数の 理由で更新される
ステート分割の考え方 ユーザーからは1つに見える状態でも、 裏のステートを複数に分けたほうがシンプルに 管理できる場合がある。 19 fetchedItems localDiffs items 「画面に表示されている一覧データ」を 「サーバーから取得したデータ」と
「ローカルで編集した差分」に分解した
応用編 20
考えてみよう では、ページネーションをユーザーが操作して、 別のページに行ったあと再度このページに戻って きたらどうする? 21 fetchedItems localDiffs items
考えてみよう では、ページネーションをユーザーが操作して、 別のページに行ったあと再度このページに戻って きたらどうする? ページネーションが操作されたら再度サーバー から読み込まれるのが自然なので、 ページ移動した時点でlocalDiffsを初期化したい。 22
普通の実装 const handlePageChange = (newPage: number) => { if (newPage
> 0 && newPage <= totalPages) { startTransition(() => { setItemsLocalDiff(new Map()); setCurrentPage(newPage); }); } }; 23 ページ移動時にlocalDiffを空にする。 複数のステート更新はバッチ化される ので動きとしては問題ない
普通の実装 でも、設計としてはlocalDiffの初期化は ページ移動に付属して起きることなのに、 2つのステート更新を同時にやるのは何か微妙…… setItemsLocalDiff(new Map()); setCurrentPage(newPage); 24
従属的なステート設計をしたい localDiffは“今のページのデータ”に付随する 追加データであるということを表現したい。 そのことをステート設計で表現するには…… 25
アイデア: 従属先を覚えておく localDiffがどのitemsに従属するのか、keyで表現。 function useLocalDiff(key: object) { const [itemsLocalDiff, setItemsLocalDiff]
= useState<{ key: object; localDiff: Map<number, { description: string }>; }>({ key: {}, localDiff: new Map(), }); 26 従来のMapに加えて、どのオブジェクト にそのMapが紐づくのかを記憶
アイデア: 従属先を覚えておく const localDiff = itemsLocalDiff.key === key ? itemsLocalDiff.localDiff
: new Map(); return [ localDiff, updateDiff /* 後述 */, ] as const; 27 現在のkeyがlocalDiffに紐づいたkeyと 異なる場合は、 新しいkeyに紐づいたdiffが存在しない ので、空のMapを返す
アイデア: 従属先を覚えておく function updateDiff(id: number, description: string) { setItemsLocalDiff((prev) =>
{ const newLocalDiff = prev.key === key ? new Map(prev.localDiff) : new Map(); newLocalDiff.set(id, { description }); return { key, localDiff: newLocalDiff, }; }); } 28 ステート更新のタイミングで最新のkeyを反映
従属的なステート設計 この設計では、「従属先」を覚えておくことで、 従属先が変わったら自動的に初期化される ステートを自然な(エフェクト等に頼らない)形で 作ることができた。 覚えておくkeyが1つならメモリリークの心配も しなくていい。 29
サンプルコード ここまでの説明で紹介したサンプルコードは GitHubで閲覧可能です。 https://github.com/uhyo/sample-update-state 30
でもステートの取り回しが…… useMemoとか使うとなると、上流のコンポーネント で計算して下流のコンポーネントに渡すのが大変。 const { items: fetchedItems, totalPages } =
useData(currentPage); const [itemsLocalDiff, updateItemsLocalDiff] = useLocalDiff(fetchedItems); const items = useMemo(/* 省略 */); 31
ステートの分割に適したライブラリ このトークで紹介したようなステートの分割・合成 に適したアーキテクチャを持ったステート管理 ライブラリを使えば、今回の設計を活かしつつ itemsをどこからでも参照できる。 32
ステートの分割に適したライブラリ たとえばJotaiとかどうですか? 33
更新系とJotai 2025-04-23 Exploring State - LayerX Web Frontend Night