JavaScriptのキーインテンは混乱している——あなたがブックマークするキークォードリファレンス

更新日 2026年4月25日

4つのプロパティ、そのうち3つは非推奨であり、一貫性はゼロ。これはノイズを切り抜くJavaScriptキーボードイベントリファレンスです——event.key、event.code、keyCode、および一般的なキー値の完全なテーブルをカバーしています。

JavaScriptキーボードイベントは混乱している — ここにあなたがブックマークするキー情報参照 1

広告削除する？

JavaScriptのキャリアのどこかで、キーボードのキー入力処理をしようとする。それほど簡単なことではない。MDNを開くと、一つ、二つではなく、四つの異なるプロパティが見つかる。 keyCode, which, keyと、 codeそのうちの3つは廃止されています。それらのプロパティは「キー」という概念についてまったく一致していません。おめでとうございます — あなたはウェブの歴史的に最も混沌とした領域に到達しました。

この参照はノイズを切り抜きます。どのプロパティを使うべきか、避けるべきかを学び、よく使われるキー値の完全な表を提供し、推測せずに済みます。

4つのプロパティ — そしてなぜ4つあるのか

JavaScriptのキーボードイベントは、イベントオブジェクトにいくつかのプロパティを公開します。それぞれのプロパティが実際に何を返すかは以下の通りです。

財産	返す値	状態
`event.key`	人間が読みやすい文字列のような `"Enter"`, `"ArrowUp"`、または `"a"`	✅ これを使用
`event.code`	物理的なキー識別子、例えば `"KeyA"`, `"Digit1"`, `"ArrowLeft"`	✅ レイアウトに依存しない検出に使用
`event.keyCode`	数値コード、例えば `13` Enter	⚠️ 廃止 — 新しいコードでは避ける
`event.which`	同じ数値として `keyCode`	⚠️ 廃止 — 新しいコードでは避ける

keyCode と which は、異なるブラウザの歴史時代から生まれたもので、どちらもキーを表す整数を返します。どちらも廃止されています。どちらもすべてのブラウザで動作しており、そのため2015年以前のコードベースに見られることがよくあります。

なぜ `keyCode` 廃止されているが、まだあらゆる場所に存在する

keyCode は、ブラウザDOMでのキー入力検出の元となった方法で、ネスケの初期イベントモデルに遡ります。それはうまくいったが、多くの不一致がありました：同じキーが異なるブラウザで異なるコードを返す、大文字の文字が一貫して処理されず、非ASCIIキーは混乱していました。

W3Cは、DOMレベル3イベント仕様（2016年）で keyCode と which を key と codeに代替しました。

の廃止は「このプロパティを使わないでください」という意味であり、「あなたのサイトを壊す」という意味ではありません。ブラウザはまだそれをサポートしており、見通しの未来においてもそうでしょう。 event.keyCode === 13 結果として、古くからのコードベースにはのチェックが散在しており、2012年のStack Overflowの回答はそれを推奨し、生産環境のコードに見られます。それはすぐにどこにも行かず、あなたは新しいコードを書くべきではありません。を

`event.key` vs `event.code` — どちらが必要ですか？

これは多くの人が誤解する区別です。どちらも現代的であり、どちらも正しいですが、異なる質問に答えるだけです。

プレビューするには event.key ユーザーが入力した文字を気にする場合。米国キーボードでは、Shift + 2を押すと event.key === "@"が得られます。ドイツ語キーボードでは、同じ物理キーが別の文字を生成します。 event.key は実際に出力された論理的な文字を反映しています。
プレビューするには event.code 物理キーが押されたことを気にする場合。これはゲームコントロール、ユーザーの言語に依存しないショートカット、または「Qキー」というのは上左の文字キーではなく、Qという文字を意味する場合に必要です。

ほとんどの実用的なケース — フォームの送信、ダイアログの閉じ、ショートカット — では event.key が望ましいです。ゲームコントロールや位置に基づくショートカットでは、 event.code.

を使用します。

現代JavaScriptでの正しいキー処理方法

