🤗

Reactでローカル用ガントチャートアプリ作成までの備忘録①

2024/11/15に公開

作成背景

  • イントラ環境での超ローカル
  • Notionは会社ではセキュリティ上、申請とか必要

作りたいイメージ

神様を発見
https://qiita.com/nkitao/items/cd70fc8f0fbc0983ec69
できるだけ自分の力でやりつつ本当に困ったら神を参考にする

やったこと記録

テンプレートを作成

npx create-react-app my-gantt-app --template typescript
cd my-gantt-app

プロジェクト作成後は以下のサイトを参考にtailwind cssを適用

https://tailwindcss.com/docs/guides/create-react-app

npm start

実行してみて以下のようにCSS適用されていればtailwindはOK

ガントチャート関連のライブラリを確認

神が使用していたものを使用する予定だったが
ミーハーなので人気かつ使いやすそうなのを選ぶ

土日色付けと日、週、月と切り替えやすそうなものを優先にする

gantt-task-react

  • 最終の更新は2年前
  • スター数は900ぐらい

https://github.com/MaTeMaTuK/gantt-task-react

React Google Chart

  • ドキュメントがわかりやすそう
  • 他のチャートと組み合わせできそう

https://www.react-google-charts.com/examples/gantt

gantt-schedule-timeline-calendar

  • めっちゃ良さそうだったけど有料っぽい(違ったらすみません)

https://github.com/neuronetio/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
  • 更新も続いている

https://github.com/RakanNimer/react-google-charts

細かい使い方等はこっちっぽい

https://developers.google.com/chart/interactive/docs/gallery/ganttchart?hl=ja#configuration-options

どのライブラリも頑張ればカスタマイズできそうかも

次にやること

  • サンプルコード動作確認
  • modalからタスク追加トライ

知見のある人は協力 or コメントお願いします。

Discussion