【JavaScript】キーボード入力を取得する方法｜event.key・event.codeとkeyCode（非推奨）の違い・移行ガイド

フォームのEnter送信やショートカットキーなど、JavaScriptでキーボード入力を判定したい場面は多くあります。かつては event.keyCode が使われていましたが、現在は非推奨です。今は event.key と event.code を使い分けるのが正解です。

event.keyCode は非推奨

event.keyCode は押されたキーを数値で返すプロパティでした（Enterなら13など）。しかしキーボードレイアウトやIMEで値が安定せず、仕様上も非推奨（deprecated）です。読みづらく将来削除される可能性もあるため、新規コードでは使いません。

// 非推奨。数値で分かりにくく、レイアウト依存
document.addEventListener("keydown", (event) => {
  if (event.keyCode === 13) {
    console.log("Enterが押されました"); // 13 が何のキーか分かりにくい
  }
});

event.key と event.code の違い

代替手段は2つあり、目的で使い分けます。event.key は入力された文字・キーの意味を、event.code はキーボード上の物理的な位置を表します。

keyCode からの移行表

古いコードを書き換えるときの対応表です。数値の keyCode を、意味の分かる event.key に置き換えます。

実装例①：event.key で文字・特殊キーを判定

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("Enterが押されました");
  }
});

実装例②：event.code で物理キーを判定（WASD移動）

ゲームの移動操作などは、レイアウトに依存しない event.code が便利です。

document.addEventListener("keydown", (event) => {
  switch (event.code) {
    case "KeyW": console.log("上へ"); break;
    case "KeyA": console.log("左へ"); break;
    case "KeyS": console.log("下へ"); break;
    case "KeyD": console.log("右へ"); break;
  }
});

実装例③：Ctrl+S などの修飾キー

修飾キーは event.ctrlKey / event.shiftKey / event.altKey / event.metaKey（Mac の Command）で判定します。ブラウザ既定の動作を止めるには event.preventDefault() を呼びます。

document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // ブラウザの保存ダイアログを止める
    console.log("保存ショートカット");
  }
});

注意：日本語入力（IME）変換中の判定

日本語入力で変換中のEnter（変換確定）と、確定後のEnter（送信）は区別が必要です。変換中かどうかは event.isComposing で判定できます（変換中の keydown では keyCode が 229 になります）。

const input = document.getElementById("text");

input.addEventListener("keydown", (event) => {
  // 変換確定のEnterは送信扱いしない
  if (event.isComposing || event.keyCode === 229) return;

  if (event.key === "Enter") {
    console.log("確定後のEnter（送信）");
  }
});

keydown / keyup / keypress の違い

• keydown：キーを押した瞬間に発火（押しっぱなしで連続発火）。現在の推奨
• keyup：キーを離した瞬間に発火
• keypress：文字入力時に発火するが非推奨（使わない）

よくある質問（FAQ）

まとめ

JavaScriptでキーボード入力を取得する方法のポイントを整理します。

• event.keyCode は非推奨。新規実装では使わない
• 文字・意味で判定→event.key（"Enter", "a", "Shift"）
• 物理キー位置で判定→event.code（"KeyA", "ShiftLeft"）
• 修飾キーは ctrlKey / shiftKey / altKey / metaKey
• 日本語入力は event.isComposing で変換中を判定（誤送信を防ぐ）
• イベントは keydown が推奨（keypress は非推奨）

関連として、フォームのエンターキー送信を無効化する方法・バックスペースキーを無効化する方法もあわせて読むと、キー入力の制御に強くなれます。