簡単スワイプ判定をJavaScriptで実装する
スマートフォンなどのタッチデバイスで、指の動きに応じて左右スワイプを判定し、処理を切り替える方法を紹介します。
この方法を使うと、ユーザー操作に応じて文字色やコンテンツの表示を簡単に変えることができます。
スワイプ判定の基本
スワイプ判定は、タッチ開始時のX座標とスワイプ中のX座標の差分で行います。
一定以上の距離が動いた場合のみスワイプとして扱い、それ以外はタップや誤差として処理します。
JavaScript
const minDistance = 30;
let startX = null;
let endX = null;
document.querySelector("div").addEventListener("touchstart", (event) => {
startX = event.touches[0].pageX;
});
document.querySelector("div").addEventListener("touchmove", (event) => {
endX = event.touches[0].pageX;
});
document.querySelector("div").addEventListener("touchend", () => {
if (endX - startX < -1 * minDistance && endX !== null) {
// 左スワイプ時の処理
} else if (endX - startX > minDistance) {
// 右スワイプ時の処理
} else {
// スワイプではない（タップ・誤差）
}
});- startX：タッチ開始時のX座標
- endX：スワイプ中に更新されるX座標
- minDistance：この距離以上動いたら「スワイプ」と見なす
左右スワイプに応じた処理例
例えば、スワイプの方向によって<p>要素の文字色を変える場合は次のように実装できます。
See the Pen swipe by oheyril (@oheyril) on CodePen.
JavaScript
target.addEventListener("touchend", () => {
const p = document.querySelector("p");
if (endX - startX < -minDistance) {
p.style.color = "red"; // 左スワイプ → 赤
} else if (endX - startX > minDistance) {
p.style.color = "blue"; // 右スワイプ → 青
} else {
p.style.color = "green"; // タップなど → 緑
}
});このように、左右スワイプやタップを簡単に判定して、UIを変化させることができます。
ポイント
touchmoveでendXを更新して、指の動きを正確に取得する- スワイプ判定距離（
minDistance）は、タップと誤判定されない程度に調整する - 縦方向の動きもある場合は、X方向だけでなくY方向もチェックするとより安定する
この方法は、スマホ向けの簡易スワイプ操作を試すときに便利です。
文字色変更以外にも、スライドギャラリーやメニューの切替など、さまざまなUI操作に応用できます。