ChatGPT Codex でガントチャート作成その２（まとまった要件で作成）

ChatGPT Codex(GPT-5.3-Codex)のガントチャート作成で、最初から完成度をあげられるか試してみました。
ChatGPT Codex でガントチャート作成で、作成したガントチャートをベースに、作成方法を試してみます。

概要

ChatGPT Codex でガントチャート作成では、簡単な要件から問題修正・機能追加を繰り返して完成度をあげていきました。
今回は、最初の要件を細かく指定して最初から完成度をあげられるか試しています。

結果は、基本的な表示やタスクのドラッグ操作などに問題がありました。
前回も同様の問題があったので問題回避の要件を記述していましたが、改善されていません。
改善方法の指示内容に問題があるのか、まだそこまで指定通り作成できないのかはわかりません。

要件にあげた機能は、すべて実装されているようです。
なんとなくデザインもシンプルになっていて、最初から機能を盛り込んだ要件だと個々の再現度が低くなるのかもしれません。

現段階では、最初から機能を盛り込むよりも基本機能がしっかり動作してから、機能追加した方がいいのではないかと思います。

ガントチャート画面

• タスク一覧とタスクバーの位置があっていない

• 縦スクロールするとタスクバー部分のみがスクロールし、タスク一覧と同期がとれていない

• タスク編集画面

問題点

とりあえず簡単なチェックで分かった問題点

• タスク一覧とタスクバーの位置があっていない
• ガントチャートが画面いっぱい使わず、縦スクロールになっている
• 縦スクロールするとタスクバー部分のみがスクロールし、タスク一覧と同期がとれていない
• 親タスクはドラッグ移動できるが、子タスクがドラッグ移動できない
• 進捗をドラッグすると移動中は進捗の位置が変わるが、離すとタスクが移動して進捗が戻る

開発方法

Codex に、最初から機能を盛り込んだガントチャートを作成する方法を聞いて、それに従って実行しました。

STEP1

現在のガントチャートと同等の機能を最初から作成するには、どのようなプロンプトが必要だったか？
requirements.md から最初に作成されたバージョンに下記のもんだの修正と機能追加を行っている

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

タスク間の依存を示す線の位置が正しくない
タスクバーの右端をドラッグすると、期間の変更ではなく、進捗の変更になる
タスク追加の機能がない
色の選択がカラーパレットのみで、簡単に色を選択統一できない
日付入力が数値入力のみ。カレンダー表示にする
タスクの追加と編集画面で、保存・キャンセルの操作が無い。編集はダイアログ表示に変更
日付を区切る縦線が無いので、タスクの開始日と終了日がわかりにくい
タスクと子タスクが別々に期間を設定できてしまう

機能の追加
依存タスクがある場合、依存タスクの終了日以降の開始日になるように制約を追加
依存タスクの終了日を変更時、関連するタスクの開始日の制約をチェックし、問題がある場合は自動セット
親タスクの進捗は、子タスクの進捗から自動セットに
3か国語対応（日英中）
undo/redo 機能を追加
タスクの位置をドラッグで変更する機能を追加
子タスクは、親タスク内のみで変更可
プロジェクト追加機能を実装

回答１

以下の「そのまま使えるプロンプト」を使えば、現在版と同等機能を最初から一気に実装しやすいです。

あなたはシニアフロントエンドエンジニアです。以下の要件で、タスク管理ガントチャートを新規実装してください。

# 目的
requirements.md の初期要件を満たしつつ、後続で発生した不具合修正・機能追加をすべて含んだ「最終版」を最初から作成する。

# 開発環境・技術
- Framework: Vite 6+
- Language: JavaScript
- UI: React
- Styling: Tailwind CSS v4
- State: Zustand
- Date: date-fns
- ルーティングは必要最小限（基本は単一画面 + ダイアログ）

# 実装対象（最終機能）
## 1. ガント基本機能
- タスク名、開始日、終了日、進捗、担当、色分け
- 日/週/月切替
- 今日ライン表示
- マイルストーン表示
- 折りたたみ / 展開（親子）
- 複数プロジェクト切替
- タスクバーのドラッグ移動
- タスク期間のドラッグ変更（右端ハンドル）
- 進捗のドラッグ変更（期間変更と別ハンドル）
- 依存関係設定（親子タスク + タスク依存）
- 依存線描画（位置がバーと正確に一致）

## 2. 追加・編集UX
- タスク追加機能を実装
- タスク追加/編集はダイアログで実施
- 保存/キャンセルを明確に実装
- 日付入力はカレンダー選択可能（type=date + picker起動UI）
- 色選択は自由色 + プリセットスウォッチ（統一しやすいUI）

## 3. 表示改善
- 日付を区切る縦グリッド線を表示
- 開始/終了がわかるようタスクバー端を視認しやすくする
- day表示では週末列の背景を薄く色付け

## 4. 制約ロジック（重要）
- 依存がある場合、後続タスク開始日 >= 先行タスク終了日の翌日
- 依存元の終了日変更時、下流タスクを自動再計算して制約違反を解消
- 親タスク期間は子タスク期間から自動ロールアップ
- 親タスク進捗は子タスク進捗から自動算出（期間加重平均など妥当な方法）
- 子タスクは親タスク内でのみ並び替え可能

