syncfusion-javascript-gantt-chart

Syncfusion Gantt Chart の実装

JavaScript／TypeScript プロジェクトで Syncfusion Essential JS 2 Gantt Chart コンポーネントを実装するための包括的なスキルです。初期設定からクリティカルパス、リソース管理、仮想スクロール、エクスポートなどの高度な機能までを網羅しています。

このスキルを使用するタイミング

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• セットアップ：Syncfusion Gantt Chart をゼロからセットアップする（インストール、依存関係、基本的な初期化）
• データをバインドする（ローカルの階層データ、フラット／自己参照データ、リモート DataManager、オンデマンド読み込み）
• タスクのスケジュールを設定する（自動／手動／カスタムモード、週／月の期間単位、マイルストーン、制約、daysPerWeek／daysPerMonth）
• カレンダーを設定する（プロジェクトカレンダー、タスクカレンダー、稼働時間、休日、例外、hoursPerDay）
• 列を定義する（カスタム列、テンプレート、固定列、WBS、通し番号列、チェックボックス、レスポンシブ表示）
• リソースを管理する（リソースの割り当て、リソースビュー、複数タスクバー、作業／タスクの種類）
• タイムラインを設定する（上段／下段の階層、ズーム、書式設定）
• 編集を有効にする（セル、ダイアログ、タスクバーのドラッグ／サイズ変更、未スケジュールタスクを作成するタスクバーの描画、依存関係の編集、インデント／インデント解除）
• Gantt グリッドのフィルタリング、並べ替え、検索を実装する
• タスクの依存関係を表示する（FS、SS、FF、SF、オフセット、allowedDependencyTypes による依存関係の種類の制限、コネクター線）
• 選択を設定する（行、セル、チェックボックスの選択と、親子間の選択伝播を制御する hierarchyCheckboxMode）
• クリティカルパス、ベースライン、イベントマーカー、休日、データマーカー、ラベルを表示する
• Excel または PDF にエクスポートする
• ツールバー、コンテキストメニュー、元に戻す／やり直しを実装する
• イベント、状態の永続化、ローカライズ、RTL、タイムゾーンに対応する
• パフォーマンスを最適化する（仮想スクロール、イミュータブルモード、読み込みアニメーション）

クイックスタート

import { Gantt, Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-gantt';

Gantt.Inject(Edit, Filter, Sort, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: [
        {
            TaskID: 1, TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Soil test approval', StartDate: new Date('04/02/2024'), Duration: 4, Predecessor: '2FS', Progress: 50 }
            ]
        }
    ],
    height: '450px',
    taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', duration: 'Duration', progress: 'Progress', dependency: 'Predecessor', child: 'subtasks' },
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search'],
    editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true },
    allowSorting: true,
    allowFiltering: true
});
gantt.appendTo('#Gantt');

ナビゲーションガイド

セットアップとインストール

📄 参照： references/getting-started.md

• npm によるインストール、webpack のセットアップ
• Gantt の基本的な初期化（app.ts + index.html）
• taskFields のマッピング、モジュールの注入
• actionFailure によるエラー処理

データバインディング

📄 参照： references/data-binding.md

• ローカルの階層データおよび自己参照（フラット）データ
• リモートデータ（DataManager、WebApiAdaptor、UrlAdaptor）
• 子タスクのオンデマンド読み込み
• Ajax バインディング、分割タスク（セグメント）

タスクのスケジュール

📄 参照： references/task-scheduling.md

