🤗
Reactでローカル用ガントチャートアプリ作成までの備忘録①
作成背景
- イントラ環境での超ローカル
- Notionは会社ではセキュリティ上、申請とか必要
作りたいイメージ
神様を発見 できるだけ自分の力でやりつつ本当に困ったら神を参考にする
やったこと記録
テンプレートを作成
npx create-react-app my-gantt-app --template typescript
cd my-gantt-app
プロジェクト作成後は以下のサイトを参考にtailwind cssを適用
npm start
実行してみて以下のようにCSS適用されていればtailwindはOK
ガントチャート関連のライブラリを確認
神が使用していたものを使用する予定だったが
ミーハーなので人気かつ使いやすそうなのを選ぶ
土日色付けと日、週、月と切り替えやすそうなものを優先にする
gantt-task-react
- 最終の更新は2年前
- スター数は900ぐらい
React Google Chart
- ドキュメントがわかりやすそう
- 他のチャートと組み合わせできそう
gantt-schedule-timeline-calendar
- めっちゃ良さそうだったけど有料っぽい（違ったらすみません）
色々ありすぎるのでLLMに聞いてみた
claude
react typescriptでガントチャートを作成するのにおすすめのライブラリは？
オープンソースで始めるなら react-gantt-chart か Frappe Gantt がおすすめです。
本格的なプロジェクト管理ツールを作るなら、DHTMLX や Bryntum の
商用ライブラリを検討すると良いでしょう。
gpt-40
react-gantt-chart はシンプルなガントチャートに適しており、基本機能が揃っています。
よりカスタマイズ性が高い dhtmlx-gantt や、Google公式の信頼性がある react-google->charts も、複雑なスケジュール管理には有用です。
さらに、frappe-gantt は軽量で使いやすく、シンプルなガントチャートに最適です。
結論
サイトが見やすそうなReact Gantt Chartを使ってみる
SVGのものを選ぶのが良いとの声が多数だった
ライブラリの公式を読む
githubも拝見
- スター数1.6k
- 更新も続いている
細かい使い方等はこっちっぽい
どのライブラリも頑張ればカスタマイズできそうかも
次にやること
- サンプルコード動作確認
- modalからタスク追加トライ
知見のある人は協力 or コメントお願いします。
Discussion