JavaScriptのタッチイベント（touchstart, touchendなど）の基本

1. touchstartイベントとは？

1. touchstartイベントとは？

touchstartイベントは、指やスタイラスで画面に触れた瞬間に発生します。ボタンを押す感覚で処理を開始したいときに便利です。

const touchArea = document.getElementById("touchArea");

touchArea.addEventListener("touchstart", function() {
  console.log("画面に触れました");
});

この例では、指定した要素に触れるとコンソールにメッセージが表示されます。

2. touchendイベントとは？

2. touchendイベントとは？

touchendイベントは、指やスタイラスを画面から離した瞬間に発生します。タッチの終了を検知して処理を行いたい場合に使えます。

touchArea.addEventListener("touchend", function() {
  console.log("指を離しました");
});

この例では、タッチを終えたときにコンソールにメッセージが出ます。

3. touchmoveイベントとは？

3. touchmoveイベントとは？

touchmoveイベントは、指を画面上で動かしたときに発生します。スクロールやスワイプの動きを検知したいときに便利です。

touchArea.addEventListener("touchmove", function(event) {
  console.log("タッチ移動 X:", event.touches[0].clientX, "Y:", event.touches[0].clientY);
});

この例では、指を動かすたびに座標がコンソールに表示されます。

4. 複数の指での操作（マルチタッチ）

4. 複数の指での操作（マルチタッチ）

touchesプロパティを使うと、同時に画面に触れている指の情報を取得できます。2本指で拡大縮小や回転のジェスチャーを検知する際に役立ちます。

touchArea.addEventListener("touchmove", function(event) {
  console.log("タッチ中の指の数:", event.touches.length);
});

複数の指で触れると、event.touches.lengthで指の本数がわかります。

5. 実用例：タッチで色が変わるボックス

5. 実用例：タッチで色が変わるボックス

タッチイベントを使うと、スマホやタブレット向けに直感的な操作が可能です。例えば、ボックスを触ると色が変わるUIを作れます。

touchArea.addEventListener("touchstart", function() {
  touchArea.style.backgroundColor = "lightgreen";
});

touchArea.addEventListener("touchend", function() {
  touchArea.style.backgroundColor = "white";
});

タッチ開始で緑色に変わり、離すと元に戻ります。ユーザーに視覚的なフィードバックを与えられます。

6. 注意点とコツ

6. 注意点とコツ

タッチイベントを使うときは、次の点に注意してください：

• タッチイベントはスマホやタブレット向けなので、パソコンでは動作しない場合がある
• touchmoveを多用するとパフォーマンスに影響することがある
• スクロールとの兼ね合いで、必要に応じてevent.preventDefault()でデフォルトの動作を抑制することもある
• マルチタッチ時の座標取得にはevent.touchesを活用する

これらを意識すると、スマホやタブレット向けの直感的で快適な操作を実装できます。