Excelが激重なのでmermaid.jsでガントチャートを作ってみた


こんにちは！GxPの露木です。
この記事は[グロースエクスパートナーズ Advent Calendar 2021の24日目](https://qiita.com/advent-calendar/2021/gxp)です。

皆さんは、業務の進捗管理をするのにどんなツールを使っていますか？
私の所属するチームでは、Web版Excelに関数で作ったガントチャートを使用しています。

:::note info
<strong>ガントチャート（Gantt chart）とは</strong>
プロジェクト管理や生産管理などで工程管理に用いられる表。
横棒によって作業の進捗状況を表す。
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/2f560278-c06e-27ae-8890-a3a03515f161.png">
:::


「誰がどのタスクにどのくらいの期間で取り組んだか」をテキストで打つことによって、関数で棒グラフ化して一目で把握することが出来る非常に便利なツールです。

しかしひとつだけデメリットがありました…

![AC_01 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/e3aee735-e009-fe84-3b81-a48258ac3885.png)
__・・・__
![AC_02 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/ecb03406-6594-68b8-77a8-e2f939bff795.png)

__・・・お、重い__

この時のExcelは

* タスク数（行数）とガントの期間（列数）が多い
* 条件付き書式設定有り
* Web版で共同編集できる状態

と、重くなってしまう原因が重なりに重なった状態になってました。


ガントチャートを更新する時、なかなか更新が完了しなかったり…(永遠にぐるぐる…)
表の行が非常に多かったときは、「インターネットに接続できません」と表示されることもしばしばあり、結局更新できていない！なんていうこともありました。

そんな時に、業務以外の他活動にて、mermaid.jsと出会いました。




# mermaid.jsでガントチャートが作れるらしい

私の所属するGxPでは、案件業務以外でGrowthUs!という「他部署・他チームの人達で集まって、社内ツールや色々なものを作ってみる」活動があります。
その活動の中でバリューストリームマップを作成する際に、mermaid.jsの存在を知りました。

:::note info
<strong>GrowthUs!関連記事</strong>
●  <a href="https://qiita.com/ksuzuki-gxp/items/2a989ea448c0fce245a7">チームについて思い悩むだけだった私が、勇気を出して行動に移してみた話</a>
●  <a href="https://qiita.com/riki_ykgw/items/c3f7d27aefd136381139">React + FullCalendarでデフォルト状態から各種プロパティを使ってカスタマイズしていく</a>
:::

:::note info
<strong>mermaid.js とは</strong>
テキストとコードを用いて、図表を作成することが出来る
ex)フローチャート、クラス図、エンティティ図…etc
:::

mermaid.jsについて調べていると、なんとガントチャートも作図できると書いてあるではありませんか。

チームでの話し合いでも「ガントチャート重い」という話題が出ていた時だったので、俄然mermaid.jsに興味がわきました。




# 実際に書いてみた

