syncfusion-react-kanban

Syncfusion React Kanban の実装

Syncfusion の React Kanban コンポーネントを使用して、カード、列、スイムレーン、ドラッグ＆ドロップ操作を備えた柔軟なタスク管理ボードを構築するための包括的なスキルです。

このスキルを使用する場面

以下が必要な場合に、このスキルを使用してください。

• Syncfusion で Kanban コンポーネントをインストールしてセットアップする
• 列とカードを備えた基本的な Kanban ボードを作成する
• スイムレーンでカードを整理する（カテゴリ／担当者でグループ化）
• 列とスイムレーン間のドラッグ＆ドロップ機能を実装する
• ヘッダー、コンテンツ、テンプレート、タグを使ってカードの表示を設定する
• 配列または API（DataManager、OData、REST）からデータをバインドする
• ユーザー操作（カードの選択、ドラッグイベント、ダブルクリックによる編集）を処理する
• カードの作成と編集用のダイアログを追加する
• テーマ、CSS、レスポンシブデザインで外観をカスタマイズする
• WIP（作業中）の最小／最大制限を使ってカード数を検証する
• 並べ替え、フィルタリング、検索機能を設定する
• カスタムツールチップ、テンプレート、スタイルを適用する
• 大規模なデータセット向けに仮想スクロールを実装する
• ボードの状態と設定を保存する

コンポーネントの概要

Kanban コンポーネントは、次の主要な概念を備えた視覚的なタスク管理システムを提供します。

カード：タスクや項目を表します。各カードには、あるフィールドのヘッダーと別のフィールドのコンテンツが表示されます。カードにはタグやカスタムテンプレートを設定でき、個別またはグループ単位で選択できます。

列：ワークフローの段階（例：「未着手」、「進行中」、「完了」）を定義します。各列にはヘッダーがあり、項目数を表示でき、ドラッグ＆ドロップの動作を個別に制御できます。

スイムレーン：カードをカテゴリ（例：ユーザー、優先度、チーム別）で整理するための、任意の水平グループ化レイヤーです。スイムレーンを使うと整理しやすくなり、カスタムヘッダーも設定できます。

ドラッグ＆ドロップ：列間、列内、スイムレーン間、または外部ソースへのカード移動を標準でサポートします。列ごとに詳細に設定できます。

データバインディング：静的配列または動的ソース（OData／REST API を利用する DataManager）に接続して、リアルタイムに更新できます。

テンプレート：独自の HTML／JSX を使用して、カードのレイアウト、列ヘッダー、スイムレーンヘッダー、ツールチップ、ダイアログをカスタマイズできます。

ドキュメントとナビゲーションガイド

現在のニーズに合ったリファレンスを選択してください。

はじめに

📄 読む： references/getting-started.md

• @syncfusion/ej2-react-kanban のインストール
• CSS テーマのインポート（Material、Bootstrap、Fluent、Tailwind）
• Kanban コンポーネントの基本的なセットアップ
• dataSource とフィールドマッピングの設定
• 最初に動作するサンプル

基本構造（カード、列、主要フィールド）

📄 読む： references/core-structure.md

• カードのプロパティと cardSettings の設定
• 列の定義とプロパティ
• keyField のマッピング（カードと列の紐付け）
• showHeader、showAddButton、showItemCount
• カードのテンプレートとスタイル設定
• 標準レイアウトとカスタムカードレイアウトの使い分け

スイムレーン（カテゴリ別のカードのグループ化）

📄 読む： references/swimlanes.md

• スイムレーンとは何か、どのような場合に使うか
• swimlaneSettings の設定
• カテゴリ、ユーザー、優先度、チーム別のカードのグループ化
• スイムレーンのヘッダーとカスタムレンダリング
• 入れ子レイアウトとフラットレイアウトの違い

ドラッグ＆ドロップ（カードの移動とフローの管理）

📄 読む： references/drag-and-drop.md

• 内部でのドラッグ＆ドロップ（列間、列内）
• 外部へのドラッグ＆ドロップ（Kanban 間、外部ソースへの移動）
• 列ごとの allowDragAndDrop、allowDrag、allowDrop
• 有効な遷移を制御する transitionColumns
• ドラッグイベントハンドラーとドロップの禁止

データバインディング（データソースへの接続）

📄 読む： references/data-binding.md

• 静的な JSON 配列へのバインド
• OData および REST API との DataManager の統合
• リモートデータソースと更新パターン
• データの変更と更新の実行
• リアルタイムのデータ同期

テンプレートとダイアログ（カスタムコンテンツとカードの編集）

📄 読む： references/dialogs-and-templates.md

• カードテンプレート（カスタムカードレイアウト）
• 列ヘッダーテンプレート
• スイムレーンヘッダーテンプレート
• ツールチップのテンプレートと設定
• カードの追加／編集用ダイアログの設定
• テンプレート構文とイベント処理

並べ替え、フィルタリング、作業中（WIP）の検証

📄 読む： references/sorting-filtering-and-search.md

• 並べ替え設定とカードの順序
• 列ごとのカード数の最小／最大値（WIP 制限）
• 並べ替えと検索の許可
• フィルタリングと検索のパターン
• 選択モード（単一／複数）
• 検証エラーの処理

カスタマイズとスタイル設定（テーマ、レスポンシブ対応、高度な機能）

📄 読む： references/customization-and-styling.md

• 組み込みテーマ（Material、Bootstrap、Fluent、Tailwind）
• CSS のカスタマイズと変数
• レスポンシブデザインの動作
• 大規模なデータセット向けの仮想スクロール
• 永続化（カードの状態をストレージに保存）
• ローカライズ（多言語サポート）
• アクセシビリティ（ARIA、キーボード操作）

