WebサイトにCtrl+Z(Undo / Redo)を実装する方法(Reactのkeydown + 履歴スタック)
概要
今回はWebサイト(Webアプリ)にCtrl+ZによるUndo(元に戻す)とRedo(やり直し)を実装する方法について紹介していきます。
お絵描きツールや画像編集系のUIを作っていると、「うっかり1個前の操作を消したい」場面って必ず出てきますよね。
そういうときにCtrl+Zが効くだけで、UXはかなり良くなる気がします(^^
実は先日作った画像マスクサイト「もざいくにゃん」に、この機能を後付けで入れたんですが、思っていたよりシンプルなコードで実現できました。
ポイントは「操作の履歴を2本のスタックで持つ」という考え方だけです。
本記事では、実際に動いているReactのコードを抜粋しながら、履歴スタックの設計 → keydownの拾い方 → 巻き戻しの実装という順で解説していきます。
キーボードショートカットの実装で「どこから手を付ければいいの?」と迷っている方は、是非見ていってください。
それではやっていきましょう(^^!