キーボードイベントテスター

event.key: 論理キー値 — キーボードレイアウトと修飾子に基づいてキーが生成するもの。修飾子なしで"a"、Shiftで"A"、"Enter"、"ArrowLeft"。ロケール対応です。event.code: キーボード上の物理キーの位置、レイアウト非依存。"KeyA"、"Enter"、"ArrowLeft"、"Digit1"。Shiftが押されているかどうかに関わらず、同じコードです。event.keyCode（非推奨）: 数値コード。ブラウザとOSで異なります。代わりにevent.keyまたはevent.codeを使用してください。ベストプラクティス: 文字入力にはevent.keyを使用し、位置ベースのショートカット（ゲーム内のWASDなど）にはevent.codeを使用します。

イベントのブール値プロパティを確認してください：event.ctrlKey、event.shiftKey、event.altKey、event.metaKey（Mac上の⌘、Windows上の⊞）。例：if (event.ctrlKey && event.key === "s") saveDraft()。修飾キー自体は"Control"、"Shift"、"Alt"、"Meta"のキー値を持つkeydownイベントを発火させます。クロスプラットフォームショートカットの場合：Windows/LinuxではctrlKeyをCtrlに使用し、MacではmetaKeyを⌘に使用してください：const isModKey = event.ctrlKey || event.metaKey。KeyboardEvent.getModifierState("CapsLock")は永続的な修飾子の状態をチェックします。

keydown: キーが最初に押されたときに発火します。保持されている場合は繰り返し発火します。Ctrl、Shift、矢印キーを含むすべてのキーで機能します。最適な用途：ショートカット、ゲーム制御、デフォルトの防止。keypress（非推奨）: 文字生成キーでのみ発火します。矢印キー、バックスペースなどでは発火しません。keydown + event.keyを優先して非推奨です。keyup: キーが解放されたときに発火します。キー押下ごとに1回だけ発火します。最適な用途：繰り返さずにキーが押されたときを検出します。入力イベント（入力、変更）：キーボードイベントよりもテキスト入力追跡に優れています。

keydownハンドラーでevent.preventDefault()を呼び出します。例：document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "s") { e.preventDefault(); save(); } })。制限：一部のOS レベルのショートカット（Ctrl+Alt+Delete、Winキー、ミッションコントロール）は防止できません。ブラウザのショートカットはブラウザによって異なります。iframe内では、一部のショートカットが親によってインターセプトされる場合があります。Reactの合成イベント：event.nativeEvent.preventDefault()またはevent.preventDefault()の両方が機能します。注：event.stopPropagation()はイベントのバブリングを防ぎますが、ブラウザのデフォルト動作は防ぎません。

Reactは合成イベントを使用します：onKeyDown、onKeyUp、onKeyPress（非推奨）。例：<input onKeyDown={(e) => { if (e.key === "Enter") submit(); if (e.key === "Escape") cancel(); }}。グローバルショートカットの場合：useEffectを使用してネイティブイベントリスナーを追加/削除します。常にクリーンアップでリスナーを削除してください：useEffect(() => { const handler = (e) => {...}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [])。複雑なショートカットシステムの場合は、react-hotkeys-hookやtinykeysなどのライブラリを使用してください。