プロパティ（構成と設定）

📄 読む： references/properties.md

• 型定義を含む、設定可能なすべてのプロパティ
• cardSettings、columns、swimlaneSettings の設定
• コアプロパティ（allowDragAndDrop、keyField、dataSource）
• ダイアログの設定と高度なオプション
• 完全な構成例
• よくある構成パターンの決定ツリー

メソッド（プログラムによる制御と操作）

📄 読む： references/methods.md

• カード管理（addCard、updateCard、deleteCard）
• 列の管理（addColumn、deleteColumn、hideColumn、showColumn）
• データアクセスメソッド（getSelectedCards、getCardDetails、getColumnData、getSwimlaneData）
• UI 制御メソッド（showSpinner、hideSpinner、refreshUI、openDialog、closeDialog）
• よくあるプログラム操作のパターン（一括操作、並べ替え、複製）
• refs を使用して親コンポーネントからメソッドにアクセス

イベント（ユーザー操作とデータ変更の処理）

📄 読む： references/events.md

• カードイベント（cardClick、cardDoubleClick、cardRendered、cardSelectionChanging）
• ダイアログイベント（dialogOpen、dialogClose）
• ドラッグ＆ドロップイベント（dragStart、drag、dragStop）
• データイベント（dataBinding、dataBound、actionBegin、actionComplete、actionFailure）
• ライフサイクルイベント（created）
• イベントの検証と防止のパターン

クイックスタートの例

3 列、5 枚のカードからなる最小構成のカンバンボードを以下に示します。

import React from 'react';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';
import '@syncfusion/ej2-react-kanban/styles/material.css';


export default function KanbanQuickStart(): JSX.Element {
  const kanbanData: { [key: string]: Object } = [
    { Id: '1', Status: 'Open', Summary: 'Analyze requirements' },
    { Id: '2', Status: 'Open', Summary: 'Design UI mockups' },
    { Id: '3', Status: 'InProgress', Summary: 'Implement backend API' },
    { Id: '4', Status: 'InProgress', Summary: 'Build frontend components' },
    { Id: '5', Status: 'Closed', Summary: 'Deploy to production' }
  ];

  return (
    <KanbanComponent
      dataSource={kanbanData}
      keyField="Status"
      cardSettings={{ contentField: 'Summary' }}
    >
      <ColumnsDirective>
        <ColumnDirective key="0" keyField="Open" headerText="Open" />
        <ColumnDirective key="1" keyField="InProgress" headerText="In Progress" />
        <ColumnDirective key="2" keyField="Closed" headerText="Closed" />
      </ColumnsDirective>
    </KanbanComponent>
  );
}

このコードの動作：

• ワークフローの列を 3 つ（Open、InProgress、Closed）作成します
• Status フィールドを使用して、カードを列に割り当てます
• Summary テキストとともに 5 枚のカードを表示します
• デフォルトでドラッグ＆ドロップを有効にします

よくあるパターン

パターン 1：スイムレーンを追加してユーザーごとにカードをグループ化する

import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';

<KanbanComponent
  dataSource={kanbanData}
  keyField="Status"
  cardSettings={{ contentField: 'Summary' }}
  swimlaneSettings={{ keyField: 'Assignee' }}
>
  <ColumnsDirective>
    <ColumnDirective keyField="Open" headerText="Open" />
    <ColumnDirective keyField="InProgress" headerText="In Progress" />
    <ColumnDirective keyField="Closed" headerText="Closed" />
  </ColumnsDirective>
</KanbanComponent>

カードが Assignee フィールドごとに水平方向にグループ化され、各ユーザーのタスクを簡単に確認できます。

パターン 2：特定の列でドラッグ＆ドロップを無効にする

import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';

<ColumnsDirective>
  <ColumnDirective keyField="Open" headerText="Open" allowDrag={true} allowDrop={true} />
  <ColumnDirective keyField="Closed" headerText="Closed" allowDrag={false} allowDrop={false} />
</ColumnsDirective>

ユーザーはカードを「Open」にドラッグできますが、「Closed」に入るとカードはロックされ、読み取り専用になります。

パターン 3：WIP 制限を設けてカード数を検証する

import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';

<ColumnsDirective>
  <ColumnDirective 
    keyField="InProgress" 
    headerText="In Progress" 
    maxCount={5}
    minCount={1}
  />
</ColumnsDirective>

列のカードが 1 枚未満または 5 枚を超えると、ボードはユーザーに警告し、作業中の制限を適用します。

パターン 4：カードのダブルクリックを処理して編集する

import { CardClickEventArgs } from '@syncfusion/ej2-react-kanban';

const handleCardDoubleClick = (args: CardClickEventArgs): void => {
  console.log('Card clicked:', args.data);
  // Open a dialog or form to edit the card
};

<KanbanComponent
  dataSource={kanbanData}
  cardDoubleClick={handleCardDoubleClick}
>
  {/* ... */}
</KanbanComponent>

このパターンを使うと、インライン編集のワークフローを実現できます。

パターン 5：リモート API にカンバンをバインドする

import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

const dataManager: DataManager = new DataManager({
  url: 'https://api.example.com/tasks',
  adaptor: new UrlAdaptor()
});

<KanbanComponent
  dataSource={dataManager}
  keyField="Status"
  cardSettings={{ contentField: 'Summary' }}
>
  {/* ... */}
</KanbanComponent>