Frappe Ganttで進捗率とタスクの依存関係を表示する方法
v1.2.2対応・動くデモ付き

Web Tips

結論：progressとdependenciesを指定する

Frappe Gantt v1.2.2でタスクの進捗率を表示するには、タスクオブジェクトに progress（0〜100の数値）を追加します。タスク間の依存関係を矢印で表示するには dependencies に、依存元タスクの id をカンマ区切りの文字列で指定します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.css">

<div id="gantt-chart"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.umd.js"></script>
<script>
var tasks = [
  { id: 'requirements', name: '要件整理', start: '2026-08-03', end: '2026-08-07', progress: 100 },
  { id: 'design', name: '画面設計', start: '2026-08-10', end: '2026-08-19', progress: 65, dependencies: 'requirements' },
  { id: 'development', name: '実装', start: '2026-08-20', end: '2026-09-04', progress: 30, dependencies: 'design' },
  { id: 'testing', name: '動作確認', start: '2026-09-07', end: '2026-09-11', progress: 0, dependencies: 'development' },
  { id: 'release', name: '公開', start: '2026-09-14', end: '2026-09-15', progress: 0, dependencies: 'testing' }
];

new Gantt('#gantt-chart', tasks, {
  view_mode: 'Week',
  scroll_to: 'start',
  readonly_dates: true,
  readonly_progress: true
});
</script>

複数のタスクに依存する場合は dependencies: 'requirements,design' のようにカンマで続けます。CDNはN5-2のガントチャート事例と同じ [email protected] に揃えています。

進捗率と依存関係を表示したデモ

バーの塗りつぶし部分が progress、バーの間を結ぶ線が dependencies です。「実装」が終わっていないため「動作確認」以降のバーは薄く表示され、まだ着手前であることが一目で分かります。

サイト公開プロジェクト

要件整理 → 画面設計 → 実装 → 動作確認 → 公開の順に依存させています

進捗済み 未着手・残り 依存関係の線

デモを読み込んでいます。

設定の役割

進捗率と依存関係に関わる設定は、タスク側の2項目とオプション側の2項目を押さえれば十分です。

設定 役割
progress タスクの進捗率（0〜100の数値）。バー内の塗りつぶし幅として表示される。
dependencies 依存元タスクの id をカンマ区切りで指定する文字列。指定したタスクから矢印が引かれる。
readonly_progress trueにすると、バー上のドラッグによる進捗の書き換えを無効にする。既定値はfalse。
move_dependencies 日程を動かした際に、依存する後続タスクの日程も連動して動かすかどうか。既定値はtrue。

本ページのデモは readonly_progress: true にして、ドラッグによる進捗の書き換えを止めています。進捗の変更を画面から受け付けるかどうかは、後述の「進捗をコードから検知する」の判断とあわせて決めます。

dependenciesのidを書くときの注意

dependencies は内部でカンマ区切りに分割され、前後の空白は取り除かれます。指定するIDは、依存元タスクの id と1文字も違わず一致させる必要があります。

存在しないIDや、タイプミスしたIDを指定してもエラーにはなりません。矢印が描画されないだけで、見た目には何も起きたことが分かりません。依存線が表示されない場合は、まずタスク配列の id と dependencies の綴りを見比べてください。

進捗をコードから検知する

readonly_progress をfalseにしてバー上のドラッグで進捗を変更できるようにした場合、変更を検知するには on_progress_change を使います。

new Gantt('#gantt-chart', tasks, {
  readonly_progress: false,
  on_progress_change: function (task, progress) {
    console.log(task.name + 'の進捗が' + progress + '%に変わりました');
  }
});

コールバックにはタスクと変更後の進捗率が渡されます。ここで受け取った値をAPIへ送るとサーバー側のデータと同期できますが、本ページのデモは表示設定に絞っているため、進捗はドラッグでは変更できない状態にしています。

よくあるハマりどころ

progressに0〜100の範囲外の値を入れる

progress に101のような範囲外の値やマイナスの値を入れると、バー内の塗りつぶし表示が崩れます。API側から受け取った値をそのまま渡す場合は、0〜100にクランプしてから渡すと安全です。

依存先のタスクが表示順で後ろにある

依存元と依存先の並び順自体は矢印の表示に影響しませんが、タスク配列の並びと画面上の縦位置は一致します。依存関係が視覚的に追いやすいよう、依存元を上、依存先を下に並べておくと読みやすくなります。

readonly_progressをfalseのまま公開する

閲覧用のガントチャートで進捗のドラッグ変更を許可したままにすると、意図せずクリックしただけで進捗が変わってしまうことがあります。閲覧専用の画面では readonly_progress: true にしておくのが無難です。

一次情報の確認先

この記事では、Frappe Gantt公式ドキュメントの Configuration、Introduction、GitHubリポジトリのfrappe/ganttを確認しています。dependencies がカンマ区切り文字列として分割される挙動は、配布されているビルドの実装で確認しました。N5-2のガントチャート事例と同じ 1.2.2 に揃えています。

まとめ

Frappe Ganttで進捗率と依存関係を表示するには、タスクに progress と dependencies を追加するだけです。依存関係のIDは1文字でもずれると矢印が静かに消えるため、綴りの一致を最初に疑うのがトラブル解決の近道です。

基本のガントチャート実装は「ガントチャート（Frappe Gantt）」、月名や日付表示の日本語化は「Frappe Ganttを日本語化して日付表示を設定する方法」で扱っています。

written by shun@AI Builder