JavaScriptの座標をマスター！初心者向け12選テクニック解説

はじめに
●JavaScriptと座標操作の基本
- ○座標とは
- ○JavaScriptで座標を操作する方法
●座標操作の使い方
●座標操作の応用例
●座標操作の注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで座標操作ができるようになります。

JavaScriptを使って座標を操作する方法はたくさんありますが、初心者にもわかりやすく、効果的に学べる12のテクニックをご紹介します。

サンプルコードも用意しているので、ぜひ参考にしてください。

●JavaScriptと座標操作の基本

○座標とは

座標とは、画面上の位置を示すための数値の組み合わせです。ウェブページでは、x軸（横軸）とy軸（縦軸）の2軸で座標を表現します。

左上が原点(0, 0)で、x軸は右方向に、y軸は下方向に数値が増えることに注意してください。

○JavaScriptで座標を操作する方法

JavaScriptでは、DOM要素の位置やサイズを操作するために、offsetLeft、offsetTop、clientWidth、clientHeightなどのプロパティを使います。

また、マウスイベントやタッチイベントを扱う際には、座標を取得するためのclientX、clientYプロパティが利用できます。

●座標操作の使い方

○サンプルコード1：要素の座標を取得

HTML要素の座標を取得するためのサンプルコードです。

要素のoffsetLeftとoffsetTopプロパティを使って、要素の位置を取得できます。

const element = document.getElementById('target');
const x = element.offsetLeft;
const y = element.offsetTop;

console.log(`要素の座標は、x: ${x}、y: ${y}`);

○サンプルコード2：要素の座標を変更

要素の座標を変更するためのサンプルコードです。

styleプロパティのleftとtopを使って、要素の位置を変更できます。

const element = document.getElementById('target');
const newX = 100;
const newY = 200;

element.style.left = newX + 'px';
element.style.top = newY + 'px';

console.log(`要素の座標をx: ${newX}、y: ${newY}に変更`);

○サンプルコード3：マウス座標を取得

マウスイベントのclientXとclientYプロパティを使って、マウスの座標を取得するサンプルコードです。

document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  console.log(`マウス座標は、x: ${mouseX}、y: ${mouseY}`);
});

○サンプルコード4：画面サイズに応じた座標操作

ウィンドウのサイズに応じて、要素の座標を変更するサンプルコードです。

ウィンドウのリサイズイベントを検出し、要素を画面中央に配置します。

const element = document.getElementById('target');

window.addEventListener('resize', () => {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  const newX = windowWidth / 2 - element.clientWidth / 2;
  const newY = windowHeight / 2 - element.clientHeight / 2;

  element.style.left = newX + 'px';
  element.style.top = newY + 'px';

  console.log(`要素の座標をx: ${newX}、y: ${newY}に変更`);
});

●座標操作の応用例

○サンプルコード5：ドラッグアンドドロップ機能

このサンプルコードでは、要素をドラッグアンドドロップできるようになります。

const element = document.getElementById('target');
let offsetX;
let offsetY;
let isDragging = false;

element.addEventListener('mousedown', (event) => {
  offsetX = event.clientX - element.offsetLeft;
  offsetY = event.clientY - element.offsetTop;
  isDragging = true;
});

document.addEventListener('mousemove', (event) => {
  if (!isDragging) return;
  const newX = event.clientX - offsetX;
  const newY = event.clientY - offsetY;

  element.style.left = newX + 'px';
  element.style.top = newY + 'px';
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

○サンプルコード6：画像スライダー

画像スライダーを実装するサンプルコードです。

画像を左右にスワイプして切り替えられます。

const slider = document.getElementById('slider');
const images = slider.getElementsByTagName('img');
let currentIndex = 0;

function slideTo(index) {
  if (index < 0 || index >= images.length) return;
  slider.style.transform = `translateX(-${index * 100}%)`;
  currentIndex = index;
}

document.addEventListener('click', (event) => {
  if (event.clientX < window.innerWidth / 2) {
    slideTo(currentIndex - 1);
  } else {
    slideTo(currentIndex + 1);
  }
});

○サンプルコード7：座標を利用したアニメーション

要素がマウスカーソルに追従するアニメーションを実装するサンプルコードです。

const element = document.getElementById('target');

document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  element.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
});

○サンプルコード8：マウス追従型のツールチップ

このサンプルコードでは、マウスカーソルに追従するツールチップを実装します。

const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
document.body.appendChild(tooltip);

document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  tooltip.style.left = mouseX + 10 + 'px';
  tooltip.style.top = mouseY + 10 + 'px';
});

document.addEventListener('mouseover', (event) => {
  if (event.target.dataset.tooltip) {
    tooltip.textContent = event.target.dataset.tooltip;
    tooltip.style.display = 'block';
  }
});

document.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

●座標操作の注意点と対処法

座標操作にはいくつかの注意点があります。

その注意点と対処法を何個か見ていきましょう。

要素の位置が変更された際に、他の要素に影響を与えることがある。
対処法: 座標操作を行う要素に position: absolute または position: fixed を設定して、他の要素に影響を与えないようにする。
ページのスクロール位置によって、座標値が変わることがある。
対処法: getBoundingClientRect() を使って、ビューポートに対する座標を取得する。

●カスタマイズ方法

○サンプルコード9：カスタム座標システム

独自の座標システムを実装するサンプルコードです。

ここでは、座標原点を画面中央に設定します。

function toCustomCoordinates(x, y) {
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;
  return { x: x - centerX, y: centerY - y };
}

function fromCustomCoordinates(x, y) {
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;
  return { x: x + centerX, y: centerY - y };
}

○サンプルコード10：座標変換の応用

座標変換を利用して、要素を回転させるサンプルコードです。

const element = document.getElementById('target');

function rotateElement(angle) {
  element.style.transform = `rotate(${angle}deg)`;
}

○サンプルコード11：3D座標操作

3D座標を操作するサンプルコードです。

ここでは、要素を3D空間で回転させます。

const element = document.getElementById('target');

// x, y, z 軸に沿った回転角度を指定して、要素を3D空間で回転させる関数
function rotate3D(x, y, z) {
  element.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`;
}

○サンプルコード12：SVG要素の座標操作

このサンプルコードでは、SVG要素の座標を操作します。

ここでは、SVGの円を移動させます。

const svgCircle = document.getElementById('circle');

// SVGの円を指定した座標に移動させる関数
function moveSVGCircle(x, y) {
  svgCircle.setAttribute('cx', x);
  svgCircle.setAttribute('cy', y);
}