経緯

先日Undo/Redo機能の実装をする機会がありました。
ついでにショートカットキーで実装できないものかChatGPT 4oに聞いたところ教えてくれたので備忘録として残します。

実装

<script setup>
import { onMounted } from "vue";

// キーボードショートカットのハンドラー
// ※undo(), redo()の中身の処理は省略
const handleKeydown = (e) => {
    if (e.ctrlKey || e.metaKey) {
        if (e.key === 'z') {
            undo(); // Ctrl+Z (Undo)
        } else if (e.key === 'Z') {
            redo(); // Ctrl+Shift+Z (Redo)
        }
        e.preventDefault(); // デフォルトの動作を無効化
    }
};

// イベントリスナーを登録する
onMounted(() => {
    window.addEventListener('keydown', handleKeydown);
});

</script>

参考記事