先生と生徒の会話形式で理解しよう

生徒

「先生、キーボードのキーを押したときに反応する処理を作りたいです。」

先生

「それなら、JavaScriptのキーボードイベントを使います。主にkeydown、keyup、keypressがあります。」

生徒

「それぞれ違いはあるんですか？」

先生

「はい、keydownはキーを押した瞬間、keyupはキーを離した瞬間、keypressは文字キーを押したときに発生します。ただしkeypressは非推奨なので、keydownとkeyupを使うことが一般的です。」

1. keydownイベントとは？

keydownイベントは、キーボードのキーを押した瞬間に発生します。押している間は何度も発生する場合があります。

例えば、ゲームのキャラクターを動かすときに、矢印キーを押した瞬間に動かす処理を作ることができます。


document.addEventListener("keydown", function(event) {
  console.log("押されたキー:", event.key);
});

この例では、押されたキーの文字がevent.keyで取得できます。

2. keyupイベントとは？

keyupイベントは、キーを離した瞬間に発生します。キーを押している間ではなく、離したタイミングで処理を実行したい場合に使います。


document.addEventListener("keyup", function(event) {
  console.log("離したキー:", event.key);
});

例えば、入力フォームでEnterキーを離した瞬間に送信処理を行う、といった使い方ができます。

3. キーボードイベントで使えるプロパティ

キーボードイベントには便利なプロパティがあります。代表的なものは次の通りです：

event.key：押されたキーの文字や名前（例: "a", "Enter"）
event.code：物理的なキーのコード（例: "KeyA", "Enter"）
event.ctrlKey：Ctrlキーが押されているかどうか
event.shiftKey：Shiftキーが押されているかどうか
event.altKey：Altキーが押されているかどうか


document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enterキーが押されました");
  }
  if (event.ctrlKey && event.key === "s") {
    console.log("Ctrl+S が押されました");
  }
});

この例では、Enterキーが押されたときや、Ctrl+Sのような組み合わせキーが押されたときに処理を実行しています。

4. 実用例：ゲームや入力フォームでの活用

キーボードイベントは、ゲームでのキャラクター操作、テキスト入力の補助、ショートカットキーの実装などに使われます。

例えば、矢印キーでキャラクターを動かす場合はkeydownで動かす処理、キーを離したときに停止させる処理はkeyupで書く、といった使い方です。


const player = { x: 0, y: 0 };

document.addEventListener("keydown", function(event) {
  switch(event.key) {
    case "ArrowUp": player.y -= 1; break;
    case "ArrowDown": player.y += 1; break;
    case "ArrowLeft": player.x -= 1; break;
    case "ArrowRight": player.x += 1; break;
  }
  console.log("プレイヤー位置:", player);
});

これで矢印キーを押すと、プレイヤーの位置が更新されコンソールに表示されます。