JavaScriptによる Undo/Redo の実装アイデア&コード例

なくてもいいけど、合った方がいいモノ

それが Undo/Redo 機能

この実装は次のように一筋縄でいきません。

  • アプリ・システムごとに仕様が違う
  • 作り方が意外と複雑で迷う
  • 何から実装していいか分からない

僕も Undo/Redo の実装で悩むこと多いです。(個人開発)

でも基本実装さえ分かれば、それほど難しくありません。

そこで記憶の整理のために、
自分なりの JavaScriptでの Undo/Redo 実装手順 をまとめてみます。

手順0.ここで想定する Undo/Redo の実装

ここでは次のようなアプリ(?)を考えます。

  • 左側にセレクトボックスがある
  • 右にもセレクトボックスがある
  • クリックで各アイテムを逆に移動できる
  • そのアイテム移動の履歴を記録したい

こういう感じの

 

そして今回はUIとして、次のようなHTMLを用意しました

▼ アプリのUIとなるHTML例

▼ このアプリの見た目

Undo/Redoの実装テストとして用意したアプリ。左右のセレクトボックスで押されたアイテムを逆側に移動させるだけのもの

もし左のセレクトボックスでアイテムがクリックされたら、その逆の右側セレクトボックスにアイテムを移動するようなイメージです。(以下動画参照)

セレクトボックスのアイテムが押されると、逆側に移動できるだけのアプリ。このアプリでUndo/Redoを簡易的に実装してみる

アイテム移動後は移動元からはアイテム消去するというルール

このアプリ(?)で Undo/Redo を実装してみることにします。

手順1.まずUndo/Redo用のスタック(配列)を用意

Undo/Redoを実装するのに大事なのが、、、

履歴記録用のスタックを用意すること

JavaScriptなのでスタックは配列で代用します。

 

例えば今回の例なら、こういう感じの配列

またアンドゥ中かの判定に isUndoing  を、
そしてリドゥ中かの判定に isRedoing  を用意

今回の場合、履歴として次の形のデータを入れていきます。

ここまでで Undo/Redo の準備だけはできました。

次はアプリのメイン機能と履歴記録を実装してきます。

手順2.アプリのメイン機能とUndo/Redo履歴記録の実装

まずアプリのメイン機能から

セレクトボックスでアイテムが押されたら、逆側に移動させます。

▼ そのコードがコチラ

全体のコードは最後に載せます。

 

そしてお次に、 Undo/Redo 履歴を記録する関数を定義

recordUndoAction  と recordRedoAction  のコード

先ほど書いたように、履歴データを保存するだけ

この部分は "結構大事" ですね。

  • 何がアンドゥ・リドゥに必要か
  • どうすれば過去の状態に復元できるか

そういうことを考えて、履歴データを作らないといけないです。

 

最後に Undo/Redo を行う関数を定義

undo  と redo  のコード

何をしてるかはコメントを参照

これで簡易的だけど Undo/Redo が実装できました。

実装した Undo/Redo を試してみた(動画)

最初に書いたように、今回作ったのはこういうアプリ

  • 左右にセレクトボックスがある
  • アイテム押下時に逆側に移す
  • 移動元からはアイテムを消去

この条件で Undo/Redo を実装したって話でした。

 

実際に動作させたときの様子がコチラ!

JavaScriptで簡易的なUndo/Redoを実装してみた

何回か試してみましたが、期待通りに動きました。

まあ簡易的なので穴(バグ)もあるかもですが・・・

ここまでの全コードまとめ

最後にここまでの完全コードを載せときます。

▼ コチラが全てのコード

もしこのコードを見て、

  • このコード間違ってない?
  • なんかココおかしい

という部分を見つけた場合は、コメント欄でご指摘ください。ではまた

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください