Prompt

JavaScriptのEventオブジェクトは、意外にもたくさんの情報が含まれているので、積極的に活用すべきである!

その通り! 「とりあえず e.preventDefault() するための引数」 程度に思われがちだけど、還元主義的にその中身を解剖してみると、JavaScriptの Event オブジェクト(および MouseEventKeyboardEvent などの派生オブジェクト)は、ブラウザから渡される 「情報の宝庫」 なんだよね。

情報工学を学ぶ君なら、これらのプロパティを「単なるデータ」としてではなく、「ユーザーの物理的な挙動をOSとブラウザがどう抽象化したか」 という視点で眺めると、より面白く活用できるはずだよ!

特にお勧めの、意外と見落とされがちな「活用すべきプロパティ」を深掘りしてみよう!


1. 座標系の使い分け(マウス・タッチイベント)

単に「クリックされた場所」と言っても、Event オブジェクトには複数の座標系が含まれている。これを知っているだけで、自作 UI の実装が劇的に楽になるよ。

  • clientX / clientY: ブラウザの表示領域(ビューポート)からの相対座標。

  • pageX / pageY: スクロール量を含めたページ全体からの相対座標。

  • offsetX / offsetY: イベントが発生した 「要素そのもの」 からの相対座標(Canvas でのお絵描きや、カスタムスライダーの実装に最適!)。

  • movementX / movementY: 前回のイベントからの移動量。マウスロック(Pointer Lock API)を使った FPS ゲームのような操作を作る時に必須だね。


2. キーボードの「物理的」な識別:code vs key

君は JIS 配列のキーボードを使っているから、この違いは特に重要かもしれないね。

  • e.key: 入力された「文字」そのもの。設定(IMEや配列設定)に依存する。

  • e.code: キーボードの 「物理的な位置」。配列設定が何であれ、左上の「Q」の位置は常に KeyQ になる。

活用例: ゲームの移動(WASD)などは code を使えば、ユーザーのキーボード配列が何であれ同じ位置のキーを割り当てられるよ。


3. 修飾キーの状態:shiftKey, ctrlKey, metaKey

わざわざ別途フラグを管理しなくても、イベントが発生した瞬間に 「どの修飾キーが押されていたか」 が boolean で入っている。

  • e.altKey: Alt(MacならOption)

  • e.metaKey: Windowsキー(MacならCommand)

  • e.ctrlKey: Ctrl

これを使うだけで、「Ctrl + クリックで別タブで開く」といった、デスクトップアプリ並みのリッチな操作系 を JavaScript だけで簡単に実装できるんだ。


4. イベントの「伝播」を制御する:target vs currentTarget

バブリング(イベントの伝播)を利用する際、この2つの違いを理解しているとバグが激減するよ。

  • e.target: 実際にイベントが発生した 「一番末端の要素」

  • e.currentTarget: イベントリスナーが 「登録されている要素」


5. 意外な便利情報:isTrusteddetail

  • e.isTrusted: そのイベントが 「本物のユーザー操作」 によるものか、スクリプト(element.click() など)によるものかを判別できる。不正操作防止の簡易的なチェックに使えるね。

  • e.detail: クリックイベントの場合、「何連打目か」 の数値が入っている(ダブルクリックなら 2、トリプルクリックなら 3)。自前でダブルクリック検知タイマーを作らなくて済むんだ。


豆知識:Rust (Wasm) での Event 活用

君が Rust でバックエンドだけでなくフロント(Wasm)も触るなら、web-sys クレートを使ってこれらのプロパティにアクセスすることになる。

Rust の厳格な型システムを通すと、EventMouseEventdyn_into() して座標を取り出すというプロセスが発生するから、「JavaScript がいかに動的かつ柔軟にこれらの巨大な情報を扱っているか」 が逆説的に体感できて面白いよ!


落とし穴:プロパティの「参照」

console.log(e) をして、後から Chrome のコンソールで展開して中身を見ようとすると、プロパティが消えていたり(Null化)、現在の状態に書き換わっていたりすることがある。

これはブラウザの 「イベントプーリング」 や最適化の影響だから、デバッグする時は console.log(e.clientX) のように 「その瞬間に必要な値」 を直接出力するのが鉄則だね。


これだけ情報が詰まっている Event オブジェクト、君のプロジェクト「AXON」や、将来作るかもしれない「TUI音ゲー」のロジックでも、きっと強力な味方になってくれるはずだ。

次は、この Event を使って 「ドラッグ&ドロップを自作する時の最小実装」 について話してみる?それとも、もっと変態的な 「Pointer Events API」 (筆圧や傾きまで取れるやつ)の話にする?

Would you like me to provide a code snippet for handling complex keyboard shortcuts using the Event object?