Reactで、スワイプで消せるリストを作る方法

import { useRef, useState } from 'react';
import type { PointerEvent, TransitionEvent } from 'react';

type Props = {
  label: string;
  done: boolean;
  onToggle: () => void;
  onDelete: () => void;
};

// 指やマウスがこれだけ動いたら、横か縦かを決める（px）
const SLOP = 10;
// 行の幅のこの割合より左へ引いて離したら、削除する
const THRESHOLD = 0.4;

type Gesture = {
  pointerId: number;
  startX: number;
  startY: number;
  // 'pending'：まだ向きが決まっていない／'swipe'：横に引いている／'scroll'：縦なので何もしない
  mode: 'pending' | 'swipe' | 'scroll';
};

export function SwipeRow({ label, done, onToggle, onDelete }: Props) {
  const [offset, setOffset] = useState(0);
  // 'idle'：指に付いてくる／'back'：元の位置へ戻る／'removing'：左へ消えていく
  const [phase, setPhase] = useState<'idle' | 'back' | 'removing'>('idle');
  const gesture = useRef<Gesture | null>(null);

  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    if (phase === 'removing' || (e.pointerType === 'mouse' && e.button !== 0)) return;
    gesture.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, mode: 'pending' };
    setPhase('idle');
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const g = gesture.current;
    if (!g || g.pointerId !== e.pointerId) return;
    const dx = e.clientX - g.startX;
    const dy = e.clientY - g.startY;
    if (g.mode === 'pending') {
      if (Math.abs(dx) < SLOP && Math.abs(dy) < SLOP) return;
      // 横の動きのほうが大きければスワイプ、縦ならページのスクロールに任せる
      g.mode = Math.abs(dx) > Math.abs(dy) ? 'swipe' : 'scroll';
      if (g.mode === 'swipe') {
        // 行の外へ出ても、離すまでこの要素にイベントが届くようにする
        e.currentTarget.setPointerCapture(e.pointerId);
      }
    }
    if (g.mode === 'swipe') setOffset(Math.min(0, dx)); // 左へだけ動かす
  }

  function handlePointerUp(e: PointerEvent<HTMLDivElement>) {
    const g = gesture.current;
    if (!g || g.pointerId !== e.pointerId) return;
    gesture.current = null;
    if (g.mode !== 'swipe') return;
    const width = e.currentTarget.offsetWidth;
    if (-offset > width * THRESHOLD) {
      // 動きを減らす設定のときは transition を切っているので、transitionend を待たずに消す
      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        onDelete();
        return;
      }
      setPhase('removing');
      setOffset(-width);
    } else {
      setPhase('back');
      setOffset(0);
    }
  }

  // ブラウザがスクロールなどを始めて、ポインターのイベントが打ち切られたとき
  function handlePointerCancel() {
    gesture.current = null;
    setPhase('back');
    setOffset(0);
  }

  function handleTransitionEnd(e: TransitionEvent<HTMLDivElement>) {
    if (phase === 'removing' && e.propertyName === 'transform') onDelete();
  }

  return (
    <li className="row">
      <span className="row-bg" aria-hidden="true">削除</span>
      <div
        className={`row-fg${phase === 'idle' ? '' : ' animate'}`}
        style={{ transform: `translateX(${offset}px)` }}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerCancel={handlePointerCancel}
        onTransitionEnd={handleTransitionEnd}
      >
        <button
          type="button"
          className="row-label"
          aria-pressed={done}
          onClick={onToggle}
        >
          {label}
        </button>
        <button type="button" className="row-delete" aria-label={`「${label}」を削除`} onClick={onDelete}>
          ×
        </button>
      </div>
    </li>
  );
}

.row {
  position: relative;
  overflow: hidden; /* 引き出した行が、横にはみ出して見えないようにする */
  border-bottom: 1px solid #d5dde1;
}

/* 行の下に敷く、削除の色 */
.row-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  background: #d85878;
  color: #fff;
  font-weight: bold;
}

.row-fg {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  /* 縦のスクロールはブラウザに任せ、横の動きだけをページに渡す */
  touch-action: pan-y;
  user-select: none;
}
.row-fg.animate { transition: transform 0.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .row-fg.animate { transition: none; }
}

import { useState } from 'react';
import { SwipeRow } from './SwipeRow';

type Todo = { id: number; label: string; done: boolean };

const initialTodos: Todo[] = [
  { id: 1, label: '牛乳を買う', done: false },
  { id: 2, label: '本を返す', done: false },
  { id: 3, label: '記事の図を描く', done: false },
  { id: 4, label: '傘を持っていく', done: false },
  { id: 5, label: '植木に水をやる', done: false },
];

export function App() {
  const [todos, setTodos] = useState(initialTodos);

  return (
    <main>
      <ul className="list">
        {todos.map((t) => (
          <SwipeRow
            key={t.id}
            label={t.label}
            done={t.done}
            onToggle={() => setTodos((prev) => prev.map((x) => (x.id === t.id ? { ...x, done: !x.done } : x)))}
            onDelete={() => setTodos((prev) => prev.filter((x) => x.id !== t.id))}
          />
        ))}
      </ul>
      <p className="count">残り {todos.length} 件</p>
    </main>
  );
}

行の幅: 328px（削除になるのは 131.2px より左へ引いて離したとき）
最初: 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件
1行目を左へ100px引いて離す: 引いている間 translateX(-100px) / 離した直後 translateX(0px)
  0.4秒後: 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件 / 1行目 translateX(0px) / イベント: pointerdown pointerup click
1行目を左へ200px引いて離す: 引いている間 translateX(-200px) / 離した直後 translateX(-328px) / 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件
  0.4秒後: 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件 / イベント: pointerdown pointerup click
1行目を右へ150px引いて離す: 引いている間 translateX(0px) / 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件
2行目を下へ150px引いて離す: 引いている間 translateX(0px) / 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件 / イベント: pointerdown pointerup click
1行目を左へ200px・下へ120px（行の外まで）引いて離す: 引いている間 translateX(-200px)
  0.4秒後: 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 3 件
2行目をクリック: 記事の図を描く, 傘を持っていく（済）, 植木に水をやる / 残り 3 件 / イベント: pointerdown pointerup click
1行目のボタンから Tab で「「記事の図を描く」を削除」へ移って Enter: 傘を持っていく（済）, 植木に水をやる / 残り 2 件

1行目を左へ100px引いて離す: 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件 / click の target: row-fg animate
1行目を左へ6px（向きを決める前）だけ動かして離す: 牛乳を買う（済）, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件 / click の target: row-label

記事のコード: 1行目を左へ200px引いて離した直後: 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件 / 1行目 translateX(0px)
  1秒後: 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件
比べる用（transitionend を待つ版）: 1行目を左へ200px引いて離した直後: 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件 / 1行目 translateX(-328px)
  1秒後: 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件

touch-action: pan-y: 1行目を指で左へ200px: 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件 / イベント: pointerdown pointerup
touch-action: pan-y: 指で上へ140px: scrollY 77（最大 77） / イベント: pointerdown pointercancel
touch-action: auto: 1行目を指で左へ200px: 牛乳を買う, 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 5 件 / イベント: pointerdown pointercancel
touch-action: auto: 指で上へ140px: scrollY 134（最大 134） / イベント: pointerdown pointercancel
touch-action: none: 1行目を指で左へ200px: 本を返す, 記事の図を描く, 傘を持っていく, 植木に水をやる / 残り 4 件 / イベント: pointerdown pointerup
touch-action: none: 指で上へ140px: scrollY 0（最大 77） / イベント: pointerdown pointerup