わずか数行で組める、ドラッグ&ドロップダッシュボードGridStack.js

はじめに

「ユーザーが自由にウィジェットを並び替えられるダッシュボードを作りたい」——そんな要望を受けて、ドラッグ&ドロップやリサイズの処理を自前で実装しようとした経験はありませんか。要素同士の衝突判定、グリッドへのスナップ、モバイルでのタッチ操作対応など、考え始めるとキリがない機能ばかりです。

GridStack.jsは、そんな「動かせる・伸び縮みするダッシュボード」を数行のコードで実現してくれるライブラリです。今回はその特徴と使い方を、実際のコード例とともに紹介します。

GridStack.jsとは

GridStack.jsは「Build interactive dashboards in minutes（数分でインタラクティブなダッシュボードを構築する）」を掲げるTypeScript製のグリッドレイアウトライブラリです。ドラッグによる並び替えとリサイズが可能なウィジェットを、レスポンシブなマルチカラムレイアウトの中に配置できます。

v6以降はjQueryへの依存がなくなり、Vanilla JSだけで動作するようになりました。GitHub上でも活発に開発が続いており、2026年時点の最新メジャーバージョンはv13です。

主な特徴

フレームワーク非依存 - Vanilla JSはもちろん、React・Vue・Angular・Emberなど主要フレームワークとの連携例が公式に用意されている
ドラッグ&ドロップとリサイズが標準搭載 - ウィジェットの移動・拡大縮小・衝突回避といった処理を自前で書く必要がない
モバイル対応 - ネイティブのタッチイベントに対応しており、スマートフォンやタブレットでも直感的に操作できる
柔軟なレイアウト制御 - 列数のカスタマイズ、ブレークポイントごとのレスポンシブ設定、ネストしたグリッドにも対応

インストール

npmまたはyarnでインストールします。

npm install gridstack

yarn add gridstack

基本的な使い方

まずはCSSとJSを読み込み、grid-stackクラスを持つコンテナを用意します。

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>

<div class="grid-stack">
  <div class="grid-stack-item" gs-w="2">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item" gs-w="4">
    <div class="grid-stack-item-content">Item 2</div>
  </div>
</div>

<script type="module">
  import { GridStack } from 'gridstack';

  const grid = GridStack.init();
</script>

gs-w属性で初期の幅（列数）を指定できます。GridStack.init()を呼び出すだけで、この時点からすべてのアイテムがドラッグ・リサイズ可能になります。

JavaScriptからウィジェットを追加する

HTMLを直接書かず、動的にウィジェットを追加することも可能です。

import { GridStack } from 'gridstack';

const grid = GridStack.init({
  column: 12,
  cellHeight: 70,
  margin: 8,
});

grid.addWidget({
  w: 3,
  h: 2,
  content: '<div>売上グラフ</div>',
});

grid.addWidget({
  w: 3,
  h: 2,
  x: 3,
  content: '<div>アクセス数</div>',
});

columnでグリッドの列数、cellHeightで1セルの高さ、marginでウィジェット間の余白を指定できます。

実践的なユースケース

管理画面のカスタマイズ可能なダッシュボードを想定し、レイアウトの保存・復元を行う例を見てみましょう。

import { GridStack } from 'gridstack';

const grid = GridStack.init({
  column: 12,
  float: true,
});

// ユーザーがレイアウトを変更するたびに保存
grid.on('change', () => {
  const layout = grid.save(false);
  localStorage.setItem('dashboard-layout', JSON.stringify(layout));
});

// 保存済みレイアウトがあれば復元
const saved = localStorage.getItem('dashboard-layout');
if (saved) {
  grid.load(JSON.parse(saved));
} else {
  grid.addWidget({ w: 4, h: 2, content: '<div>ウィジェットA</div>' });
  grid.addWidget({ w: 4, h: 2, content: '<div>ウィジェットB</div>' });
}

save()でレイアウト情報（各ウィジェットの位置とサイズ）をJSONとして取得し、load()で復元できるため、ユーザーごとに異なるダッシュボードのカスタマイズ状態を永続化する用途に向いています。float: trueを指定すると、ウィジェットを移動した際に自動で詰めずに好きな位置に配置できるようになります。

React環境で使う場合は、公式がgridstack-reactのサンプルを提供しているので、コンポーネントのライフサイクルに合わせてGridStack.init()を呼び出す形で組み込むとよいでしょう。