JavaScriptで同時に押された複数のキーを検出する方法

JavaScriptでは、keydownイベントとkeyupイベントを組み合わせることで、同時に押されている複数のキーを検出できます。keydownはキーが押された瞬間に、keyupはキーが離された瞬間に発生するイベントのため、この2つの状態を管理することで、現在押されているすべてのキーをリアルタイムに把握できます。

サンプルコード

以下は、押されたキーのkeyCodeをリストに表示し、キーが離されると表示を更新するスクリプトです。

var log = $('#log')[0],
    keyPressed = [];

$(document.body).keydown(function (evt) {
    var li = keyPressed[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        keyPressed[evt.keyCode] = li;
    }
    $(li).text('Key Down: ' + evt.keyCode);
    $(li).removeClass('key-up');
});

$(document.body).keyup(function (evt) {
    var li = keyPressed[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        keyPressed[evt.keyCode] = li;
    }
    $(li).text('Key Up: ' + evt.keyCode);
    $(li).addClass('key-up');
});

コードの解説

このスクリプトの仕組みは以下の通りです。

• keyPressed配列： 各keyCodeに対応するli要素をキャッシュし、同じキーが何度押されてもリストが重複して増えないようにしています。
• keydownイベント： キーが押されると、対応するli要素を作成（または既存のものを取得）し、そのkeyCodeを表示します。
• keyupイベント： キーが離されると、表示を「Key Up」に更新し、key-upクラスを追加することで視覚的にも状態の変化がわかるようにしています。

動作確認用のHTML

上記のスクリプトを動作させるには、表示先となる次のようなHTML要素が必要です。

<ul id="log"></ul>

また、このコードはjQueryを使用しているため、あらかじめhead内などでjQueryを読み込んでおいてください。

まとめ

keydownとkeyupの2つのイベントを併用し、keyCodeごとに要素の状態を管理することで、複数キーの同時押しを簡単に検出できます。ゲームのコントロールやショートカットキーの実装など、さまざまな場面で応用できるテクニックです。