🤗
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