JavaScript KeyCode＆キーイベントリファレンス
任意のキーを押してイベントプロパティを確認。検索可能なリファレンステーブルで全キーコードを参照できます。
このツールについて
JavaScript KeyCode＆キーイベントリファレンスは、開発者がキーボード
イベントのプロパティを素早く調べられる無料のブラウザベースツールです。
インタラクティブエリアでキーを押すと、ツールがネイティブの
KeyboardEvent をキャプチャし、必要なプロパティをすべて表示します：
event.key、event.code、
event.keyCode、event.which、モディファイア状態
（ctrlKey、shiftKey、altKey、metaKey）、
およびキーの物理的な位置（標準、左、右、テンキー）。
キーボード入力を正しく処理することは、フロントエンド開発で最もよくある課題の
一つです。レガシーの keyCode と which プロパティはかつて
キーを識別する唯一の信頼できる方法でしたが、ブラウザやキーボードレイアウトによって
動作が一貫しません。最新の event.key プロパティは
"Enter" や "ArrowUp" のような人間が読める文字列を返し、
event.code はどの文字が生成されるかに関係なく物理的なキーを
識別します。このツールは3つの表現を並べて表示するため、ユースケースに合った
正しいものを選択できます。
下部の検索可能なリファレンステーブルには、すべての標準キーとその名前、
event.key の値、event.code の値、レガシーの
keyCode 番号が一覧表示されています。カテゴリ（文字、数字、ファンクション
キー、ナビゲーション、モディファイア、句読点、特殊キー）でフィルタリングでき、
検索バーで目的のキーに即座にジャンプできます。インタラクティブエリアでキーを押すと、
テーブル内の該当行がハイライトされ、素早く相互参照できます。
すべての処理はブラウザ内で完結します。キー入力が記録、送信、またはサーバーに 保存されることはありません。機密性の高いモディファイアの組み合わせを含む キーボードショートカットのテスト時にも安全にお使いいただけます。
使い方
- 上部のPress Any Keyエリアをクリックしてキーボードフォーカスを設定します。
- キーボードの任意のキーを押します。ツールが即座に
event.key、event.code、keyCode、which、モディファイア状態、キーの位置を表示します。 - 各値の横にあるコピーボタンをクリックしてクリップボードにコピーします。
- 下にスクロールしてリファレンステーブルで利用可能なすべてのキーコードを参照します。
- 検索バーを使用してキー名、イベント値、keyCode番号、説明でフィルタリングします。
- カテゴリタブ（文字、数字、ファンクション、ナビゲーション、モディファイア、句読点、特殊）を切り替えてテーブルを絞り込みます。
- 最後に押したキーに対応するテーブル行が自動的にハイライトされ、簡単に識別できます。
よくある質問
event.keyとevent.codeの違いは何ですか？
event.keyはモディファイアやキーボードレイアウトを考慮した、キー押下に関連する文字や機能を返します（例：Shift+1を押すと"!"が返されます）。event.codeはレイアウトやモディファイアに関係なく、キーボード上の物理的なキーを識別します（例："Digit1"は"1"を入力しても"!"を入力しても常に同じ物理キーです）。
event.keyCodeは非推奨ですか？
はい。event.keyCodeとevent.whichの両方がUI Events仕様で非推奨となっています。後方互換性のためにブラウザでサポートされ続けており、開発者が広く検索しています。新しいコードではevent.keyまたはevent.codeを使用してください。
一部のキーでイベントが発生しないのはなぜですか？
特定のキーやキーの組み合わせは、ページに到達する前にOSやブラウザによってインターセプトされます。例えば、macOSのCmd+QはブラウザをQuitし、Ctrl+Wはタブを閉じます。Print ScreenもOSによってキャプチャされる場合があります。これらのイベントはWebアプリケーションで確実に検出することはできません。
locationプロパティは何を意味しますか？
event.locationはキーボード上のキーの位置を示します。値0（Standard）は一般的なキー、1（Left）と2（Right）は左右のShiftなど重複するキーを区別し、3（Numpad）はテンキーのキーを識別します。
データは安全ですか？
もちろんです。このツールはブラウザ内で完全に動作します。キー入力が記録されたり、サーバーに送信されたり、どこかに保存されることはありません。ブラウザのDevToolsのNetworkタブで確認できます。
keydown、keyup、keypressのどれを使うべきですか？
ほとんどのユースケースではkeydownを使用してください。モディファイアやファンクションキーを含むすべてのキーで発火します。keypressイベントは非推奨で、最新のブラウザでは印字不可能なキーに対しては発火しません。keyupはキーが離されたことを特に知る必要がある場合にのみ使用してください。
keyCodeの値がキーボードによって異なるのはなぜですか？
レガシーのkeyCode値はキーボードレイアウトやOSによって異なる場合があり、非推奨となった理由の一つです。例えば、セミコロンキーはUSレイアウトとヨーロッパレイアウトで異なるコードを報告する場合があります。この不整合が、W3Cが最新のアプリケーションでevent.key（生成される文字用）またはevent.code（物理キー用）の使用を推奨する理由です。