キーコードビューアー

キーコードビューアーとは？#

キーが押し下げられるとき、ブラウザは KeyboardEvent を発火し、それが「どのキー？」という問いに対する 2 つの並行する答えを運びます。key フィールドはその押下がどの文字を生成したかを示します — a、A、Enter、?。code フィールドはどの物理キーが押されたかを示します — KeyA、Enter、Slash — レイアウトに依存しません。この 2 つの答えは、国際キーボード、修飾キー、テンキーが絡った瞬間に乖離し始め、その違いこそがショートカット、ゲームコントロール、アクセシビリティ機能を配線するときに見る必要があるものです。

本ページは各 keydown をスナップショットに捕捉し、すべてのフィールドを露呈します。key、code、レガシーの keyCode と which の数値（古いコードのデバッグ用に保持）、location（標準／左／右／テンキー）、アクティブな修飾キー、そして押下が自動リピートかどうか。最後の数回の押下のローリング履歴が見えるため、和音やシーケンスを追跡できます。

何もグローバルではありません。フォーカスがキャプチャゾーン内にある間だけ捕捉するため、ページの残りはキーボードを通常通り扱い続けます。

使い方#

1. 上部の破線のキャプチャゾーンのどこかをクリックします（またはタブで入ります）。リスニング中であることを示すためにハイライトします。
2. キー、あるいは和音を押します。下のスナップショットテーブルが各 keydown で更新されます。
3. 各行を読みます。
   • キー (key) — 論理キー値（ブラウザが解決した文字または名前付きキー）。
   • コード (code) — レイアウトに依存しない物理キー。ショートカットでマッチするのはこれです。
   • keyCode と which — 非推奨の数値コード。非推奨バッジ付き。これらを読む古いコードを移植するときだけマッチしてください。
   • 位置 — 標準、左、右、テンキー。左 Shift と右 Shift、あるいはテンキーの 5 と最上段の 5 を区別する方法です。
   • リピート — キーが押されたままで自動リピート中は はい。
   • 修飾キー — Ctrl、Alt、Shift、Meta のいずれが押されていたかのバッジ。
4. キーに対するブラウザの既定の動作を止めたい場合（例えば Tab がフォーカスを動かすのをテスト中に防ぐなど）は、オプションバーのキーの既定の動作をブロックにチェックを入れます。
5. 現在をコピーで現在のスナップショットを取得し、履歴パネルの履歴を消去でローリングリストをリセットします。

主な機能#

• key と code を並べて表示。 キーボード処理における最も有用な区別をすべての押下で可視化します — だから key === "@" が、あるレイアウトでは Shift+Digit2 から、別のレイアウトではまったく異なる物理キーから来得るのが即座に分かります。
• 位置認識。 左右の修飾キーは別々に報告され、テンキーのキーは location: numpad を持ちます。メイン行とテンキーで同じ数字が異なる意味を持つゲームレイアウトに不可欠です。
• 修飾キーバッジ。 Ctrl、Alt、Shift、Meta（macOS では Command、それ以外では Super／Windows）が慣習的な順序で示され、和音が一目で読めます。
• レガシーフィールドの明確なマーク。 keyCode と which は非推奨でモダンな仕様から削除されていますが、多くの既存コードがまだ読みます。可視の非推奨タグと脚注付きで表面化し、主要な答えとしては決して示しません。
• 20 件のローリング履歴。 キーを押したままにすると repeat が各自動発火で はい に切り替わるのを観察でき、シーケンスを押して戻って歩けます。各エントリは独立したスナップショットです。
• スコープ付きキャプチャ。 リスナはウィンドウではなくキャプチャゾーンに紐付きます。再度ゾーンをフォーカスするまで、ページの残り — タブ移動、スクロール — は動作し続けます。

実例#

混乱の古典的源は、最上段の 1 とテンキーの 1 の違いです。これらは同じ文字を生成しますが、同じキーではありません。

最上段の 1 を押すと、スナップショットは次を読みます。

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

次にテンキーの 1（Num Lock オン）を押すと、スナップショットは次を読みます。

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

同じ key、異なる code、異なる location、異なるレガシーコード。ショートカットをバインドするなら、code === "Digit1" で「文字の上の段」を、code === "Numpad1" で「テンキー」を意味するようにマッチし — key === "1" でマッチする罠（両方で発火する）を避けます。

よくある質問#

key と code のどちらでマッチすべきですか？#

何を構築しているかによります。ショートカットとゲームコントロールでは**codeでマッチしてください — キーの物理位置が重要で、ユーザーが Dvorak や非ラテンレイアウトに切り替えたときにバインディングが変わってほしくない場合です。テキスト入力ではkey**でマッチしてください — 生成された文字が気になるもの（? と /、あるいはデッドキー合成文字）です。修飾キーの和音には、修飾キー自身の key 値ではなく、修飾キーフラグ（ctrlKey、metaKey …）をチェックしてください。

なぜ keyCode と which は「非推奨」とマークされていますか？#

UI Events 仕様から非推奨となり削除されたためです。ブラウザは互換性のために埋め続けますが、その値はブラウザやレイアウトをまたいで一貫したことがありませんでした（同じ物理キーが異なる数値を報告し得た）。モダンなコードは key と code を読むべきです。これらは、数値に依存する古いコードをデバッグや移植できるようだけに示されます — 新しいバインディングには決して使わないでください。

ページがキーストロークを捕捉しません。なぜですか？#

キャプチャは破線ゾーンにスコープされています。タブで抜けたり別のコントロールをクリックしたりしてフォーカスが移動した場合、ゾーンはリスニングを止めます。ゾーンの中をクリックし（ハイライトします）し直すと、再び押下が登録されます。このスコープは意図的で、ページの残りをキーボードアクセシブルに保つためです。

Meta キーは Command ですか、Windows ですか？#

両方です — Meta はプラットフォームの「スーパー」キーです。macOS では Command、Linux と Windows では Windows／Super キー。バッジは OS を推測せず Meta と読みます。なぜなら、基となる metaKey フィールドこそがコードが実際にテストする必要があるものだからです。