タイトル: 項目をタッチ/クリックしてスライドさせる方法
SEOタイトル: JavaScript でスワイプ/ドラッグ実装（Touch / Pointer Events + Swiper / Hammer.js）
| この記事の要点 |
|
素の Touch Events で実装
最小構成のスワイプ判定:
const slider = document.getElementById('slider');
let startX = 0;
let startY = 0;
let dx = 0;
slider.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
dx = 0;
}, { passive: true });
slider.addEventListener('touchmove', (e) => {
dx = e.touches[0].clientX - startX;
const dy = e.touches[0].clientY - startY;
// 横方向が支配的なら横スクロールとみなす
if (Math.abs(dx) > Math.abs(dy)) {
e.preventDefault(); // 縦スクロール抑制
slider.style.transform = `translateX(${dx}px)`;
}
}, { passive: false });
slider.addEventListener('touchend', () => {
const THRESHOLD = 80; // px
if (dx > THRESHOLD) {
goPrev();
} else if (dx < -THRESHOLD) {
goNext();
} else {
slider.style.transform = 'translateX(0)'; // 戻す
}
});Pointer Events で統一（推奨）
マウス・タッチ・ペンを 1 つのイベントで扱えます:
const el = document.getElementById('slider');
let startX = 0, dx = 0, dragging = false;
el.addEventListener('pointerdown', (e) => {
dragging = true;
startX = e.clientX;
dx = 0;
el.setPointerCapture(e.pointerId); // ドラッグ中、要素外に出ても追従
});
el.addEventListener('pointermove', (e) => {
if (!dragging) return;
dx = e.clientX - startX;
el.style.transform = `translateX(${dx}px)`;
});
el.addEventListener('pointerup', (e) => {
if (!dragging) return;
dragging = false;
el.releasePointerCapture(e.pointerId);
if (Math.abs(dx) > 80) {
dx > 0 ? goPrev() : goNext();
}
el.style.transition = 'transform 0.3s';
el.style.transform = 'translateX(0)';
setTimeout(() => el.style.transition = '', 300);
});CSS の touch-action でジェスチャを制御
| 値 | 意味 |
|---|---|
auto | デフォルト。すべてのジェスチャを許可 |
none | すべて JS で制御（タップ含む） |
pan-y | 縦スクロールのみブラウザに任せる（横スワイプを JS で） |
pan-x | 横スクロールのみブラウザに任せる |
manipulation | パン・ピンチ可、ダブルタップズーム抑制（フォーム最適） |
.slider {
touch-action: pan-y; /* 横スワイプは JS、縦スクロールはブラウザ */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none; /* iOS の長押しメニュー抑制 */
}
.slide {
/* GPU アクセラレーション */
will-change: transform;
transform: translateZ(0);
}CSS のみで作る簡易スライダー（scroll-snap）
これだけで PC・スマホ共通のスナップ式スライダーになります。JS なしで実装できるため、メンテナンス性が高い選択肢です。
ライブラリを使う（Swiper.js）
本格的なカルーセル / スワイプは Swiper.js がデファクトです:
Hammer.js（ジェスチャ抽象化）
import Hammer from 'hammerjs';
const hammer = new Hammer(document.getElementById('slider'));
hammer.on('swipeleft', () => goNext());
hammer.on('swiperight', () => goPrev());
hammer.on('swipeup', () => console.log('上スワイプ'));
hammer.on('swipedown', () => console.log('下スワイプ'));
// ピンチイン・アウト
hammer.get('pinch').set({ enable: true });
hammer.on('pinch', (e) => {
console.log('scale:', e.scale);
});よくあるハマりどころ
- passive リスナー: Chrome 56+ では
touchmoveがデフォルト passive。preventDefault()したい場合は{ passive: false }必須 - iOS Safari の慣性スクロール:
-webkit-overflow-scrolling: touchがないとカクつく - クリックとスワイプの誤判定: 移動量が小さい場合（< 5px）はクリックとして扱う閾値を設ける
- iframe 内のタッチ: 親ページの touch-action が影響する場合がある
- iOS の長押しメニュー:
-webkit-touch-callout: noneで抑制
FAQ
Q: マウスとタッチ両対応で 1 つのコードにしたい
A: Pointer Events を使えば 1 セットで両方扱えます。IE 非対応ですが現代では問題なし。
Q: スワイプとスクロールがケンカする
A: touch-action: pan-y でスクロール方向を明示し、JS 側で Math.abs(dx) > Math.abs(dy) の判定を入れます。
Q: Swiper と React / Vue の組み合わせは？
A: 公式に swiper/react / swiper/vue パッケージがあり、それぞれ専用コンポーネントとして使えます。