• taskMode：'Auto'（デフォルト）／'Manual'／'Custom' — 日付の検証動作を制御します
• 自動：親タスクバーは子タスクの最小／最大日付から導出されます。依存関係により後続タスクの日付が自動的に移動します
• 手動：すべての日付をユーザーが制御します。再計算は行われません。validateManualTasksOnLinking: true を指定すると、先行タスクに基づく検証のみが有効になります
• カスタム：データソース内の taskFields.manual ブール値フィールドを使って、タスクごとにスケジュールを設定します
• 未スケジュールタスク：allowUnscheduledTasks: true — 開始日のみ、終了日のみ、期間のみ、またはいずれも指定されていないタスクを許可します。false の場合、projectStartDate から期間 1 のタスクがデフォルトで設定されます
• 期間の単位：durationUnit（プロジェクト全体：'Day'／'Hour'／'Minute'／'Week'／'Month'）。タスクごとに taskFields.durationUnit フィールドまたはインライン文字列（'4hours'、'30min'、'2weeks'、'1month'）を指定できます
• 週および月の期間単位：daysPerWeek（デフォルト：5）、daysPerMonth（デフォルト：20）— 週／月を日に変換する係数です
• マイルストーン：Duration: 0 を指定すると、ひし形で表示されます
• projectStartDate／projectEndDate — チャートの範囲を制限します。省略した場合は自動計算されます
• dayWorkingTime — 稼働時間の範囲を定義します（デフォルト：8～12 および 13～17）。自動スケジュールの計算に使用されます
• weekWorkingTime — 曜日ごとの稼働時間です。指定した曜日では dayWorkingTime を上書きし、指定されていない曜日では dayWorkingTime が適用されます
• workWeek — 稼働日を指定します（デフォルト：月～金）。includeWeekend: true を指定すると、土曜／日曜も稼働日になります
• highlightWeekends: true — チャートで非稼働日を視覚的に網掛け表示します

タスクの制約

📄 参照： references/task-constraints.md

• 制約の種類：ASAP(0)、ALAP(1)、MSO(2)、MFO(3)、SNET(4)、SNLT(5)、FNET(6)、FNLT(7)
• taskFields における constraintType と constraintDate のフィールドマッピング
• 利点：タスクの順序を適用する、マイルストーンを固定する、リソースの競合を防ぐ
• actionBegin（requestType: 'validateTaskViolation'）を使用して制約違反に対処する
• validateMode のフラグ：respectMustStartOn、respectMustFinishOn、respectStartNoLaterThan、respectFinishNoLaterThan
• taskMode（Auto／Manual／Custom）との制約の相互作用
• ダイアログエディターまたはプログラムによる編集（updateRecordByID）で制約を編集する

タスクの依存関係

📄 参照： references/task-dependency.md

• FS、SS、FF、SF の種類とラグ／リードのオフセット（日／時間／分単位）
• allowParentDependency、複数の先行タスク（カンマ区切り）
• コネクターラインのカスタマイズ（connectorLineWidth、connectorLineBackground）
• addPredecessor／removePredecessor／updatePredecessor メソッド
• actionBegin を使用した検証モード（respectLink、removeLink、preserveLinkWithEditing）
• すべてのモードが無効な場合の検証ダイアログ
• autoUpdatePredecessorOffset — 初回読み込み時にカレンダールールに合わせてオフセットを同期する
• updateOffsetOnTaskbarEdit: false — タスクバーのドラッグ中にオフセットを保持する
• .e-gantt-dependency-view-container を使用して依存関係の線を動的に表示／非表示にする
• enablePredecessorValidation: false — スケジュールを適用せずに線を描画する
• allowedDependencyTypes — 許可する依存関係の種類（FS／SS／FF／SF）を制限する

カレンダー設定

📄 参照： references/calendar-settings.md

• calendarSettings（projectCalendar、taskCalendar）
• プロジェクトカレンダー：workingTime、holidays、exceptions
• タスクカレンダー：taskFields.calendarId を使用してカスタムカレンダーを割り当てる
• タスクのスケジュール、期間、依存関係に影響するカレンダーの動作
• hoursPerDay — 表示上の 1 日あたりの稼働時間（デフォルト：8）
• 稼働日の設定に使用する workWeek、includeWeekend
• 依存関係、リソース、タスク編集、タスクバー編集とカレンダーの相互作用
• 制限事項、ベストプラクティス、カレンダーの例

クリティカルパス

📄 参照： references/critical-path.md

