カーソルの座標取得

備忘録として、カーソルの座標を取得する方法を書いていきたいと思います。
私は現在 Reactの勉強中で、ウェブサイトを作るときにカーソルストーカーを作ってみたかったので調べてみました。

App.jsx

import './App.css';
import { useState } from 'react';
const App = () => { 
    const [mousePosition,setMousePosition] = useState( { x : 0 , y : 0 } ); 
    const moveMouse = (e) => { 
        setMousePosition( { x : e.clientX, y : e.clientY}); 
    } 
    return ( 
    <div className='main' onMouseMove={moveMouse}> 
        <h1>座標</h1> 
        <p>x : { mousePosition.x } , y : {mousePosition.y} </p> 
    </div> 
    ); 
}

export default App;

App.css

*{
margin:0; 
padding:0; 
} 
.main{ 
height:100vh; 
width:100vw; 
}

このコードはおそらく座標を取得するための最低限のコードですが、少しわからなかったことがあったので、それについての詳細を記述していきます。

まず、何を考えるかというと、カーソルが動いたらカーソルの座標を更新するので、その座標の状態を把握する必要がある。ということを考え、useStateを利用します。

その次に、どのようにpositionを把握するのかというと、マウスイベント限定で使える
clientX/Yというものを使います。これを使えば座標を定義できます。

そのあとに、mouseが動いたときに、座標を取得するために、onMouseMoveで実行する関数として、座標を再セットするようにすれば、座標を得られます。