JavaScriptキーイベント・キーコード確認ツール｜key / code / which をリアルタイム表示
キーボードを叩くだけで、JavaScriptのイベント情報（key, code, whichなど）を瞬時に可視化します。Webアプリケーションのデバッグやショートカットキーの実装、入力制御の動作確認に最適なエンジニア向けツールです。
💡 このツールでできること
「Webサイトにショートカット機能を実装したいが、キーの code が思い出せない」
「特定のキー入力によるブラウザのデフォルト挙動（F5更新など）を抑制したい」
開発現場でよくあるこうしたニーズに応える、シンプルなイベント・ビジュアライザーです。
通常、ブラウザのデベロッパーツールを開いて console.log で確認する手間がかかりますが、本ツールならページを開いてキーを叩くだけで、詳細なプロパティを一覧表示します。ShiftやCtrl、Meta（Command/Windows）キーとの組み合わせも一目で判別可能です。
📘 使い方のポイント
- 即座に確認：ページ上のどこでもキーを押すだけで、瞬時に詳細情報が表示されます。
- 物理キー vs 入力値：物理的な位置を示す
codeと、入力された文字そのものを示すkeyの違いを比較できます。 - デフォルト動作の無効化（Prevent Default）：チェックボックスを有効にすると、F12（開発者ツール）やF5（更新）といったブラウザ標準の動作をブロックした状態で入力をテストできます。
- イベント履歴の追跡：連続して入力した際、どの順番でイベントが発生したかを履歴リストで遡って確認できます。
🧐 よくある質問
Q. IME（日本語入力）をオンにしていると挙動が変わりますか？
A. はい。日本語入力（未確定状態）では、多くのブラウザで keyCode が 229 を返す仕様になっています。正確な物理キー情報を取得したい場合は、IMEをオフにした状態でテストすることをお勧めします。
Q. which プロパティが非推奨（Deprecated）と聞きました。
A. その通りです。最新のWeb標準では key または code プロパティの使用が強く推奨されています。本ツールでは、レガシーコードのメンテナンスや古いブラウザ対応の調査用として、あえて which や keyCode の表示もサポートしています。
Q. モバイルブラウザのソフトウェアキーボードでも使えますか？
A. 動作はしますが、モバイルOS（iOS/Android）の仕様により、一部のキー情報（特に物理的な code）が正しく取得できない、あるいは常に Unidentified になる場合があります。基本的にはPCでの利用を想定しています。
📚 豆知識：key と code の違い
JavaScriptのキーボードイベントには、混同しやすい2つの主要なプロパティがあります。
key（論理入力値）：ユーザーが入力した「文字」に基づきます。例えば、Shiftを押しながら「a」を叩けば、値はAとなります。言語設定や修飾キーの状態に依存します。code（物理キー位置）：キーボード上の「物理的な位置」に基づきます。JIS配列でもUS配列でも、一番左上にある「1」のキーは常にDigit1となります。
使い分けの目安：
- テキスト入力を制御したい、特定の文字入力をトリガーにしたい → key を使用
- ゲームの操作（WASDなど）や、物理配置を重視するショートカットを作りたい → code を使用