キーボードイベントの取得

onKeyDown, onKeyUp, onKeyPress などのイベントを使って、ユーザーのキーボード入力を検知し、処理することができます。

1. 基本のonKeyDownイベントの使用

const handleKeyDown = (e: React.KeyboardEvent
<HTMLInputElement>) => {
  console.log("押されたキー:", e.key);
};

const App = () => {
  return <input onKeyDown={handleKeyDown} placeholder="キーを押してみてください" />;
};

• onKeyDownはキーが押された瞬間に発火します。
• e.keyで実際に押されたキーの文字列が取得できます（例：”Enter”, “a”, “Escape” など）。

2. 特定のキーに反応する（条件分岐）

const handleKeyDown = (e: React.KeyboardEvent
<HTMLInputElement>) => {
  if (e.key === "Enter") {
    alert("Enterキーが押されました");
  }
};

✅ e.key === "Enter" や e.code === "Enter" を使って、特定のキーにだけ反応する処理ができます。

3. フォームでEnterキー送信を無効化

const handleKeyDown = (e: React.KeyboardEvent
<HTMLInputElement>) => {
  if (e.key === "Enter") {
    e.preventDefault(); // 送信をキャンセル
  }
};

• Enterキーでフォーム送信されるのを防ぎたいときに使えます。

4. コンポーネント全体でキーボード入力を検出（useEffect＋window）

import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    const handleGlobalKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        console.log("Escが押されました");
      }
    };

    window.addEventListener("keydown", handleGlobalKey);
    return () => window.removeEventListener("keydown", handleGlobalKey);
  }, []);

  return 
<div>全体でEscキーを検知しています</div>;
};

🧠 フォーカスに依存せずグローバルに検出したいときは、windowにリスナーを追加します（useEffectでクリーンアップも忘れずに）。

5. イベント型の指定

キーボードイベントを活用することで、ショートカットキー対応・フォーム制御・アクセシビリティ強化などの応用が可能になります。