## 5. 並び替え・履歴
- 左側タスク行をドラッグで並び替え
- ドロップ位置インジケータ（before/after）が実際挿入位置と一致
- Undo/Redo機能（ボタン + ショートカット）
  - Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z, Ctrl/Cmd+Y
- Undo/Redoボタンはアイコン表示

## 6. 多言語対応
- 日本語 / 英語 / 中国語（簡体字）
- UI文言は辞書管理し、言語切替で即時反映

## 7. プロジェクト管理
- プロジェクト追加機能（ダイアログ + 保存/キャンセル）
- 追加直後にそのプロジェクトへ切替

# 品質要件
- 状態管理ロジックはストアに集約（UIに業務制約を分散させない）
- 制約ロジックはタスク編集・追加・ドラッグ操作すべてで一貫適用
- 見た目だけでなく挙動整合性を重視
- コードは読みやすく、責務を分離
- 主要コンポーネント:
  - GanttBoard
  - TaskDialog
  - DateField
  - store/ganttStore
  - constants/i18n, taskColors

# 納品物
1) 必要ファイル一式を作成
2) 主要実装ポイントを簡潔に説明
3) 実行コマンド（npm install, npm run dev, npm run build）
4) 最低限の動作確認項目チェックリスト

この要件で実装を開始してください。

必要なら、このプロンプトを「Codex向け（編集手順まで含む版）」と「ChatGPT向け（設計説明重視版）」の2種類に分けて作ります。

STEP2

タスク間の依存を示す線の位置が正しくないなどの問題点は、回避できないのでは？

回答２

回避できます。
ただし「最初のプロンプトで明示」しないと再発しやすいです。

特に依存線ズレは、次を要件化すれば防げます。

• バー描画と依存線描画で同一の座標計算関数を必須化
• day/week/month 全モードで座標一致を確認
• マイルストーン（菱形）も同じ座標系で扱う
• 受け入れ基準を明文化
  • 「依存線始点=先行バー右端」
  • 「依存線終点=後続バー左端」
  • 「スクロール/折りたたみ/表示切替後も一致」

つまり、問題は「避けられない」ではなく、
「要件・受け入れ条件を具体化しないと起きやすい」です。

必要なら、再発防止用の“厳密版プロンプト”を作ります。

STEP3

はい。
「Codex向け（編集手順まで含む版）」に問題の回避策を入れてください

回答３

あなたは Codex（実装エージェント）です。以下の要件で、ガントチャートを「最初から最終版」として実装してください。
要件を満たすコードを実際に作成し、ビルド確認まで行ってください。

# 0. ゴール
requirements.md の基本要件に加え、後続で判明した不具合を最初から回避し、追加機能を含む完成版を実装する。

# 1. 技術スタック
- Vite 6+
- JavaScript + React
- Tailwind CSS v4
- Zustand
- date-fns

# 2. 実装対象（機能一覧）
## 基本
- タスク: 名前 / 開始日 / 終了日 / 進捗 / 担当 / 色
- 日/週/月切替
- 今日ライン
- マイルストーン
- 折りたたみ/展開（親子）
- 複数プロジェクト切替
- タスクバー移動（ドラッグ）
- タスク期間変更（右端ハンドル）
- 進捗変更（専用ハンドル）
- 依存関係（親子 + タスク依存）
- 依存線表示

## 追加UX
- タスク追加（必須）
- タスク追加/編集はダイアログ（保存/キャンセル必須）
- 日付入力はカレンダーUI（date picker）
- 色選択は自由色 + プリセットスウォッチ
- 日付縦グリッド線
- day表示時の週末ハイライト
- プロジェクト追加（ダイアログ）

## 制約
- 後続開始日 >= 先行終了日の翌日
- 依存元終了日変更時、下流タスクを自動再計算
- 親期間は子期間から自動算出
- 親進捗は子進捗から自動算出（期間加重平均）
- 子タスク並び替えは同じ親配下のみ

## 操作
- 左タスクリストの行ドラッグ並び替え
- Undo/Redo（履歴）
- ショートカット:
  - Ctrl/Cmd+Z
  - Ctrl/Cmd+Shift+Z
  - Ctrl/Cmd+Y
- Undo/Redoボタンはアイコン

## 多言語
- 日本語 / 英語 / 中国語（簡体）
- 辞書ベースで即時切替

# 3. 不具合の再発防止（重要・必須）
以下は「実装規約」として厳守すること。

## A. 依存線ズレ防止
1) バー描画と依存線描画で、座標計算を必ず共通関数化する  
   - 例: getTaskGeometry(task, rowIndex) -> { left, right, centerY, width }
2) 依存線の始点/終点は geometry の値のみ使う（独自再計算禁止）
3) マイルストーンも同じ座標系で処理
4) 受け入れ基準:
   - 始点=先行タスク右端
   - 終点=後続タスク左端
   - day/week/month 切替後も一致
   - 折りたたみ/展開後も一致

