JavaScript マウスポインタの座標値を取得する方法【ウェブデザイン技能検定 1級学科範囲】

2024年12月17日 2024年11月22日 6分16秒

タスラ t3l

JavaScriptでは、ユーザーの操作に応じてイベントを処理することができます。
内容的にはWEBのジャンルのような気もしますが、ウェブデザイン技能検定の過去問に出てきた内容になりますので、STUDYのジャンルで記事を紹介したいと思います。

今回は、クリックイベントのハンドラ関数を使用して、マウスポインタの水平座標値と垂直座標値を取得する方法について解説します。

1 イベントハンドラとは
2 座標値の取得方法
3 clientXおよびclientYプロパティ
4 コンソールでの確認方法
5 他のプロパティとの比較
6 まとめ

イベントハンドラとは

イベントハンドラは、ユーザーの操作（クリック、キー入力、マウス移動など）に応じて実行される関数です。
特定の要素に対してイベントハンドラを登録することで、その要素に対するユーザー操作を検出し対応する処理を行うことができます。

座標値の取得方法

マウスポインタの座標値を取得するには、クリックイベントのイベントオブジェクトを利用します。
イベントオブジェクトには、マウスポインタの位置や操作に関する情報が含まれています。

clientXおよびclientYプロパティ

clientXプロパティは、マウスポインタの水平座標値を取得するために使用されます。また、clientYプロパティは、垂直座標値を取得するために使用されます。これらのプロパティは、イベントが発生した時点でのマウスポインタの位置をビューポート（表示領域）内で取得します。

使用例

以下のコードは、クリックイベントハンドラを設定し、マウスポインタの水平座標値と垂直座標値を取得してコンソールに表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>クリックイベントハンドラの例</title>
    <script>
        function clickHandler(event) {
            const x = event.clientX;
            const y = event.clientY;
            console.log('マウスポインタの水平座標値:', x);
            console.log('マウスポインタの垂直座標値:', y);
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('clickableElement').addEventListener('click', clickHandler);
        });
    </script>
</head>
<body>
    <button id="clickableElement">クリックして座標を取得</button>
</body>
</html>

この例では、clickHandler関数がクリックイベントのハンドラとして設定されています。ユーザーがボタンをクリックすると、イベントオブジェクトのclientXおよびclientYプロパティを使用してマウスポインタの水平座標値と垂直座標値を取得し、それをコンソールに表示します。

コンソールでの確認方法

JavaScriptのconsole.logメソッドを使用すると、ブラウザのデベロッパーツールのコンソールにメッセージを表示することができます。各ブラウザのデベロッパーモードを開くことで、出力された情報を確認できます。

デベロッパーツールの開き方

Google Chrome: F12キー、またはCtrl+Shift+I（Windows） / Command+Option+I（Mac）
Firefox: F12キー、またはCtrl+Shift+I（Windows） / Command+Option+I（Mac）
Edge: F12キー、またはCtrl+Shift+I（Windows） / Command+Option+I（Mac）
Safari: Command+Option+I（Mac）

デベロッパーツールを開き、コンソールタブを選択すると、console.logメソッドで出力されたメッセージを見ることができます。

他のプロパティとの比較

マウスポインタの座標を取得するためのプロパティには、clientXおよびclientY以外にもいくつかあります。それぞれの用途は異なります。

clientXおよびclientY: ビューポート（表示領域）内での座標値を取得する。
pageXおよびpageY: ドキュメント全体（スクロールを含む）での座標値を取得する。
screenXおよびscreenY: 画面全体での座標値を取得する。

まとめ

JavaScriptのクリックイベントハンドラを使用して、マウスポインタの水平座標値と垂直座標値を取得する方法について解説しました。

clientXおよびclientYプロパティを使用することで、ビューポート内でのマウスポインタの位置を簡単に取得できます。
また、pageX、pageY、screenX、screenYプロパティを使用することで、異なる座標系での位置を取得することもできます。
ウェブデザイン技能検定においても、イベントハンドラの基本は過去問に出題されていたこともありますので、是非理解しておきましょう。