JavaScript キーボードイベント

1. キーボードイベントの概要

キーボードイベント（Keyboard Events）は、ユーザーがキーボードのキーを押した際に発生します。主に以下の3種類がありますが、モダンな開発では使い分けが重要です。

• keydown（キーが押し下げられたとき）
• keyup（キーが離されたとき）
• keypress（非推奨 / デプレケーテッド）

keypress は文字キー（「a」や「5」など）に対してのみ発火し、制御キー（Alt、Backspaceなど）では発火しません。そのため、開発者は代わりに keydown または keyup を使用することが推奨されています。

2. keydown イベント

event.key プロパティを使用することで、どのキーが押されたかを直接取得できます。

2.1 コード例：押されたキーを表示する

以下の例では、入力フィールドでキーを押すと、そのキーの値をリアルタイムで表示します。

<input id="k" type="text" placeholder="キーを押してください">

<p id="demo"></p>

<script>
const k = document.getElementById("k");

// 要素 k に対して keydown イベントをリッスン
k.addEventListener("keydown", function (event) {
  // event.key を取得して表示
  document.getElementById("demo").innerHTML = "押されたキー: " + event.key;
});
</script>

3. キーに関するプロパティ

KeyboardEvent オブジェクトは、イベントに関与したキーを特定するための有用なプロパティを提供します。特に key と code の違いを理解することが重要です。

また、event.ctrlKey、event.shiftKey、event.altKey、event.metaKey などのプロパティを組み合わせて使用することで、ショートカットキー（例：Ctrl + S）の実装も可能です。

4. Enter キーの検知

フォームの送信などでよく使われる、Enterキーの判定方法です。ここでは event.code を使用した確実な判定方法を紹介します。

4.1 コード例：Enterキーの特定

<input id="in01" type="text" placeholder="Enterキーを押してください">

<p id="demo"></p>

<script>
const in01 = document.getElementById("in01");

// 要素 in01 に対して keydown イベントをリッスン
in01.addEventListener("keydown", function (event) {
  // event.code が "Enter" の場合にのみ処理を実行
  if (event.code === "Enter") {
    document.getElementById("demo").innerHTML = "Enterキーが押されました！";
  }
});
</script>

5. まとめ

JavaScriptが提供するキーボードイベントを適切にハンドルすることで、以下のような高度なユーザー体験を実現できます。

• リアルタイムのフォームバリデーション
• ブラウザゲームの操作コントロール
• アプリケーション独自のキーボードショートカット

これらを活用して、より直感的でアクセシブルなウェブサイトを構築しましょう。