キーコードチェッカー

キーコードチェッカー（Keycode Checker）は、ブラウザ上で押したキーボードのキーが、JavaScript内でどのようなイベントデータとして認識されるかを瞬時に確認できる開発者向けツールです。

フロントエンド開発では、ユーザーのキー入力に対するショートカットキーの実装やゲームの操作処理などで正確なキー判定が求められます。本ツールを使うことで、押下したキーの event.key、event.code、event.keyCode といった主要なプロパティ値を一目で取得し、ワンクリックでコピーすることができます。キーボードの配列（JISやUSなど）による値の違いや、Shift、Ctrlといった修飾キーとの組み合わせ時の挙動も簡単にテスト可能です。

キーボードの入力履歴の確認や、e.preventDefault() を有効にした際のブラウザ標準アクション（Tab移動やSpaceスクロールなど）の抑制テストもブラウザ上で安全に実行できます。

event.key

ユーザーが実際に押したキーが入力する文字や役割を表すプロパティです。例えば、USキーボードで Shift + 1 を押した場合、出力される文字である ! が event.key として取得されます。論理的な入力値を判定する際、現在最も推奨されるプロパティです。

event.code

物理的なキーボード上の「どの位置にあるキーを押したか」を示すプロパティです。キーボードの言語配列に関わらず、「Aのキーボードの物理位置」にあるキーを押せば常に KeyA が返ります。ゲームのWASD移動など、物理配置に依存する操作を実装する場合に重宝します。

event.keyCode / event.which

押されたキーに割り当てられたシステム固有の数値コード（例: Aなら 65）を返すプロパティです。長らくJavaScript開発で使われてきましたが、現在では非推奨（Deprecated）となっています。互換性確認のためだけに利用してください。

event.location

押されたキーがキーボードのどの物理的領域にあるかを示す数値です。標準キー（0）、左側修飾キー（1）、右側修飾キー（2）、テンキー（3）などを判別できます。左右の Shift キーを区別したい場合などに役立ちます。

preventDefault()

イベントが発火した際に、ブラウザが元々持っている標準の動作（例えば Space キーで画面を下へスクロールする、など）をキャンセルするためのJavaScriptメソッドです。

Q.スマートフォンやタブレットでも使えますか？

物理キーボードを接続している場合は正常に動作します。ただし、画面上のソフトウェアキーボードの場合、OSやブラウザの実装によっては keydown イベントが正しく発火しない、またはすべて同じキーコード（例: 229）として返されることがあるため、本ツールは物理キーボードでの利用を前提としています。

Q.event.key と event.code のどちらを使うべきですか？

用途によります。「Enterキーを押して送信」のように、キーの意味・入力される文字自体を判定したい場合は event.key を使います。一方、「W, A, S, Dキーでキャラクターを動かす」といったように、キーボード上の物理的な位置を基準にしたい場合は event.code を使うのがベストプラクティスです。

Q.F5キーやCtrl+Wなどのショートカットを防ぐことはできますか？

JavaScriptの e.preventDefault() を使用しても、タブを閉じる、ウィンドウをリロードする、ブラウザのデベロッパーツールの起動など、セキュリティやOS/ブラウザレベルで予約されている強権的なショートカットキーは完全に防ぐことができない場合があります。

Q.event.keyCode はなぜ非推奨なのですか？

ブラウザやOS、キーボードの配列によって返される数値が異なる場合があり、互換性の問題を引き起こしやすいためです。現在は event.key または event.code の使用が推奨されています。

Q.入力されたキー情報はサーバーに送信されますか？

送信されません。すべての処理はブラウザのJavaScriptで完結しており、キー入力の履歴が外部のサーバーに送信・保存されることは一切ありません。

キーコードの確認が必要となる、代表的な開発シーンをご紹介します。