• enableCriticalPath プロパティ
• スラックの計算（スラックがゼロまたは負の場合）
• 視覚的な強調表示と CPM の原則

ベースライン

📄 参照： references/baseline.md

• renderBaseline、baselineColor
• baselineStartDate、baselineEndDate、baselineDuration
• ベースラインのマイルストーン、CSS のカスタマイズ
• queryTaskbarInfo イベントを使用したカスタマイズ（例：グラデーションのスタイル設定）
• 複数のベースラインの描画を含む、カスタム HTML 構造用の baselineTemplate
• 親行（hasChildRecords）ではテンプレートから空の文字列を返す

リソース

📄 参照： references/resources.md

• resourceFields のマッピング、resources コレクション
• タスクへのリソース割り当て、リソース単位
• 過剰割り当て、リソーステンプレート
• カスタム列テンプレートと queryTaskbarInfo を使用した、リソースごとのバッジおよびタスクバーの色設定

リソースビュー

📄 参照： references/resource-view.md

• viewType: 'ResourceView'
• showOverAllocation
• リソースのグループ化と表示
• 未割り当てのタスクは自動的に下部にグループ化される
• リソース間でのタスクバーのドラッグ＆ドロップ（allowTaskbarDragAndDrop と RowDD モジュール）

リソースのマルチタスクバー

📄 参照： references/multi-taskbar.md

• 折りたたまれたリソース行での enableMultiTaskbar
• 重複するタスクの視覚化
• 折りたたまれた状態でのタスク編集

作業とタスクの種類

📄 参照： references/work.md

• taskFields.work のマッピング、workUnit（Hour／Day／Minute）
• FixedWork、FixedDuration、FixedUnit のタスク種類

列

📄 参照: references/columns.md

• 列配列の定義、treeColumnIndex
• 連番列: enableSerialNumber、field: 'SerialNumber' — 並べ替え、フィルタリング、ページング、ドラッグ＆ドロップ時に再計算される、自動生成の連続した行番号
• チェックボックス列、レスポンシブ列
• 列の結合、列テンプレート
• WBS 列（enableWBS、enableAutoWbsUpdate）

列の操作

📄 参照: references/column-operations.md

• 列のサイズ変更（allowResizing、Resize モジュール）
• 列の並べ替え（allowReordering、Reorder モジュール）
• 列メニュー（showColumnMenu）
• 固定列／ピン留め列（frozenColumns）

タイムライン

📄 参照: references/timeline.md

• topTier／bottomTier の単位と形式
• timelineSettings の設定
• タイムラインのカスタム書式、タイムラインのツールチップ
• enableInfiniteTimelineScroll による無限タイムラインスクロール

ズーム

📄 参照: references/timeline.md

• ZoomIn、ZoomOut、ZoomToFit ツールバー項目
• zoomingLevels の設定
• プログラムによるズーム制御

並べ替え

📄 参照: references/sorting.md

• allowSorting: true と Sort モジュールの挿入
• ヘッダーをクリックして並べ替えます。Ctrl+クリックで複数列を並べ替え、Shift+クリックで複数列の並べ替えから列を除外します
• 初期の並べ替えは sortSettings.columns 配列（field + direction）で指定します
• プログラムによる並べ替え: gantt.sortModule.sortColumn(field, direction, isMultiSort)。すべて解除するには gantt.clearSorting() を使用します
• 並べ替えイベント: actionBegin／actionComplete の args.requestType === 'sorting'
• 特定の列の並べ替えを無効化: columns.allowSorting: false
• カスタム列（文字列／数値）は sortSettings またはプログラムから並べ替えできます
• タッチ操作: ヘッダーをタップして並べ替えます。タッチデバイスで複数列を並べ替える場合はポップアップが表示されます

フィルタリング

📄 参照: references/filtering.md

• allowFiltering、Filter モジュール
• メニューフィルターと Excel 形式のフィルター
• 列単位のフィルタリング、検索

選択

📄 参照: references/selection.md

