Event KeyCodesテスター

Event KeyCodesテスターは、JavaScript開発者向けのリアルタイムキーボードイベントインスペクターです。静的な参照テーブルとは異なり、キーを押すとライブで KeyboardEvent オブジェクトをキャプチャし、キーボードイベント処理に関わるすべてのプロパティを表示します：event.key、event.code、event.keyCode、event.which、event.location、修飾キーの状態、そしてキーが押され続けているかどうか（event.repeat）。

キーボードイベントの処理は、フロントエンド開発で最もトリッキーな部分の一つです。最新の event.key プロパティは "Enter" や "ArrowDown" のような人間が読める値を返しますが、event.code はレイアウトやアクティブな修飾キーに関係なくキーボード上の物理的なキーを識別します。例えば、QWERTYキーボードで「Z」キーを押すと、AZERTYレイアウトで同じ物理キーが「W」を入力する場合でも、event.code は "KeyZ" を返します。この区別を理解することは、アクセシブルで国際化されたキーボードショートカットの構築に不可欠です。

レガシーのプロパティ keyCode と which はW3C UI Events仕様で非推奨となっていますが、既存のコードベースで広く使用されており、すべての主要ブラウザでまだサポートされています。本ツールはモダンとレガシーの値を並べて表示するため、古いコードの移行や両方のアプローチのサポートが容易です。非推奨のプロパティは明確にラベル付けされているため、新しいプロジェクトで避けるべき値がわかります。

イベント履歴ログは直近の20回のキー入力を記録し、各エントリのキー、コード、keyCode、イベントタイプ、アクティブな修飾キー、正確なタイムスタンプを表示します。これはキーシーケンスのデバッグ、Ctrl+Shift+K のような修飾キーの組み合わせのテスト、または keydown と keyup イベントが期待どおりの順序で発生することの検証に特に便利です。テスト、ドキュメント、バグレポート用にイベントをJSONオブジェクトとしてコピーできます。すべての処理はブラウザ内で完全に実行され、キー入力がサーバーに記録・送信されることはありません。

1. ツール上部のフォーカスエリアをクリックします。ページ読み込み時に自動でフォーカスされますが、いつでもクリックして再フォーカスできます。
2. キーボードの任意のキーを押します。ツールは即座にすべてのイベントプロパティをカードで表示します：event.key、event.code、keyCode、which、location、repeat。
3. 修飾キーバッジ（Shift、Ctrl、Alt、Meta）でどの修飾キーがアクティブかを確認します。アクティブな修飾キーは緑色でハイライトされます。
4. イベントタイプインジケーター（keydown、keypress、keyup）でキー入力に対してどのイベントが発生したかを確認します。
5. プロパティカードにマウスを合わせてコピーアイコンをクリックし、その値をクリップボードにコピーします。JSONとしてコピーボタンでイベント全体をJSONオブジェクトとしてコピーします。
6. 下にスクロールしてイベント履歴テーブルで直近の20回のキー入力をタイムスタンプと修飾キーの詳細とともに確認します。履歴をクリアをクリックしてリセットします。