🧩

ノーコードでExcelライクなテーブル作成：ドラッグ＆ドロップUIの実装

2025/12/16に公開

この記事は、ひとりでつくるSaaS - 設計・実装・運用の記録 Advent Calendar 2025 の16日目の記事です。
昨日の記事では「無限スクロールの落とし穴」について書きました。今日は、ドラッグ＆ドロップでカラムを並び替えられるExcelライクなテーブルUIの実装について解説します。

 🎯 実現したい機能NotionやAirtableのような、ユーザーが自由にカラムを操作できるテーブルを作ります。
セルをクリックして直接編集（インライン編集）
ドラッグ＆ドロップでカラムの順序を変更
テーブル内の行を並び替え
カラム幅のリサイズ
非エンジニアでも直感的に使えることを目指しました。この記事では、これらを実現するための設計判断と実装パターンを紹介します。

 ⚙️ ライブラリ選定
 テーブル基盤：react-spreadsheetテーブルUIのライブラリはいくつか選択肢があります。


ライブラリ
特徴


AG Grid
高機能・大規模向け・商用ライセンスあり

TanStack Table
ヘッドレス・自由度高い・UI構築が必要

react-spreadsheet
軽量・Excel風・カスタマイズ容易

今回はreact-spreadsheetを採用しました。決め手はDataEditor/DataViewerパターンです。セルの「表示」と「編集」を別コンポーネントで定義でき、データ型ごとに異なるUIを実装しやすい設計になっています。
AG Gridは高機能ですが、カスタムセルエディタの実装がやや複雑でした。TanStack Tableはヘッドレスなので自由度は高いですが、UIを一から構築する必要があります。react-spreadsheetは「ちょうどいい」バランスでした。

 ドラッグ＆ドロップ：dnd-kitドラッグ＆ドロップには@dnd-kitを使いました。
react-beautiful-dndも有名ですが、メンテナンスが停滞気味です。dnd-kitはReact 18のConcurrent Modeに対応しており、TypeScriptの型定義も充実しています。アクセシビリティ（キーボード操作）のサポートも組み込まれているため、将来的な拡張も見据えて選定しました。

 ✏️ インライン編集の設計
 なぜインライン編集が必要か従来の「編集ボタンを押してモーダルを開く」UIは、1件ずつの編集には適していますが、複数のセルを連続して編集する場合はストレスになります。Excelのように「セルをクリックしてその場で編集」できれば、ユーザーの操作効率は大きく向上します。

 DataEditor/DataViewerパターンreact-spreadsheetでは、各セルに「表示用」と「編集用」のコンポーネントを割り当てます。
// 表示用：セルをクリックする前の状態
const TextViewer: DataViewerComponent<TextCell> = ({ cell }) => {
  return <span className="px-2">{cell?.value ?? ''}</span>;
};

// 編集用：セルをクリックした後の状態
const TextEditor: DataEditorComponent<TextCell> = ({ cell, onChange }) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // 編集モードに入ったら自動でフォーカス＆全選択
    inputRef.current?.focus();
    inputRef.current?.select();
  }, []);

  return (
    <input
      ref={inputRef}
      type="text"
      value={cell?.value ?? ''}
      onChange={(e) => onChange({ ...cell, value: e.target.value })}
    />
  );
};
このパターンの利点は、データ型ごとに最適なUIを提供できることです。テキストなら入力欄、日付ならカレンダーピッカー、選択肢ならドロップダウンと、それぞれに適したエディタを実装できます。

 ドロップダウンの注意点ドロップダウン（セレクトボックス）を実装する際、よくある問題があります。メニューがテーブルのoverflow: hiddenに隠れてしまうのです。
解決策は、メニューをbodyに直接描画することです。
<Select
  menuPortalTarget={document.body}
  styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
  // ...
/>
menuPortalTarget={document.body}を指定すると、メニューがテーブルのDOM階層から外れ、他の要素に隠れなくなります。

 🐧 カラム順序の並び替え
 設計画面での並び替えテーブルのカラム順序は、設計画面（フィールドデザイナー）で変更できるようにしました。ここではdnd-kitを使っています。
実装のポイントは誤操作の防止です。
const sensors = useSensors(
  useSensor(PointerSensor, {
    activationConstraint: { distance: 8 },
  })
);
distance: 8を指定すると、8ピクセル以上ドラッグしないとドラッグが開始されません。これがないと、クリックしただけでドラッグが始まり、意図しない並び替えが発生してしまいます。
もう一つのポイントはドラッグハンドルの限定です。
<div ref={setNodeRef} style={style} {...attributes}>
  {/* listenersはハンドルにのみ適用 */}
  <button {...listeners} className="cursor-grab">
    <GripVertical />
  </button>
  <span>{item.name}</span>
  <button onClick={onEdit}>編集</button>