• allowSelection: false ですべての選択を無効化します。Selection モジュールが必要です
• selectionSettings.mode: 'Row'（デフォルト）／'Cell'／'Both'
• selectionSettings.type: 'Single'（デフォルト）／'Multiple'（複数選択には Ctrl+クリックを使用）
• selectionSettings.enableToggle: true — 選択済みの項目をもう一度クリックすると選択が解除されます
• チェックボックスによる選択: type: 'checkbox' の列を追加します。階層データで使用できます
• hierarchyCheckboxMode: 'Self'／'Hierarchy'（デフォルト）／'FilteredHierarchy' — 親子階層でのチェックボックス選択の伝播を制御します
• enableHover: true — ホバー時に行、タスクバー、ヘッダーセル、タイムラインセルをハイライトします
• 行の選択: 初期読み込み時は selectedRowIndex、動的な選択には selectRow(index)／selectRows([indexes]) を使用します
• 行の選択を防止: args.cancel = true を指定する rowSelecting イベントを使用します。選択解除を防ぐには rowDeselecting を使用します
• セルの選択: mode: 'Cell' を指定します。動的な選択には selectCell({ rowIndex, cellIndex }) を使用します。getSelectedRowCellIndexes() は { cellIndexes, rowIndex }[] を返します
• セルの選択を防止: args.cancel = true を指定する cellSelecting イベントを使用します。選択後に cellSelected が発生します
• dataBound 内で条件に基づいて行を選択するには、gantt.treeGrid.grid.dataSource と gantt.selectRows(indexes) を使用します
• getSelectedRowIndexes() → number[]。getSelectedRecords() → object[]
• gantt.clearSelection() — 選択されているすべての行とセルを解除します
• タッチ操作: タップして行を選択します。ポップアップをタップして複数行選択モードに切り替え、その後ほかの行をタップします
• enableVirtualization ではセル選択はサポートされません

行

📄 参照： references/rows.md

• rowDataBound イベント、CSS（.e-altrow、.e-selectionbackground）、treeGrid メソッドを使って行のスタイルをカスタマイズします
• rowDataBound の hasChildRecords を使って親行と子行にスタイルを設定します
• autoFocusTasks — 行をクリックすると、チャートをタスクバーまでスクロールします
• rowHeight — すべての行に適用する高さです。rowDataBound の args.rowHeight で行ごとの高さを設定できます
• dataBound + mouseover + Tooltip を使って、カスタムアクション付きの行ホバーを実装します
• gantt.addRecord(data, position, index) を使ってプログラムから行を追加します — Top/Bottom/Above/Below/Child
• treeGrid.getRowByIndex() + CSS の display 切り替えを使って、行を動的に表示／非表示にします
• queryCellInfo の args.rowSpan を使って行を結合します（colSpan と組み合わせると 2D 結合になります）

行のドラッグ、ドロップ、インデント、インデント解除

📄 参照： references/rows-drag-drop.md

• RowDD モジュール、allowRowDragAndDrop — ガント内で行をドラッグします
• ドロップ位置：above（上端）、below（下端）、child（両端）
• load イベントで treeGrid.rowDropSettings.targetID を使い、行を外部コンポーネントにドラッグします
• selectionSettings.type: 'Multiple' を使った複数行のドラッグ
• allowTaskbarDragAndDrop — タスクバーをドラッグして行の順序を変更します
• gantt.reorderRows(fromIndexes, toIndex, position) を使ってプログラムから順序を変更します
• ドラッグのライフサイクルイベント：rowDragStartHelper、rowDragStart、rowDrag、rowDrop
• dropPosition === 'middleSegment' + reorderRows を使って、子としてのドロップを防止します
• インデント／インデント解除のツールバー項目と gantt.indent() / gantt.outdent() メソッド
• プログラムからインデント／インデント解除するには、selectRow(i) の後に indent() / outdent() を呼び出します
• actionComplete（args.requestType === 'indented'/'outdented'）でインデント／インデント解除を検出します

タスクの管理（編集）

📄 参照： references/managing-tasks.md

