ガントチャートを簡単に作れるJavaScriptライブラリ「Frappe Gantt」

はじめに

プロジェクト管理のツールとしてよく利用されるガントチャートは、
進捗状況の可視化に役立ちます。
しかし、手軽にガントチャートを作成できるJavaScriptライブラリを探すのは意外と難しいものです。
そんな中、「Frappe Gantt」は、シンプルかつ軽量な
ガントチャートライブラリとして、多くの開発者に利用されています。

『Frappe Gantt』とは？

Frappe Ganttの使用例

Frappe Ganttは、オープンソースで提供されているJavaScriptライブラリで、SVGベースの美しいガントチャートを簡単に作成できます。
シンプルなAPIを備えており、手軽にタスクのスケジュールを可視化できます。

Frappe Ganttの利点と特徴

軽量でシンプル：余計な機能を省き、最小限のコードでガントチャートを作成可能。
SVGベース：SVGアニメーションライブラリ『snap-svg-min.js』に依存しており、
高解像度での表示が可能で、スタイリングの自由度も高い。
カスタマイズ性が高い：タスクの追加やイベントの登録が簡単。
手軽：CDNを読み込むだけで手軽に導入可能。
環境依存も少なく、ほとんどの環境・ブラウザで動作します。

使い方

1．Frappe GanttのCDNを読み込ませる

まず、以下のCDNをHTMLに追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.css" integrity="sha512-57KPd8WI3U+HC1LxsxWPL2NKbW82g0BH+0PuktNNSgY1E50mnIc0F0cmWxdnvrWx09l8+PU2Kj+Vz33I+0WApw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min.js" integrity="sha512-HyGTvFEibBWxuZkDsE2wmy0VQ0JRirYgGieHp0pUmmwyrcFkAbn55kZrSXzCgKga04SIti5jZQVjbTSzFpzMlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2．Frappe Ganttを起動する要素を記載

ガントチャートを表示するためのHTML要素を追加します。

<svg id="gantt"></svg>

3．Frappe Ganttを有効化する

次に、JavaScriptでガントチャートを描画します。

const tasks = [
    { id: "Task 1", name: "タスク1", start: "2024-02-01", end: "2024-02-07", progress: 50 }
];
const gantt = new Gantt("#gantt", tasks);

4．Frappe Ganttにイベントを登録する

タスククリック時のイベントを登録することも可能です。

gantt.on("click", task => {
    alert(`Task: ${task.name}`);
});

おわりに

Frappe Ganttは、シンプルな構造ながら強力なガントチャート機能を提供するライブラリです。
プロジェクトの進捗管理を簡単に可視化したい場合に最適です。
ぜひ試してみてください₍ ᐢ. ̫ .ᐢ ₎