Claude でガントチャート作成（CLI版その２）

Claude CLI を使ってガントチャートが作成できるか試してみました。
今回は、少しガントチャートの要件を明記して作成・機能追加を行っていきます。

概要

Claude でガントチャート作成（CLI版）では、簡単なプロンプトでどの程度のガントチャートが作成できるか試してみました。
今回は、ガントチャートの基本的なドラッグ等の機能を明記して、作成を行ってみました。
最初のバージョンでは、不具合や機能の足りないところがありますが、順次修正を行うことで使えそうなガントチャートになります。
あらかじめ、要件を指示することで修正が楽になった気がします。

いくつか機能追加後のガントチャート

• 機能追加後のガントチャート

• タスク詳細表示

• タスク編集ダイアログ表示

• 担当のフィルター表示

開発手順

開発開始

ガントチャートの要件を書いた requirements.md を用意して、claude にプロンプトで指示します。
約30分弱で、最初のバージョンが完成しました。

requirements.md の要件でガントチャートを作成して

requirements.md

## 概要

タスクを管理するガントチャートを作成する

### ガントチャートの機能
タスク名
開始日
終了日
進捗
担当
色分け
日/週/月切替
詳細画面遷移
タスクのドラッグ移動
進捗のドラッグ変更
依存関係設定
　親子タスク
　タスクの依存関係
マイルストーン表示
今日ライン表示
折りたたみ / 展開
複数プロジェクト切替

## 開発環境
VSCode
Framework: Vite 6+ (Next.jsよりも軽量で、Tailwind v4との親和性が非常に高い)
Language: JavaScript
Styling: Tailwind CSS v4 (新エンジン「Oxide」により設定ファイルが不要になり、CSS内で完結)
State Management: Zustand (Reduxより軽量で、タスクのドラッグ＆ドロップ等の頻繁な更新に適しています)
Date Handling: date-fns (軽量かつ直感的)

## 開発のヒント：Tailwind v4 の新機能を活かす
@starting-style: タスクバーが新しく追加された際のフェードインアニメーションを CSS だけで完結させ、パフォーマンスを向上させます。
Dynamic Utility Values: h-100 や grid-cols-15 など、これまでブラケットが必要だった動的数値がそのまま書けるようになっています。

• 完了メッセージ

最初のガントチャート画面

何故か英語表記で、タスクがドラッグ移動できない、タスク間の線がズレているなどいろいろ問題があります。

• タスク詳細

• タスク編集ダイアログ

問題の修正

下記を順番に、修正依頼・機能追加を行っていきます。

• タスクのドラッグ移動・リサイズ（右端）・進捗ドラッグが、出来ない
  • 一度進捗を100％にすると、その後進捗をドラッグできない
  •  進捗をドラッグ開始するためのカーソルの範囲が狭すぎる
  •  進捗を左にドラッグしようとするといきなり０％に移動する
• タスクの依存関係を示す線がズレて表示されている
• 英語表記になっている
• タスクバーにタスク名が表示されていない
• 親タスクをドラッグ移動できる。親タスクの期間をドラッグで変更できる
• 親タスクと子タスクが関係なくそれぞれ移動できてしまう。親タスクは、子タスクから開始日と終了日、進捗を自動計算して
• 依存タスクに関係なく開始日を変更できる
  • 依存タスクに関係なく開始日を変更できるので、依存タスクの終了日以降に開始日となるように制約を追加
  • 子タスクの開始日変更時、親タスクの依存の制約に掛からないかをチェック
• マイルストーンの開始日を変更できない。エラーになる
• マイルストーンをドラッグで移動できない
• 担当者の頭文字1文字だと区別しにくい

機能の追加

• タスクバーのダブルクリックで編集ダイアログを表示
• 左側のタスク名をダブルクリックで、編集ダイアログを表示して
• タスクバーにタスク名、担当を表示して
• 依存タスクに関係なく開始日を変更できるので、依存タスクの終了日以降に開始日となるように制約を追加
• 親タスクと子タスクが関係なくそれぞれ移動できてしまう。親タスクは、子タスクから開始日と終了日、進捗を自動計算して
• 依存タスクの終了日が変更された場合、タスクの開始日が依存タスクの終了日以降になるように
• 子タスクの開始日変更時、親タスクの依存の制約に掛からないかをチェック
• タスクの編集ダイアログ上で、開始日・終了日を変更すると、制約に関係なく変更できてします
• 編集ダイアログ上で終了日を変更時、後続のタスク開始日が自動設定されない
• 子タスクの編集時、親タスクに依存する他タスクについても開始日をチェックして
• 子タスク追加時に、親タスクの下に表示するように
• タスクの表示位置を変えられるように。子タスクは、親タスクの配下内で位置を変えられるように
• 担当者でフィルター表示する昨日の実装案を3つ出して
  • 案2：担当者バッジのクリックでフィルター
    • 左パネルのバッジをクリックするとその担当者でフィルター
    • フィルター中は選択バッジを強調表示、もう一度クリックで解除
    • 直感的でワンクリック操作。ただし複数選択には工夫が必要
• フィルター後にタスクを変更して、タスク表示が無くなるとリセット出来ない

ガントチャート機能一覧

作成したガントチャートの機能を claude にまとめてもらいました。

表示

• 日/週/月ビュー切替
• 今日ライン（赤い縦線）
• 週末ハイライト（日ビュー）
• タスクバーにタスク名・担当者表示
• 親子タスクのインデント表示
• マイルストーン（ダイヤモンド形状）

タスク操作

• タスクの追加・編集・削除（ダイアログ）
• バー/タスク名ダブルクリックで編集
• タスクのドラッグ移動（開始日・終了日を維持して移動）
• バー右端ドラッグでリサイズ（終了日変更）
• 進捗ハンドルドラッグで進捗変更

親子・依存関係

• 親子タスク：子タスクから開始日・終了日・進捗を自動計算
• 折りたたみ/展開
• タスク依存関係：SVG Bezier曲線で矢印表示
• 依存制約：依存タスクの終了日以前に開始日を設定不可
• 連鎖シフト：依存タスクの終了日変更時に後続タスクを自動シフト
• 祖先制約：子タスク移動時に親の依存制約も継承
• 編集ダイアログでも制約チェック

並び替え・フィルター

• ドラッグ&ドロップで行の並び替え（同階層内）
• 担当者バッジクリックでフィルター（ワンクリック切替）
• フィルタータグで即解除

複数プロジェクト

• プロジェクト切替
• プロジェクト追加

国際化

• 日本語 / English / 中文 切替
• 日付表記も言語に対応（週・月ビュー）