</div>
listenersをドラッグハンドル（グリップアイコン）にのみ適用することで、「編集」ボタンなど他の要素をクリックしてもドラッグが始まりません。アイテム全体をドラッグ可能にすると、他の操作と競合しやすくなります。

 🐰 テーブル行の並び替え
 楽観的UI更新テーブル内の行もドラッグで並び替えられるようにしました。ここで重要なのは楽観的UI更新です。
const handleDrop = async (targetIndex: number) => {
  // 1. まず画面を即座に更新（楽観的更新）
  const reordered = [...localRows];
  const [dragged] = reordered.splice(draggedIndex, 1);
  reordered.splice(targetIndex, 0, dragged);
  setLocalRows(reordered);

  // 2. その後サーバーに保存
  await saveReorder(reordered);
};
ドラッグ完了と同時に画面上の順序が変わり、サーバーへの保存はバックグラウンドで行います。ユーザーは待たされることなく、次の操作に移れます。

 未保存状態の警告並び替えた後、保存せずにページを離れようとした場合は警告を表示します。
useEffect(() => {
  if (!hasUnsavedChanges) return;

  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
    e.preventDefault();
    e.returnValue = '変更が保存されていません';
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [hasUnsavedChanges]);
これにより、うっかりページを閉じてしまっても、データの損失を防げます。

 🐙 カラム幅のリサイズ
 localStorageで永続化ユーザーが調整したカラム幅は、次回アクセス時も反映されたほうが使いやすいと考えました。サーバーに保存する方法もありますが、カラム幅はユーザーの好みであり、頻繁に変更されるものなので、localStorageに保存しました。
const useColumnWidths = (tableId: string) => {
  const storageKey = `table_widths_${tableId}`;

  const [widths, setWidths] = useState<Record<string, number>>(() => {
    const saved = localStorage.getItem(storageKey);
    return saved ? JSON.parse(saved) : {};
  });

  // 幅が変わるたびにlocalStorageを更新
  useEffect(() => {
    localStorage.setItem(storageKey, JSON.stringify(widths));
  }, [widths, storageKey]);

  return { widths, setWidths };
};
テーブルごとに異なるキーで保存することで、複数のテーブルを使い分けても設定が混ざりません。

 最小幅の制限リサイズ時は最小幅を設定しておくと、カラムが潰れて見えなくなる問題を防げます。
const handleResize = (columnId: string, newWidth: number) => {
  const clampedWidth = Math.max(50, newWidth); // 最小50px
  setWidths(prev => ({ ...prev, [columnId]: clampedWidth }));
};

 ✅ まとめExcelライクなテーブルUIを実装する際のポイントをまとめました。


課題
解決策


データ型ごとに異なる編集UI
DataEditor/DataViewerパターン

ドロップダウンが隠れる
menuPortalTarget={document.body}

クリックでドラッグが誤発動
activationConstraint: { distance: 8 }

他のボタンとドラッグの競合
ドラッグハンドルにlistenersを限定

並び替え中の待ち時間
楽観的UI更新

未保存での離脱
beforeunloadで警告

カラム幅の永続化
localStorage

ノーコードツールのUIは、「動く」だけでなく「迷わず使える」ことが重要です。誤操作の防止、即座のフィードバック、状態の保持など、細部の積み重ねがユーザー体験を決めます。
明日は「pgvector + OpenAI Embeddingsで意味検索を実装する」について解説します。
シリーズの他の記事
12/15: 無限スクロール × Zustand × React 19：非同期の落とし穴
12/17: 「意味で検索」を実装する：pgvector + OpenAI Embeddings入門

ライブラリ	特徴
AG Grid	高機能・大規模向け・商用ライセンスあり
TanStack Table	ヘッドレス・自由度高い・UI構築が必要
react-spreadsheet	軽量・Excel風・カスタマイズ容易

課題	解決策
データ型ごとに異なる編集UI	DataEditor/DataViewerパターン
ドロップダウンが隠れる	menuPortalTarget={document.body}
クリックでドラッグが誤発動	activationConstraint: { distance: 8 }
他のボタンとドラッグの競合	ドラッグハンドルにlistenersを限定
並び替え中の待ち時間	楽観的UI更新
未保存での離脱	beforeunloadで警告
カラム幅の永続化	localStorage

GitHubで編集を提案

🎯 実現したい機能

⚙️ ライブラリ選定

テーブル基盤：react-spreadsheet

ドラッグ＆ドロップ：dnd-kit

✏️ インライン編集の設計

なぜインライン編集が必要か

DataEditor/DataViewerパターン

ドロップダウンの注意点

🐧 カラム順序の並び替え

設計画面での並び替え

🐰 テーブル行の並び替え

楽観的UI更新

未保存状態の警告

🐙 カラム幅のリサイズ

localStorageで永続化

最小幅の制限

✅ まとめ

Discussion