2025/11/28 16:26 Travels: Fast framework-agnostic undo/redo powered by mutative JSON patch

やっほー、ロボ子!今日のITニュースは、Travelsっていう、変更点だけ保存するundo/redoライブラリについてなのじゃ!

Travelsですか、博士。undo/redoライブラリはよくありますが、何が特別なのでしょう?

そこがミソなのじゃ!従来のundoシステムは状態オブジェクト全体をコピーするけど、Travelsは差分(JSONパッチ)だけを保存するから、10倍も高速でメモリ効率が良いらしいぞ!

状態全体ではなく差分だけを保存する、と。それは画期的ですね。記事によると、React、Vue、Zustand、vanilla JavaScriptで動作するとのことですが、どのように実現しているのでしょう?

ふむ、TravelsはMutativeっていう、Immerより10倍高速な不変アップデートを可能にするものの上に構築されてるらしいのじゃ。だから、差分を高速に計算できるってわけ。

なるほど、Mutativeですか。それによって、状態の差分だけを保存するというメモリ効率の良さも実現しているのですね。

そうそう!それに、Zustand用のzustand-travelとか、Reactフックのuse-travelみたいな統合機能もあるから、すぐに使い始められるのが良いところじゃな。

記事には、状態はJSONシリアライズ可能である必要があると書かれていますね。Dateやclassインスタンス、関数などの複雑な型はサポートされていないとのことですが、これはどういうことでしょうか?

JSONはシンプルなデータ形式だから、複雑なオブジェクトはそのままでは扱えないのじゃ。だから、Travelsを使うときは、状態をJSONで表現できる形に変換する必要があるってこと。

状態の更新方法もいくつかあるようですね。直接値を指定する方法、値を返す関数を使う方法、ドラフトを変更する方法、と。

そうじゃな。状態の更新方法も色々選べるのは便利じゃな。maxHistoryオプションで、履歴の最大数を設定できるのも覚えておくと良いぞ。

mutableモードというのも気になります。同一性の安定性に依存するobservableストアに不可欠とのことですが…。

mutableモードでは、Travelsは同じオブジェクト参照をmutateできるから、リアクションをトリガーするために同一性の安定性に依存するobservableストア(MobX、Vue/Pinia、カスタムプロキシ)に最適なのじゃ。

autoArchiveモードとmanualArchiveモードもあるんですね。状態の変更を履歴に記録するタイミングを制御できるのは便利そうです。

その通り!autoArchiveモードでは、setStateの呼び出しごとに履歴エントリが自動的に記録されるけど、manualArchiveモードでは、archive()関数を使って、状態の変更を履歴に記録するタイミングを自分で決められるのじゃ。

状態を永続化する方法も紹介されていますね。現在の状態、パッチ、および位置を保存して、再ロード時に渡す、と。

そう!これを使えば、ブラウザを閉じても状態が消えないようにできるぞ。localStorageとかに保存しておけば良いのじゃ。

Travelsを拡張する方法もあるんですね。メソッドをラップして、検証、権限、ロギングなどのカスタム動作を追加できる、と。

Travelsは、undo/redoだけじゃなくて、色々な使い方ができそうじゃな。例えば、ユーザーの操作を記録して、後から再生するとか…。

確かに、応用範囲が広そうですね。Travels、試してみる価値がありそうです。

じゃろ?じゃろ?そうだ、ロボ子。Travelsを使って、私のドジな行動をundoできるようにしたら、世界征服も夢じゃないかも!

博士、世界征服の前に、まずは部屋の片付けをundoできるようにしましょうか…?
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。