JavaScriptのタッチイベント（touchstart, touchendなど）の基本
生徒
「スマホやタブレットで画面をタッチしたときに反応する処理を作りたいです。」
先生
「それなら、JavaScriptのタッチイベントを使います。代表的なものはtouchstart、touchend、touchmoveなどです。」
生徒
「マウスイベントと何が違うんですか？」
先生
「マウスイベントはパソコンのマウス操作用で、タッチイベントは指やスタイラスで画面を操作したときに発生します。スマホやタブレット向けのイベントですね。」
1. touchstartイベントとは？
touchstartイベントは、指やスタイラスで画面に触れた瞬間に発生します。ボタンを押す感覚で処理を開始したいときに便利です。
const touchArea = document.getElementById("touchArea");
touchArea.addEventListener("touchstart", function() {
console.log("画面に触れました");
});
この例では、指定した要素に触れるとコンソールにメッセージが表示されます。
2. touchendイベントとは？
touchendイベントは、指やスタイラスを画面から離した瞬間に発生します。タッチの終了を検知して処理を行いたい場合に使えます。
touchArea.addEventListener("touchend", function() {
console.log("指を離しました");
});
この例では、タッチを終えたときにコンソールにメッセージが出ます。
3. touchmoveイベントとは？
touchmoveイベントは、指を画面上で動かしたときに発生します。スクロールやスワイプの動きを検知したいときに便利です。
touchArea.addEventListener("touchmove", function(event) {
console.log("タッチ移動 X:", event.touches[0].clientX, "Y:", event.touches[0].clientY);
});
この例では、指を動かすたびに座標がコンソールに表示されます。
4. 複数の指での操作（マルチタッチ）
touchesプロパティを使うと、同時に画面に触れている指の情報を取得できます。2本指で拡大縮小や回転のジェスチャーを検知する際に役立ちます。
touchArea.addEventListener("touchmove", function(event) {
console.log("タッチ中の指の数:", event.touches.length);
});
複数の指で触れると、event.touches.lengthで指の本数がわかります。
5. 実用例：タッチで色が変わるボックス
タッチイベントを使うと、スマホやタブレット向けに直感的な操作が可能です。例えば、ボックスを触ると色が変わるUIを作れます。
touchArea.addEventListener("touchstart", function() {
touchArea.style.backgroundColor = "lightgreen";
});
touchArea.addEventListener("touchend", function() {
touchArea.style.backgroundColor = "white";
});
タッチ開始で緑色に変わり、離すと元に戻ります。ユーザーに視覚的なフィードバックを与えられます。
6. 注意点とコツ
タッチイベントを使うときは、次の点に注意してください：
- タッチイベントはスマホやタブレット向けなので、パソコンでは動作しない場合がある
touchmoveを多用するとパフォーマンスに影響することがある- スクロールとの兼ね合いで、必要に応じて
event.preventDefault()でデフォルトの動作を抑制することもある - マルチタッチ時の座標取得には
event.touchesを活用する
これらを意識すると、スマホやタブレット向けの直感的で快適な操作を実装できます。