• editSettings（allowAdding、allowEditing、allowDeleting、allowTaskbarEditing）
• セル／ダイアログ／タスクバーの編集モード
• 行の追加、削除、インデント／インデント解除、ドラッグ＆ドロップ
• サーバー側の CRUD、タスクの分割／結合、検証

タスクバーの描画（描画によるタスクの作成）

📄 参照： references/taskbar-draw.md

• editSettings の allowTaskbarDraw: true — タイムライン上にタスクバーを描画し、未スケジュールのタスクを作成またはスケジュールできるようにします
• ワークフロー：未スケジュールのタスクを特定 → タイムライン上でクリックしてドラッグ → Gantt が StartDate、EndDate、Duration を自動計算します
• 稼働時間、休日、週末、タスクカレンダー、制約、依存関係が反映されます
• 完全な未スケジュール、一部のみスケジュール済み（開始日のみ、期間のみ）、スケジュール済みタスクの各シナリオ
• 親タスク（直接描画できません）、子タスク（描画でき、親タスクは自動調整されます）、マイルストーンタスク（Duration = 0）
• 機能間の連携：タスクバーの編集、ダイアログ／セルの編集、依存関係、スケジュールモード、リソース割り当て
• 前提条件：Edit モジュールの注入、allowTaskbarEditing、allowUnscheduledTasks、主キーの設定
• 自動／手動／カスタムのスケジュールモードと依存関係の検証における動作
• イベント：taskbarEditing（描画を防止）、actionComplete（描画後のアクション）
• エッジケース（プロジェクト開始前の描画、重複する描画、最小期間）とベストプラクティス

元に戻す／やり直す

📄 参照： references/undo-redo.md

• UndoRedo モジュールの注入、enableUndoRedo プロパティ
• undoRedoActions — 履歴の追跡対象となるアクションを設定します（Edit、Delete、Add、Sorting、Filtering、ZoomIn/Out、ColumnReorder、ColumnResize、Indent、Outdent、RowDragAndDrop、TaskbarDragAndDrop、ColumnState、PreviousTimeSpan、NextTimeSpan）
• undoRedoStepsCount — 履歴の深さを制限します（デフォルト：10、0 = 無効）
• UI から履歴を操作するためのツールバーの Undo／Redo 項目
• プログラムからの操作：undo() および redo() メソッド
• 履歴の取得：getUndoActions() / getRedoActions()
• 履歴のリセット：clearUndoCollection() / clearRedoCollection()

ツールバー

📄 参照: references/toolbar.md

• 組み込みツールバー項目のリファレンス（Add、Edit、Delete、Update、Cancel、Search、ExpandAll、CollapseAll、Indent、Outdent、PrevTimeSpan、NextTimeSpan、ZoomIn、ZoomOut、ZoomToFit、Undo、Redo）
• args.cancel = true を指定して、toolbarClick 経由で組み込みツールバーの動作を上書き
• アイコンのみを表示 — CSS（.e-tbar-btn-text）でテキストラベルを非表示
• CSS クラスセレクターを使用してツールバーボタンの外観をカスタマイズ
• created イベントと DOM 操作を使用して、ツールバーを下部に配置
• ItemModel（text、id、prefixIcon、align）を使用したカスタムツールバー項目
• 同じツールバー配列で組み込み項目とカスタム項目を併用
• gantt.toolbarModule.enableItems() を使用して、ツールバー項目を動的に有効化／無効化
• type: 'Input' と template を使用して、入力コンポーネント（AutoComplete、DropDownList）をツールバーに追加

コンテキストメニュー

📄 参照: references/context-menu.md

• enableContextMenu、ContextMenu モジュール
• デフォルトおよびカスタムのコンテキストメニュー項目

イベントマーカー

📄 参照: references/event-markers.md

• DayMarkers モジュール、eventMarkers 配列
• day、label、cssClass プロパティ

休日

📄 参照: references/holidays.md

• DayMarkers モジュール、holidays 配列
• from、to、label、cssClass プロパティ

