← カテゴリ一覧に戻る

リサイズ可能なパネル（Resizable Panels）

ドラッグで幅・高さを自在に変更できる分割パネル UI を、Next.js のレイアウト向けライブラリ 3 種で比較します。 CSS の衝突を避けるため、各実装は独立したタブで切り替え表示しています。

react-resizable-panelsv4.6.4allotmentv1.20.5

react-resizable-panels

Brian Vaughn（React DevTools 作者）が開発した軽量パネルライブラリ。PanelGroup /Panel /PanelResizeHandleの3コンポーネントで構成され、水平・垂直の分割に対応します。collapsible props で折りたたみも可能です。

PanelGroup / Panel / PanelResizeHandlehorizontal / verticalcollapsibleminSize / maxSizeautoSaveId
読み込み中...
tsx
'use client';
import { Group, Panel, Separator } from 'react-resizable-panels';

export function ReactResizablePanelsDemo() {
  return (
    <Group direction="horizontal" style={{ height: 400 }}>
      <Panel defaultSize={30} minSize={20}>
        <div className="h-full p-4 bg-slate-50 border-r border-slate-200">左パネル</div>
      </Panel>
      <Separator className="w-1 bg-slate-200 hover:bg-blue-400 cursor-col-resize transition-colors" />
      <Panel defaultSize={70}>
        <div className="h-full p-4">右パネル</div>
      </Panel>
    </Group>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、react-resizable-panelsを使ったリサイズ可能な分割パネルUIを実装してください。
- 使用ライブラリ: react-resizable-panels の PanelGroup / Panel / PanelResizeHandle
- PanelGroup の direction（horizontal / vertical）で分割方向を指定する
- Panel の minSize / maxSize props でパネルの最小・最大サイズを制限する
- collapsible / collapsedSize props でパネルの折りたたみ機能を実装する
- autoSaveId props でパネルサイズを localStorage に自動保存・復元する
- PanelResizeHandle の children に任意のJSXを渡してハンドルを完全カスタマイズする
- 左パネルにナビゲーション、右パネルにコンテンツを配置したサンプルレイアウトを作成する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目react-resizable-panelsAllotmentCSS / React
コンポーネント構成PanelGroup / Panel / PanelResizeHandleAllotment / Allotment.Pane自前実装
分割方向horizontal / verticalhorizontal / vertical自前で両対応可
折りたたみ（Collapse）✅ collapsible props✅ minSize=0 で対応⚠️ 自前実装
スナップ動作⚠️ 自前実装✅ snap props⚠️ 自前実装
サイズ永続化✅ autoSaveId（localStorage）❌ なし（手動実装）⚠️ 手動実装
ネスト分割✅ PanelGroup ネスト✅ Allotment ネスト✅ コンポーネント再利用
キーボード操作✅ 矢印キー対応✅ 矢印キー対応⚠️ 手動実装が必要
CSSインポート❌ 不要⚠️ style.css 必須❌ 不要
ハンドルカスタマイズ✅ 完全自由（children渡し）⚠️ 限定的✅ 完全自由
バンドルサイズ小（〜7kB gzip）中（〜20kB gzip）0（追加なし）

選択のポイント

  • react-resizable-panels — 軽量かつ柔軟性が高く、ハンドルを完全にカスタムできる点が強み。autoSaveId でサイズをlocalStorageに自動保存でき、 管理画面・IDE風レイアウト・ダッシュボードなど幅広い用途に最適。 React DevTools 作者が開発しており信頼性も高い。
  • Allotment — VS Code スタイルのコードエディターや、ネストが深い複雑な分割レイアウトを手軽に実現できる。snap props によるスナップ動作が組み込まれており、 エディター風 UI や開発者ツール系アプリに特に向いている。 CSSのインポートが必要な点に注意。
  • CSS / 純粋な React — 追加依存ゼロで既存デザインシステムに完全合わせられる。 シンプルな2カラムレイアウトや、ライブラリのCSSが競合しやすい環境での軽量実装に最適。 キーボード対応・スナップ・折りたたみなどの機能は自前実装コストがかかるため、 要件が複雑な場合は上記ライブラリの採用を推奨。

同じカテゴリの他のページ

アコーディオン

アコーディオンUIの実装サンプル。クリックで折りたたみ展開するコンテンツパネルのコンポーネント比較。

アプリシェル

アプリシェルレイアウトの実装サンプル。ヘッダー・サイドバー・メインコンテンツを組み合わせた基本的なWebアプリ構造。

サイドバー

サイドバーナビゲーションの実装サンプル。開閉可能なサイドメニューのコンポーネントとライブラリの比較。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo