ZeroTool Workbench
JavaScript キーコードエクスプローラー
ブラウザで任意のキーを押すと event.key、event.code、keyCode、charCode、location、repeat、修飾キー状態を即時表示。コピー可能な JS スニペット付き。完全ブラウザ完結、設定不要。
使い方
- キャプチャパッドをクリックすると、初回読み込み時に自動でキーボードフォーカスを取得する。
- 任意のキーを押す。修飾キー・ファンクションキー・矢印キーすべて動作する。
- event.key、event.code および非推奨の keyCode / which / charCode を確認。
- Shift / Ctrl / Alt / Meta を押下中は対応する修飾キーピルが点灯する。
- 生成された JS スニペットをコピーして自分のコードにそのまま使える。
event.key vs event.code vs keyCode
フロントエンドのキーボードバグの多くはこの3つの混在が原因。リファレンス対応表：
| プロパティ | レイアウト依存 | 推奨 | QWERTY で A を押した時の値 |
|---|---|---|---|
| event.key | あり（現在のレイアウト反映） | 推奨——セマンティック判定 | ”a” または Shift で “A” |
| event.code | なし（物理位置） | 推奨——ゲーム・ショートカット | ”KeyA” |
| keyCode | なし | 非推奨 | 65 |
| which | なし | 非推奨 | 65 |
| charCode | なし | 非推奨——keydown 時は常に 0 | 0 |
よくある用途
- キーボードハンドラのデバッグ——実際の event.key を if 条件に貼ってタイポを直す。
- ゲームコントロール構築——event.code を使えば AZERTY でも WASD が機能する。
- コマンドパレット実装——event.key と e.ctrlKey / e.metaKey を組み合わせる。
- レガシーコード監査——keyCode / which を読み、旧ハンドラを event.key に移行する。
- IME 入力中の判定——e.isComposing = true は IME 変換中。単一キーハンドラは早期 return すべき。
preventDefault の挙動
キャプチャパッドは Tab、Space、Backspace、矢印キー、F1-F12 のみ preventDefault() を呼び出す——
ブラウザがナビゲーション・ページ操作で消費するキー。Ctrl+W / Cmd+Q などのシステムショートカットは
傍受せずブラウザのデフォルト動作を維持する。
FAQ
event.key、event.code、keyCode の違いは？
event.key はキーボードレイアウト適用後の文字または名前付きキー値（Dvorak レイアウトで物理 A 位置を押すと 'a' になる）。event.code は US QWERTY ベースの物理キー位置（KeyA、Digit1、ArrowUp）でレイアウトに依存しない。keyCode はレガシーな数値コード（A は 65）で仕様上は非推奨だが、互換性のため主要ブラウザは現在も発火する。
なぜ keyCode・which・charCode は非推奨なのか？
3つともブラウザ間で値が一貫せず、非ラテン系レイアウトでは曖昧。モダンコードは event.key（セマンティック）または event.code（物理位置）を使うべき。MDN は keyCode と charCode を「deprecated, not recommended for production」と明記しているが、主要ブラウザは互換性のため出力を継続している。本ツールは生の値を表示するのでレガシーコードの監査に使える。
Shift / Ctrl / Alt / Meta 修飾キーをどう判定する？
KeyboardEvent の e.shiftKey、e.ctrlKey、e.altKey、e.metaKey を直接読めばよい。それぞれ boolean。注意：e.metaKey は Windows では Win キー、Mac では Command キー。本ページで生成されるスニペットは現在の修飾キー状態を反映して判定式を自動組み立てする。
モバイルで動作する？
モバイル端末の物理キーボードイベントはプラットフォーム間で一貫しない——多くのソフトキーボードは文字単位の keydown を発火せず、結果文字列だけが input イベントとして届く。本ツールはデスクトップブラウザを前提に設計しており、デスクトップ環境で物理キー信号が最も完全に取得できる。モバイルでは部分情報のみ取得できる降格用シングル文字入力欄を提供するが、フル機能のイベントプロパティ検査にはデスクトップブラウザを使用すること。設計上、モバイル keydown のエミュレーションは行わない。
キー入力データはサーバーに送信される？
送信されない。すべてブラウザネイティブの KeyboardEvent API でローカル処理されるため、押したキーは端末から出ない。DevTools → Network で確認可能。