データマーカー（インジケーター）

📄 参照: references/data-markers.md

• taskFields.indicators のマッピング
• 各インジケーターの date、iconClass、name、tooltip

タスクラベル

📄 参照: references/labels.md

• labelSettings：leftLabel、rightLabel、taskLabel
• フィールドベースおよびテンプレートベースのラベル

タスクバーのカスタマイズ

📄 参照: references/taskbar.md

• taskbarHeight、rowHeight
• taskbarTemplate、parentTaskbarTemplate、milestoneTemplate
• 動的なスタイル設定用の queryTaskbarInfo イベント

スクロール

📄 参照: references/scrolling.md

• scrollToDate メソッド、スクロール設定
• 水平および垂直スクロールの制御

仮想スクロール

📄 参照: references/virtual-scroll.md

• 行の仮想化のための VirtualScroll モジュールの注入、enableVirtualization
• enableTimelineVirtualization — オンデマンドの水平タイムライン描画（初期状態ではビューポート幅の 3 倍を描画）
• 仮想スクロールでフィルター済みレコード数を取得：actionComplete + gantt.treeGrid.filterModule.filteredResult
• created イベントで gantt.flatData.length を使用してデータセットの総数を取得
• 制限事項：高さはピクセル単位で指定する必要があります。Resource View では複数タスクバーを使用できません。セル選択は保持されません

スプリッター

📄 参照: references/splitter.md

• splitterSettings（position、columnIndex、view）
• setSplitterPosition メソッド、表示モード

状態の永続化

📄 参照: references/state-persistence.md

• enablePersistence — Filtering、Sorting、Columns の状態を localStorage に保存
• localStorage のキー形式："gantt" + 要素 ID（例："ganttGantt"）
• window.localStorage.getItem / setItem で永続化された状態を取得／設定
• dataBound の addOnPersist オーバーライドで、特定のキーが永続化されないようにする
• デフォルトでは永続化されない項目：列テンプレート、フォーマッター、headerText、headerTemplate、値アクセサー
• getPersistData() + Object.assign + gantt.treeGrid.setProperties() を使用して、ヘッダーテンプレートとヘッダーテキストを復元

イミュータブルモード

📄 参照: references/immutable.md

• パフォーマンス向上のための enableImmutableMode
• イミュータブルモードを使用する場面

タイムゾーン

📄 参照: references/timezone.md

• timezone プロパティ（UTC、IANA タイムゾーン）
• 地域をまたいで一貫した時刻表示

グローバリゼーションとローカライゼーション

📄 参照： references/global-local.md

• ローカライゼーション：L10n.load({ 'de-DE': { gantt: { ... } } }) ＋ Gantt インスタンスで locale: 'de-DE' を指定
• カテゴリ別に整理されたロケールキーの全一覧：タスクのフィールド／列、ダイアログ／タブ、ツールバー／操作、コンテキストメニュー／依存関係、ラベル／タイムライン、先行タスクの検証メッセージ（taskBeforePredecessor_FS など）
• 以前のリファレンスから追加されたキー：resourceID、writeNotes、task、tasks、saveButton、okText、from／to、taskLink、lag、start／finish、enterValue、above／below／child、milestone、toTask／toMilestone、eventMarkers、leftTaskLabel、rightTaskLabel、timelineCell、confirmPredecessorDelete、changeScheduleMode、subTasksStartDate／subTasksEndDate、scheduleStartDate／scheduleEndDate、unit、work、taskType、group
• 国際化：ロケールに応じた日付／数値の書式設定には、loadCldr(cagregorian, numbers) ＋ setCulture() を使用します。CLDR データは @syncfusion/ej2-cldr-data から取得します。
• RTL：enableRtl: true ＋対応するロケール（例：'ar-AE'）を指定すると、テキストの方向とレイアウト全体が反転します。
• デフォルトのロケールは 'en-US' です。

Excel エクスポート

📄 参照： references/excel-export.md

