フロントエンド・PHPカンファレンス北海道2026
トーク(15分)
フロントエンド
初登壇
実サービスで使えるRedo/Undo機能を作るまで
taki
taki73_cat
ブラウザ上で Web サイトを構築・編集できるサービスに、Zustand と Zundo を使って Redo/Undo 機能を実装した際、最小構成で組んだだけでは、ユーザーの直感とずれる挙動が発生することが分かりました。
具体的には、次のような問題が発生しました。
- IME 入力中の中間状態が履歴に入ってしまう問題
- debounce の影響で直前の変更が戻らない問題
本セッションでは、これらの問題の原因を Zundo の履歴保存モデルや debounce を前提とした設計から整理し、実際にどう解決したのかをコード付きで解説します。
さらに、テキスト入力・セクション追加・ページ並べ替えといった複数の操作を扱うため、Undo 対象と対象外を分ける目的で Store を分離した設計についても紹介します。