この記事で分かること
- マウス座標プロパティ（
x/clientX/pageX/screenX）の違い - 表示領域・ページ全体・画面全体の座標の取得方法
- 用途に応じた座標プロパティの使い分け
- UI 制御に役立つ実践的なサンプルコード
JavaScript のイベントオブジェクトには、マウスの位置を取得するための
x / y /
clientX / clientY /
pageX / pageY /
screenX / screenY
といったプロパティが用意されています。
これらを使うことで、ページ上・表示領域上・画面上のどこでイベントが発生したかを正確に取得できます。
UI 制御やツールチップ表示など、実務でも頻繁に使われる重要な知識です。
x / y（簡易的なマウス座標）
event.x と event.y は、マウスの位置を簡易的に取得するプロパティです。
ブラウザによっては clientX / clientY と同じ値を返します。
互換性の観点から積極的な利用は推奨されませんが、既存コードで見かけることがあるため理解しておくと便利です。
使用例：マウスのX座標・Y座標を表示
alert(event.x + "," + event.y);
clientX / clientY（表示領域内の座標）
clientX と clientY は、
ブラウザの表示領域（ビューポート）の左上からの相対座標 を返します。
スクロール位置の影響を受けないため、
ポップアップ・ツールチップ・ドラッグ処理など、UI 制御で最もよく使われる座標です。
使用例：表示領域内のX座標を表示
alert(event.clientX);
使用例：表示領域内のY座標を変数に代入
let cY = event.clientY;
pageX / pageY（ページ全体の座標）
pageX と pageY は、
ページ全体の左上からの相対座標 を返します。
スクロール量を含めた位置を取得できるため、
ページが長い場合や、スクロール位置に応じた UI 制御に向いています。
使用例：フォームに座標を代入
document.eForm.px.value = event.pageX;
document.eForm.py.value = event.pageY;
screenX / screenY（画面全体の座標）
screenX と screenY は、
ディスプレイ画面の左上からの相対座標 を返します。
OS レベルの位置に近いため、ウィンドウ位置の調整やマルチモニター環境での処理に利用されます。
使用例：画面上のY座標が250px以上なら処理を実行
if (event.screenY >= 250) myFunc();
マウス座標プロパティの違いまとめ
| プロパティ | 基準位置 |
|---|---|
x / y |
ブラウザによって clientX / clientY と同じ |
clientX / clientY |
表示領域（ビューポート）の左上 |
pageX / pageY |
ページ全体の左上（スクロール量を含む） |
screenX / screenY |
ディスプレイ画面の左上 |
実際のサンプル（座標をリアルタイム表示）
<div onclick="console.log('client:', event.clientX, event.clientY, 'page:', event.pageX, event.pageY)">
クリックして座標を確認
</div>
→ UI デバッグやクリック位置の確認に便利です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- イベント処理や UI 制御を基礎から理解したい
マウス座標（clientX / pageX / screenX）は、ツールチップ表示やクリック位置の判定など
UI 制御で頻繁に使われる重要な知識です。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
イベント処理の基礎が丁寧に解説されており、マウス座標の理解にもつながります。
この本で解決できること：
- イベントの仕組みを視覚的に理解できる
- クリック位置や UI の動きをイメージしながら学べる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
マウスイベントや UI 制御の理解が深まり、座標取得の応用にも役立ちます。
この本で解決できること：
- イベントの動作原理を体系的に理解できる
- 座標を使った UI 制御（ポップアップ・ツールチップなど）の基礎が身につく
- 実務で使えるイベント処理の書き方が学べる
動画で理解を深めたい方へ（Udemy講座）
マウス座標は「どこをクリックしたか」「どこにカーソルがあるか」を扱うため、
実際の動きを動画で確認できる Udemy は理解が一気に深まります。
UI 制御やイベント処理を学ぶのに最適です。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
マウスイベントの基礎も丁寧に扱われており、座標取得の理解にもつながります。
この講座で解決できること：
- マウスイベントの動きを視覚的に理解できる
clientX/pageXの違いを実際の動作で確認できる- 初心者がつまずきやすい UI 制御を丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、座標を使った高度な UI 制御を学びたい方に最適です。
この講座で解決できること：
- ツールチップ・ポップアップなどの座標ベースの UI 実装が理解できる
- マウス座標とイベント処理を組み合わせた実務的なコードが書ける
- 現代的な UI 制御をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
clientX/pageX/screenXの使い分けが曖昧なまま進んでしまう- 座標を使った UI 制御（ツールチップ・ポップアップ）が難しい
- イベント処理の設計が分からない
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
マウス座標を使った UI 制御やイベント処理の基礎を
丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい座標処理のポイントを事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
マウス座標に関するよくある質問（FAQ）
clientX と pageX の違いは？
clientX は表示領域基準、pageX はページ全体基準（スクロール量を含む）です。
スマホでも使える？
タッチイベントでは touches[0].clientX などを使います。
screenX は何に使う？
画面全体の位置が必要な場合（マルチモニター対応など）に利用します。
どの座標を使えばいい？
UI 制御なら clientX、スクロール対応なら pageX、画面基準なら screenX を使います。
まとめ
x/y：簡易的なマウス座標clientX/clientY：表示領域内の座標pageX/pageY：ページ全体の座標（スクロール含む）screenX/screenY：画面全体の座標- 用途に応じて使い分けることで正確な位置取得が可能