• ExcelExport モジュール、allowExcelExport、ツールバー項目：ExcelExport、CsvExport
• excelExport()／csvExport() メソッド、Blob へのエクスポート（第 4 引数 isBlob）
• カスタムデータソースのオーバーライド（ExcelExportProperties の dataSource）
• fileName、includeHiddenColumn、exportType
• エクスポート時の列の表示／非表示（復元には toolbarClick ＋ excelExportComplete を使用）
• セルの書式設定（excelQueryCellInfo ＋ args.style.backColor）
• テーマ（ヘッダー／レコードのフォント名と色）、ハイパーリンクとスタイルを設定したヘッダー／フッター行
• 複数の Gantt をエクスポート：AppendToSheet（同じシートに出力し、blankRows を指定）モードと NewSheet モード

PDF エクスポート

📄 参照： references/pdf-export.md

• PdfExport モジュール、allowPdfExport、ツールバー項目
• fileName、pageOrientation、pageSize、exportType、includeHiddenColumn、showPredecessorLines
• 現在のビューのデータのエクスポート、エクスポート時の列の表示／非表示
• 幅に合わせて調整（isFitToWidth、chartWidth、gridWidth）、Blob へのエクスポート
• ヘッダー／フッター：Text、Image、Line、PageNumber のコンテンツタイプ、enableFooter
• 複数の Gantt を 1 つの PDF にエクスポート、PDF エクスポートでのインジケーター
• 条件付きセル書式設定（pdfQueryCellInfo ＋ PdfColor）
• タイムラインセルの書式設定（pdfQueryTimelineCellInfo）
• タスクバーの書式設定と分割タスクバーセグメントの色（taskSegmentStyles）
• ganttStyle：外観全体のオーバーライド（columnHeader、cell、taskbar、timeline、label、eventMarker、holiday）
• 列テンプレート（画像／ハイパーリンク）、タスクバーテンプレート、ラベルテンプレート、ヘッダーテンプレートを使ったエクスポート
• ヘッダーテンプレートのエクスポート用 pdfColumnHeaderQueryCellInfo

読み込みアニメーション

📄 参照： references/loading-animation.md

• loadingIndicator.indicatorType：'Shimmer' | 'Spinner'
• 仮想スクロールでの Shimmer

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.1 レベル AA に準拠
• キーボードナビゲーション（グリッド、ツールバー、コンテキストメニューのショートカット）
• ARIA ロールと属性（treegrid、row、gridcell、columnheader、dialog）
• ハイコントラストテーマ（highcontrast.css）
• スクリーンリーダー対応（NVDA、JAWS、VoiceOver）：taskbarAriaLabel のカスタマイズ
• フォーカス管理と autoFocusTasks

プログラムからの操作

📄 参照： references/gantt-methods.md