## B. 期間変更と進捗変更の誤操作防止
1) 右端ハンドル=期間リサイズ専用
2) 進捗変更は別ノブ専用
3) バー本体ドラッグ=移動のみ
4) 受け入れ基準:
   - 右端ドラッグで終了日のみ変化
   - 進捗は変化しない
   - 進捗ノブ操作で進捗のみ変化

## C. タスク行並び替えズレ防止
1) ドロップ位置を before/after で判定（行中央で分岐）
2) 表示インジケータ線と実際の挿入位置を同一ロジックにする
3) 標準ドラッグゴーストを無効化し、ドラッグ中行を明示
4) 受け入れ基準:
   - 線が上ならその行の前、下なら後ろに確実に入る
   - 1行のみドラッグ中に見える

## D. 親子・依存制約の破綻防止
1) 制約ロジックは store に一元化
2) add/update/move/resize/reorder の全操作後に同じ制約パイプラインを適用
3) 推奨順序:
   - 正規化（自己依存・不正親参照除去）
   - 依存制約適用
   - 親期間/親進捗ロールアップ
4) UIは「表示・入力」のみ。制約判断を分散しない

# 4. 実装手順（Codex向け）
以下の順序で実装・確認すること。

1) プロジェクト雛形作成（Vite + React + Tailwind v4 + Zustand + date-fns）
2) `src/store/ganttStore.js` 実装
   - 初期データ（2プロジェクト×10タスク）
   - 制約パイプライン
   - 履歴（undo/redo）
   - addTask / addProject / reorderTask
3) `src/constants/i18n.js` と `src/constants/taskColors.js`
4) `src/components/DateField.jsx`
5) `src/components/TaskDialog.jsx`
6) `src/components/GanttBoard.jsx`
   - ヘッダー操作
   - 左リストDnD
   - 右タイムライン
   - 共通geometry + 依存線
   - ツールチップ/ヒント
7) `src/App.jsx`, `src/main.jsx`, `src/index.css`
8) `npm run build` 実行
9) 必須チェックリストを実施

# 5. 必須チェックリスト（実装後）
- [ ] 依存線がバー端に正確一致
- [ ] 右端ハンドルは期間変更のみ
- [ ] 進捗ノブは進捗変更のみ
- [ ] タスク追加/編集に保存・キャンセルあり
- [ ] 親期間/親進捗が子から自動反映
- [ ] 依存制約で後続開始日が自動補正
- [ ] 行DnDの線位置と挿入位置が一致
- [ ] 子タスクは同一親内でのみ並び替え可
- [ ] undo/redo + ショートカット動作
- [ ] 日英中切替で主要UI文言が変わる
- [ ] プロジェクト追加が動作

# 6. 出力形式
実装完了後、以下を報告:
1) 変更ファイル一覧
2) 再発防止策をどこで実現したか（A/B/C/Dごと）
3) ビルド結果
4) 未実装・既知制約（あれば）

STEP4

requirements.md に内容を記述した。
指示するプロンプトは？

回答４

これをそのまま指示すればOKです。

requirements.md の内容を唯一の要件ソースとして、ガントチャートを最初から実装してください。

進め方:
1. まず requirements.md を読み、要件を実装タスクに分解
2. 必要ファイルを作成・更新
3. 依存制約/親子制約/UI操作（ドラッグ、編集、追加、undo/redo、多言語など）を要件どおり実装
4. バー座標と依存線座標は共通ロジック化してズレを防止
5. ドラッグ操作は用途を分離（移動/期間変更/進捗変更）
6. すべて実装後に npm run build を実行して成功確認

必須:
- requirements.md に書かれていない仕様は勝手に省略しない
- 曖昧点は「合理的な前提」を置いて実装し、最後に前提を明記
- 変更ファイル一覧と、要件対応表（要件→実装箇所）を最後に報告

開発実行

新しいプロジェクトで Codex に提示されたプロンプトをそのまま指示して作成しました。

タスクバーと関連線の問題再発防止策を実施しているが、タスクバーごとにズレるという結果に！

Codex の本記事の評価

Codex に本記事の内容をチェックしてもらったところ、下記の回答が得られました。

記事内容の方向性は正確です。特に「プロンプトを厳密化しても、UI構造の設計ミスは別で潰す必要がある」という結論は妥当です。

ChatGPT Codex でガントチャート作成その２をチェックして
https://qiita.com/rex0220/items/c0ed069a01393e4e9bf5

まとめて問題対策したどうなるか？

試してみました。
Codex は、全部直したと回答しています。
問題点は、一つずつ地道に直した方がよさそうです。

下記問題点の修正を

タスク一覧とタスクバーの位置があっていない
ガントチャートが画面いっぱい使わず、縦スクロールになっている
縦スクロールするとタスクバー部分のみがスクロールし、タスク一覧と同期がとれていない
親タスクはドラッグ移動できるが、子タスクがドラッグ移動できない
進捗をドラッグすると移動中は進捗の位置が変わるが、離すとタスクが移動して進捗が戻る

修正結果

見た目は、あまり変わっていません。
試してみたところ変わったのは、子タスクの進捗をドラッグで変更できるようになったくらいですね。