はじめに - Excelガントチャートの限界
プロジェクト管理でガントチャートを作る際、多くの人が(不満を抱えながらもなぜか)Excelの条件付き書式と数式を組み合わせてガントチャートを作成していると思います。私もその一人です。
しかし、少し行数が増える（200行以上など）と更新が煩雑になり、動作も重く、俯瞰性も悪い。そして何より「間違ったExcelの使い方」の代表例のような感じがして、もやもやしていました。
2023年にChatGPTが登場し、コード生成能力の高さを知って「ガントチャートアプリを作れるのでは？」と思ったのがきっかけで制作を始めました。
私自身はインフラ系エンジニアで、React、TypeScript、Webアプリ開発は未経験。ChatGPTに一から教えてもらいながら開発に取り組みました。
作ったもの
GitHubリポジトリ: https://github.com/kloir-z/ganttapp-local
試せるページ: https://kloir-z.github.io/ganttapp-local/
- PCのChromium系ブラウザ（Chrome/Edge等）専用
- スマホ不可、PCでもSafari/Firefox不可
セキュリティ面を考慮し、SaaSのような形ではなくログイン不要、一旦完全オフラインで動作するWebアプリとしています。ソースコードはMITライセンスでGitHub公開しています。
データ保存については内部データ(reduxが持つもの)のjsonをzip圧縮したものをダウンロード/アップロードするか、jsonをそのままテキスト表示、貼り付けすることもできます。
Excelガントチャートのイケてないところ
小規模であれば十分Excelで問題ないと思うのですが、少し行数が増えてきた時のExcelガントチャートの問題点を整理してみました：
パフォーマンス問題
- 行数が増えると(200行以上等)を超えると動作が重くなる
操作性の問題
- チャートのバーを直接さわれず、日付の入力が必要
俯瞰性の悪さ
- 中長期/少し複雑なプロジェクトになると全体像が把握しにくい
開発したアプリの特徴
Excelライクな操作感
- セル編集、行の挿入・削除・コピー
- ドラッグによる行移動
- 階層構造でタスクをグループ化
- 馴染みのある表計算ソフト風UI
強力な依存関係システム
after,-1,3 # 1行前の完了3日後に開始
sameas,-1 # 1行前と同時開始
- 文字列での直感的な依存関係設定
- リアルタイム連動（依存元を変更すると即座に反映）
- 休日・祝日を考慮した自動調整（土日祝を自動回避）
表とチャートの完全連動
- 表を編集するとチャートが即座に反映
- チャートをドラッグすると表も自動更新
- ダブルクリックでチャート作成、ドラッグで移動・調整、右クリックで削除
俯瞰性とパフォーマンスの両立
- 俯瞰性: 0.5px単位でのチャート幅調整により、数年間の長期プロジェクトも一画面で把握可能
- パフォーマンス: 最大1000行まで軽快動作、Excelの200行制限を大幅改善
- スケーラビリティ: 大規模プロジェクトでもスムーズなスクロールと操作感
その他の機能
- 取り消し・やり直し: 最大30回の操作履歴を保持
- 多言語対応: 日本語・英語に対応
- 日付形式設定: yyyy/mm/dd、mm/dd/yyyy、dd/mm/yyyy形式から選択可能
- カスタマイズ可能な休日設定（週末の曜日・色、祝日の色、独自休日、土日休みでなく例えば月水休みなども簡単に設定可能）
技術的なポイント
アーキテクチャ設計
- React + TypeScript: 型安全な開発環境
- Redux Toolkit: 複雑な状態管理（WBSデータ、UI状態、設定など）
- オフラインファースト: クラウド依存なしの完全ローカル動作
UI実装の工夫
左ペイン（表部分）: ReactGridを採用
- Excelライクな操作感を短期間で実現
- セル編集、行操作、キーボードナビゲーションが標準装備
- 独自セル（日付セル、依存関係セル）のカスタマイズが容易
右ペイン（チャート部分）: 完全自作
- 0.5px単位のリアルタイムな日付幅調整
- ドラッグ&ドロップによる直感的な期間変更
核となる機能の実装
依存関係計算エンジン
// 依存関係の解析例
"after,-1,3" → 1行前のタスク完了3日後に開始
"sameas,-2" → 2行前のタスクと同時開始
- 文字列パースから日付計算までの一連の処理
- 休日・祝日を考慮した営業日計算
- 循環参照の検出と回避
休日関連実装
- 行単位での休日考慮設定（営業日計算 or 単純日数計算）
- 柔軟な休日設定（土日以外の休日パターンにも対応）
- 2022-2029年の日本祝日データを内蔵
Undo/Redo
- Redux状態の30回分スナップショット保持
実際の使用感
Excel比較での利点
- パフォーマンス: 1000行でも軽快動作
- 俯瞰性: 長期プロジェクトも全体把握しやすい
- 依存関係: 比較的簡単ない依存関係設定とリアルタイム更新
残る課題・限界
- ブラウザ制限: Chromium系（Chrome/Edge）のみ対応
- モバイル非対応: PC専用設計
- 学習コスト: 依存関係記法の習得が必要
- SaaS化: クラウド保存や共同編集機能を実装したいものの、実際の現場では機密情報を扱うことになるのでセキュリティや信頼性等のハードルが高い
どういう用途に向いているか
- 個人・小チームのプロジェクト管理
- 200行以上の大規模ガントチャート
- 依存関係が複雑なプロジェクト
- オフライン環境での作業
さいごに
同じ悩みを持つ方に使っていただければと思い、MITライセンスで公開しています。
あくまで「自分で使いたいために作成したもの」ですが、改善提案やコントリビューションも歓迎です。
技術スタック
- React, TypeScript, Redux Toolkit
- Vite, Material-UI, Ant Design
- ReactGrid, Quill Editor, JSZip
- Jest + React Testing Library
動作環境
- PCのChromium系ブラウザ（Chrome/Edge）専用
- Node.js 16以上での開発環境