• 列： autoFitColumns(field?)、getGanttColumns()、getGridColumns()、refreshColumns()、reorderColumns(from, to)、removeSortColumn(field)
• 行／レコードの検索： getRecordByID(id)、getTaskByUniqueID(uid)、getRowByID(id)、getRowByIndex(index)、getTaskInfo(taskId)、getCurrentViewData()、getExpandedRecords(records)
• 行の並べ替え： reorderRows(fromIndexes, toIndex, position) — position に 'above' | 'below' | 'middleSegment' を指定して、プログラムから行を移動します。allowRowDragAndDrop と RowDD が必要です
• 展開／折りたたみ： expandByIndex(index | index[])、expandByID(id)、collapseByIndex(index)、collapseByID(id)
• 編集／CRUD： cancelEdit()、deleteRecord(taskDetail)、updateRecordByIndex(index, data)、updateRecordByID({TaskID, ...})、updateTaskId(currentId, newId)、changeTaskMode(data)、convertToMilestone(id)、openAddDialog(data?, position?)、openEditDialog(id)
• 依存関係： removePredecessor(id) — タスクの依存関係をすべて削除します
• 分割／結合： splitTask(taskId, splitDate | splitDate[])、mergeTask(taskId, segmentIndexes) — allowTaskbarEditing が必要です。親タスクとマイルストーンは分割できません
• 選択： selectCells(rowCellIndexes) — { rowIndex, cellIndexes[] } のペアでセルを選択します。mode: 'Cell' が必要です
• スクロール： scrollToTask(taskId)、setScrollTop(px)、updateChartScrollOffset(left, top)
• データ： updateDataSource(dataSource, { projectStartDate, projectEndDate })、updateProjectDates(projectStartDate, projectEndDate) — データを切り替えずにタイムラインの範囲を更新します
• クリティカルパス： getCriticalTasks() → IGanttData[]。enableCriticalPath と CriticalPath モジュールが必要です
• 元に戻す／やり直し： getUndoActions()、getRedoActions()、clearUndoCollection()、clearRedoCollection() — enableUndoRedo と UndoRedo モジュールが必要です
• ツールバー： enableItems(itemIds, enable) — 実行時にツールバー項目を有効化／無効化します。項目 ID は {ganttElementId}_{itemText} の形式です（例：Gantt_add）。Toolbar モジュールが必要です
• 書式設定ヘルパー： getDurationString(value, unit)、getWorkString(value, unit)、getTaskbarHeight()
• すべてのメソッドは Gantt インスタンスを直接使用します：gantt.methodName(args)（TypeScript／JavaScript）

イベント

📄 参照： references/events.md

• actionBegin — アクション（追加／編集／削除／並べ替え／フィルター／依存関係／ズーム）の前に発生します。args.cancel をサポートします。引数の型は操作によって異なります（ITaskAddedEventArgs、ITimeSpanEventArgs、FilterEventArgs、SortEventArgs、IDependencyEventArgs、ZoomEventArgs）
• actionComplete — アクションの完了後に発生します。args.requestType に応じて処理を切り替えます（フィルター、並べ替え、保存、削除、AfterZoomIn／Out／ToProject）
• actionFailure — 操作の失敗時に発生します。エラーの詳細は args.error[0] で確認できます
• cellEdit — グリッドセルが編集モードに入ると発生します。args.cancel = true にすると編集を防止できます。引数：cancel、cell、columnName、columnObject、row、rowData、value、validationRules
• beforeTooltipRender — ツールチップ（タスクバー／コネクタ／タイムライン）の描画前に発生します。args.content を上書きするか、args.cancel = true を設定します
• beforeExcelExport / beforePdfExport — エクスポートの前に発生します。args.cancel = true にすると中止されます。Excel と CSV の区別には isCsv フラグを使用します
• セル選択イベント（selectionSettings.mode: 'Cell' または 'Both' が必要）：cellSelecting（キャンセルすると選択を防止）、cellSelected、cellDeselecting、cellDeselected — CellSelectEventArgs（cellIndex、cells、currentCell、data、previousRowCell）および CellDeselectEventArgs（cellIndexes、cells、data）
• 行選択イベント：rowSelecting、rowSelected、rowDeselecting、rowDeselected — cancel、data、rowIndex、isCtrlPressed、isShiftPressed
• 列ドラッグイベント（allowReordering: true と Reorder モジュールが必要）：columnDragStart、columnDrag、columnDrop — ColumnDragEventArgs（column、target、draggableType）
• 列メニューイベント（showColumnMenu: true と ColumnMenu モジュールが必要）：columnMenuOpen（ColumnMenuOpenEventArgs：cancel、column、element、items、left、top、parentItem）、columnMenuClick（ColumnMenuClickEventArgs：name、column、element、item）
• contextMenuClick — ContextMenu モジュールと contextMenuItems が必要です。引数：name、element、event、item（id／text）、type、rowData
• エクスポート完了イベント：excelExportComplete / pdfExportComplete — args.promise.then((e) => e.blobData) で blob にアクセスできます
• requestType の参照表：beforeSave、beforeDelete、taskbarEditing、filtering、sorting、ズーム関連の値、save、delete、validateDependency、updateDependency