Enterキー（フォーム送信、確認ダイアログ）

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Escapeキー（モーダルを閉じ、アクションをキャンセル）

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

矢印キー（ナビゲーション、スライダー、ゲームコントロール）

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

マウスのコントロールキー（Ctrl+S、Cmd+Kなど）

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

プレビューするには e.ctrlKey, e.shiftKey, e.altKeyと、 e.metaKey (MacではCmd) でマウスの組み合わせを検出します。これらは廃止されておらず、正確に動作します。

完全なキー参照表

以下の表は、最もよく使われるキーをカバーしています。ここに記載されていない場合は、キー情報ツール — どのキーでも押して、正確な event.key, event.code、および古くからの keyCode 値をすぐに取得できます。

キー	event.key	event.code	keyCode (古くからの)
登場	`"Enter"`	`"Enter"`	13
エスケープ	`"Escape"`	`"Escape"`	27
空間	`" "` (スペース)	`"Space"`	32
タブ	`"Tab"`	`"Tab"`	9
Backspace	`"Backspace"`	`"Backspace"`	8
Delete	`"Delete"`	`"Delete"`	46
Arrow Up	`"ArrowUp"`	`"ArrowUp"`	38
Arrow Down	`"ArrowDown"`	`"ArrowDown"`	40
Arrow Left	`"ArrowLeft"`	`"ArrowLeft"`	37
Arrow Right	`"ArrowRight"`	`"ArrowRight"`	39
家	`"Home"`	`"Home"`	36
終了	`"End"`	`"End"`	35
Page Up	`"PageUp"`	`"PageUp"`	33
Page Down	`"PageDown"`	`"PageDown"`	34
F1	`"F1"`	`"F1"`	112
F2	`"F2"`	`"F2"`	113
F3	`"F3"`	`"F3"`	114
F4	`"F4"`	`"F4"`	115
F5	`"F5"`	`"F5"`	116
F6	`"F6"`	`"F6"`	117
F7	`"F7"`	`"F7"`	118
F8	`"F8"`	`"F8"`	119
F9	`"F9"`	`"F9"`	120
F10	`"F10"`	`"F10"`	121
F11	`"F11"`	`"F11"`	122
F12	`"F12"`	`"F12"`	123
Shift (left)	`"Shift"`	`"ShiftLeft"`	16
Ctrl (left)	`"Control"`	`"ControlLeft"`	17
Alt (left)	`"Alt"`	`"AltLeft"`	18
Cmd / Win	`"Meta"`	`"MetaLeft"`	91
Caps Lock	`"CapsLock"`	`"CapsLock"`	20
a–z (lowercase)	`"a"`–`"z"`	`"KeyA"`–`"KeyZ"`	65–90
0–9 (top row)	`"0"`–`"9"`	`"Digit0"`–`"Digit9"`	48–57
0–9 (numpad)	`"0"`–`"9"`	`"Numpad0"`–`"Numpad9"`	96–105

覚えていないキーコード？ライブで確認

どの参照表もすべてのキーボードレイアウトのすべてのキーをカバーしません。特定のキー（数値ボタン、メディアキー、地域の文字）について正確な値が必要な場合、最も速い方法はそれを押して確認することです。

のキー情報ツールはまさにそのように機能します。どのキーでも押して、すぐに event.key, event.code, event.keyCodeと、 event.which を表示し、マウスの状態も提供します。MDNからコピー＆ペーストせず、「NumpadEnter」が実際に何を意味するかを推測する必要がありません。

短い要約

プレビューするには event.key ほとんどのキーボード処理では、読みやすく、現代的で、ロケールに配慮しています。
プレビューするには event.code 物理キーの位置が文字よりも重要である場合（ゲームコントロール、位置に基づくショートカット）。
新しいコードに event.keyCode または event.whichを書かないでください。これらは動作しますが、廃止されており、予測が難しいです。
古くからのコードで keyCode === 13が見られる場合、それはEnterを意味します。 keyCode === 27 はEscapeを意味します。上の表に残りの項目があります。
見つからないキーがある場合は、キー情報ツールを押してすぐに答えを取得できます。