[Mermaid Live Editor](https://mermaid.live/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cbiAgIiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsInVwZGF0ZUVkaXRvciI6dHJ1ZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOnRydWV9)というオンラインサイトにてテキスト形式で、図やフローチャートを生成してSVGファイルで保存することが出来ます。
今回はこのオンラインサイトでガントチャートを作成してみます。
(クリスマスなので、公式がクリスマス仕様のフローチャートを用意していますね)
![スクリーンショット (1166).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/9a9eb18f-9325-3d08-0a46-4e0f33a81fce.png)


 
今回は、

* 一人がどのタスクに取り組むか(左列に担当者固定)
* このタスクに取り組んでいるのは誰か(左列にタスク固定)

の2パターンで書いてみようと思います。

![スクリーンショット (1169).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/98567b78-11f2-2203-4319-d9b6906a09a8.png)



##(1)「一人がどのタスクに取り組むか(左列に担当者固定)」

* 担当者がどのタスクを持っているのかが一目で分かりやすい
* `done`、`active`で担当者あたりのタスク状況が見やすい

[Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/edit/#eyJjb2RlIjoiZ2FudHRcbmRhdGVGb3JtYXQgTU0tRERcbnRpdGxlIOODgeODvOODoOmrmOeUsOOCrOODs-ODiOODgeODo-ODvOODiFxuXG5zZWN0aW9uIOa4heawtFxu44OG44K544OI5LuV5qeY5pu45L2c5oiQIDphMSAsMDctMTAgLDA3LTE1XG5cbnNlY3Rpb24g5riF55SwXG5B5a6f6KOFIDphY3RpdmUgLGIxICwwNi0yNCAsMDYtMzBcblxuc2VjdGlvbiDlsqHnlLBcbkLlrp_oo4UgOmRvbmUgLGMxICwwNi0yMCAsMDYtMjNcbkPlrp_oo4UgOmFjdGl2ZSAsYzIgLDA2LTIzICwwNi0yNVxuROWun-ijhSA6YWZ0ZXIgYzIsNWRcblxuc2VjdGlvbiDnpZ7ljp9cbuODkOODg-OCr-OCqOODs-ODieODh-ODl-ODreOCpCA6ZDEgLDA3LTAxICwwNy0wNFxu44OV44Ot44Oz44OI44Ko44Oz44OJ44OH44OX44Ot44KkIDpkMiAsMDctMDUgLDA3LTA4IiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsInVwZGF0ZUVkaXRvciI6ZmFsc2UsImF1dG9TeW5jIjp0cnVlLCJ1cGRhdGVEaWFncmFtIjp0cnVlfQ)

ソースコード

```
gantt
dateFormat MM-DD
title チーム高田ガントチャート

section 清水
テスト仕様書作成 :a1 ,07-10 ,07-15

section 清田
A実装 :active ,b1 ,06-24 ,06-30

section 岡田
B実装 :done ,c1 ,06-20 ,06-23
C実装 :active ,c2 ,06-23 ,06-25
D実装 :after c2,5d

section 神原
バックエンドデプロイ :d1 ,07-01 ,07-04
フロントエンドデプロイ :d2 ,07-05 ,07-08
```
画面
![mermaid-diagram-20211216161805.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/4cdbc124-5a81-ed35-f0f1-f75623103948.png)




##(2)「このタスクに取り組んでいるのは誰か(左列にタスク固定)」

* タスクのステータスが分かりやすい
* 担当者を切り替えるのはこちらの方が簡単

[Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/edit/#eyJjb2RlIjoiZ2FudHRcbmRhdGVGb3JtYXQgTU0tRERcbnRpdGxlIOODgeODvOODoOmrmOeUsOOCrOODs-ODiOODgeODo-ODvOODiFxuXG5zZWN0aW9uIEHlrp_oo4VcbuWyoeeUsCA6YWN0aXZlICxhMSAsMDYtMjQgLDA2LTMwXG5cbnNlY3Rpb24gQuWun-ijhVxu5bKh55SwIDpkb25lLCBiMSAsMDYtMjAgLDA2LTIzXG5cbnNlY3Rpb24gQ-Wun-ijhVxu5bKh55SwIDphY3RpdmUsIGMxICwwNi0yMyAsMDYtMjVcblxuc2VjdGlvbiBE5a6f6KOFXG7muIXnlLAgOmFmdGVyIGMxICw1ZFxuXG5zZWN0aW9uIOODkOODg-OCr-OCqOODs-ODieODh-ODl-ODreOCpFxu56We5Y6fIDpkMSAsIDA3LTAxICwwNy0wNFxuXG5zZWN0aW9uIOODleODreODs-ODiOOCqOODs-ODieODh-ODl-ODreOCpFxu56We5Y6fIDplMSAsIDA3LTA1ICwwNy0wOFxuXG5zZWN0aW9uIOODhuOCueODiOS7leanmOabuOS9nOaIkFxu5riF5rC0IDpmMSAsIDA3LTEwICwwNy0xNVxuXG4iLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOnRydWV9)
ソースコード

```
gantt
dateFormat MM-DD
title チーム高田ガントチャート

section A実装
岡田 :active ,a1 ,06-24 ,06-30

section B実装
岡田 :done, b1 ,06-20 ,06-23

section C実装
岡田 :active, c1 ,06-23 ,06-25

section D実装
清田 :after c1 ,5d

section バックエンドデプロイ
神原 :d1 , 07-01 ,07-04

section フロントエンドデプロイ
神原 :e1 , 07-05 ,07-08

section テスト仕様書作成
清水 :f1 , 07-10 ,07-15
```

画面
![mermaid-diagram-20211216162103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/1d17bdbe-7ea2-c9aa-c380-3aa8192fdb7f.png)






# mermaid.jsでガントチャートを作ってみて感じたこと

* 良い点
    * 重くない！
    * 書き方が難しくなく、シンプルに作図できる
    * 簡単に画像またはURLに起こせて、貼り付けることが出来る
* 難しい点
    * Web版Excelのように共同編集が出来ないため、都度更新するためのツールとしては向いていない
    * 各々で更新する時は行き違いがあるかもしれないので、声を掛け合わなきゃいけないかも
    * Excelのように誰でも初見で扱えるものではないので、最初にレクチャーが必要になるかも
    * ガントチャートの期間が長くなるにつれて図が小さく見にくくなってしまう


## 結論
__ガントチャートの更新は、今の所web版Excelが最強__
結局Excelなのかい！という着地点になってしまいましたが、リアルタイムで誰が編集しているのかが分かって簡単に入力をすることが出来るweb版Excelがやっぱり最強でした…。
冒頭で述べた重くなる原因である「タスク数（行数）とガントの期間（列数）が多い」を、タスクごとにファイルで分ける等して対処すれば、いつまでも更新できない…という問題は起こらないのかもしれません。

とはいえ、mermaid.jsも画像やURLに起こせて簡単に作図できるという長所があります。

* 最初に大まかなガントチャートの見積もりを出す時
* 週ごとのガントチャートの実績をConfluenceに記録として貼り付けたい時

に実力を発揮するかもしれません！









# 番外編：Git管理は出来そうか
VSCodeにて` Markdown Previw Mermaid Support `というプラグインをインストールすれば、mermaid.jsのプレビューを表示することが出来ます。
![スクリーンショット (1153).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/b8bf074c-03be-01c6-fc6e-f097e3d66f91.png)

![スクリーンショット (1155).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303304/35d15472-1ae8-1969-002c-d4565d91f36b.png)

実際にガントチャートをリアルタイムでコード管理するとなると、コンフリクトに注意しながらになるので、チームで以下の手順で更新を行うことになります。

1. 各自で更新のタイミングを調整する
1. 自分のブランチに切り替えて、mainに対してrebaseする
      * ` git checkout feature-○○ `
      * ` git rebase main `

1. 変更してpushしたらmainにチェックアウトして、マージする
      * ` git checkout main `
      * ` git merge feature-○○ `


__結論：ガントチャートのGit管理は面倒__
「代表して誰かが週1でコミットプッシュ」という運用なら、まだコンフリクトの心配はないと思いますが「だったらMermaid Live Editorでやった方が良くない？」という声が聞こえてきそうなのでやめておきます。


# 参考資料
[Mermaid.js-公式ドキュメント](https://mermaid-js.github.io/mermaid/#/)