0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@rex0220

ChatGPT Codex でガントチャート作成

0
Last updated at Posted at 2026-03-12

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

概要

Claude でガントチャート作成（CLI版その２）と同様に、ガントチャートの基本的なドラッグ等の機能を明記して、作成を行ってみました。
Claude CLI と同様に、vite の開発環境から作成してくれます。

最初のバージョンでは、やはり不具合や機能の足りないところがありますが、順次修正を行うことで使えそうなガントチャートになります。

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

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

2026-03-12_19h14_56.png

  • 英語表記

2026-03-12_19h22_56.png

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

2026-03-12_19h21_59.png

開発手順

Codex で、指定した要件に基づいてガントチャートを作成します。

開発開始

project で、指定したフォルダーに requirements.md を追加しておきます。
作成指示をすると、10分くらいで初期バージョンが作成されます。

タスクを管理するガントチャートを 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 など、これまでブラケットが必要だった動的数値がそのまま書けるようになっています。
  • Codex の画面

2026-03-12_19h26_09.png

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

タスク追加の機能がない、タスク間の線がズレているなどいろいろ問題があります。

2026-03-12_17h18_34.png

2026-03-12_17h19_28.png

2026-03-12_17h20_04.png

問題の修正

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

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

機能の追加

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

仕様の相談

Codex に仕様の相談を行うと、案を出してくれる。

タスク行がドラッグ移動できることがわかりにくい
わかりやすくする方法は？
  • Codex の回答
効果が高い順で、次の3つが特におすすめです。

1. 行先頭に「ドラッグハンドル」アイコンを常時表示  
`⋮⋮` や `☰` を左端に置くと、掴めるUIだと一目で伝わります。

2. ホバー時に行全体を強調＋「ドラッグして並び替え」ツールチップ  
色変化だけより、文言が出る方が迷いが減ります。

3. 初回だけガイド表示（1回で消える）  
「左リストをドラッグして順序変更できます」を小さく表示すると学習コストが下がります。

追加で効くもの:
1. ドラッグ中のプレビュー行と挿入位置ラインを明確化  
2. カーソルを `grab/grabbing` に変更  
3. モバイル向けに長押しでドラッグ開始

必要なら、まずおすすめ3点をこのまま実装します。

ガントチャート機能一覧

実装済み機能のまとめです。

  • タスク管理: タスク名 / 開始日 / 終了日 / 進捗 / 担当 / 色
  • ガント表示: 日・週・月切替、今日ライン、週末ハイライト、日付縦グリッド
  • タスク操作: バー移動、右端リサイズ（期間変更）、進捗ノブ操作
  • タスク編集UI: 追加・編集ともにダイアログ化（保存/キャンセル）
  • 親子タスク: 折りたたみ/展開、子タスク管理
  • 依存関係: 設定UI、依存線表示、依存制約の自動補正
  • 依存制約: 後続開始日は先行終了日の翌日以降に自動補正
  • 連鎖補正: 依存先終了日変更時に下流タスクを自動再計算
  • 親期間自動化: 親タスク期間は子タスク期間から自動算出
  • 親進捗自動化: 親進捗は子進捗（期間加重平均）で自動算出
  • 行並び替え: 左リストのドラッグでタスク順序変更
    • 子タスクは同一親配下でのみ並び替え可
    • ドロップ位置ライン表示（before/after一致）
  • 並び替えUX: ドラッグハンドル、ホバー説明、初回ガイド、ドラッグ行強調
  • プロジェクト管理: 複数プロジェクト切替、プロジェクト追加ダイアログ
  • 多言語対応: 日本語 / English / 中文 のUI切替
  • Undo/Redo: ボタン（アイコン）とショートカット
    • Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z, Ctrl/Cmd+Y

コード解説

Codex にコードを解説してもらいます。

各コードを解説して

了解。現状コードを「ファイルごと」に解説します。

全体構成

main.jsx

  • Reactアプリ起動点です。
  • BrowserRouter をラップしてルーティングを有効化。
  • index.css を読み込みます。

App.jsx

  • ルート定義のみ。
  • / で GanttBoard を表示。
  • それ以外は / にリダイレクト。

ganttStore.js

  • アプリの中核です。Zustandで状態とロジックを一元管理。
  • 含む状態:
    • projects, activeProjectId, language, viewMode, collapsedTaskIds
    • historyPast, historyFuture（undo/redo）
  • 含む主要アクション:
    • タスク: addTask, updateTask, moveTaskByUnits, resizeTaskByUnits, updateProgress, reorderTask
    • プロジェクト: addProject
    • UI: setLanguage, setViewMode, setActiveProject, toggleCollapseTask
    • 履歴: undo, redo
  • 制約ロジック（重要）:
    • 依存制約: 後続タスクの開始日は先行終了日の翌日以降に自動補正
    • 親子制約: 親期間は子期間から自動ロールアップ
    • 親進捗: 子進捗の期間加重平均で自動計算
  • applyWithHistory で変更前後のスナップショット比較を行い、差分がある操作だけ履歴化。

GanttBoard.jsx

  • ガントチャート画面全体を描画。
  • 主な責務:
    • ヘッダー操作（プロジェクト切替・追加、言語切替、日週月切替、undo/redo）
    • 左ペイン（タスク一覧、折りたたみ、並び替えDnD）
    • 右ペイン（タイムライン、バー、依存線、今日ライン、週末ハイライト）
    • 追加/編集ダイアログの起動
  • ドラッグ操作:
    • バー本体: 期間移動
    • 右端ハンドル: 期間リサイズ
    • 白ノブ: 進捗変更
    • 左リスト行DnD: 並び順変更（同じ親配下のみ）
  • 並び替えUX:
    • ハンドル表示
    • 初回ヒント（localStorage で再表示抑止）
    • ドロップ位置を before/after で判定し、線表示と実際の挿入位置を一致させています。

TaskDialog.jsx

  • タスク追加/編集の共通モーダル。
  • 入力項目:
    • 名称、担当、開始/終了、進捗、色、親タスク、マイルストーン、依存タスク
  • normalizeDraft で保存前整形:
    • 空名称/空担当の補完
    • 日付の妥当化
    • 進捗の0-100クランプ

DateField.jsx

  • type="date" 入力の共通部品。
  • 言語ごとの lang を切り替え。
  • カレンダーアイコンボタンで showPicker() を呼び出し、環境差を吸収。

i18n.js

  • ja/en/zh のUI文言辞書。
  • getText(language, key) でフォールバック付き取得。
  • 画面中の文言をここに集約。

taskColors.js

  • タスク色のプリセット一覧。
  • 追加/編集ダイアログでワンクリック選択に利用。

index.css

  • Tailwind v4読み込み。
  • 全体背景、フォント、fade-in アニメーション（@starting-style）、スクロールバー設定。

補足

  • TaskDetail.jsx は現ルーティングで未使用です（編集はダイアログ化済み）。
  • 必要なら次に、ganttStore.js の制約処理だけを図付きで深掘り解説します。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?