マーメイド#14 ガントチャート

**ひとりマーメイド14日目**
**ガントチャート**

## 概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではER図の記述について紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/5dd3a3109a5e6ae8b251

## マーメイドで記述するガントチャート
前回の記事ではER図の記法を紹介しました。

今日はガントチャートを見ていきます。ガントチャートはスケジュールをタスクごとに管理する図です。縦軸はタスク、横軸は時間を表します。

```:mermaid
gantt
    title Schedule
    dateFormat  YYYY-MM-DD

    section Project A
        Plane       :a, 2022-12-25, 10d
        Implement   :b, after a, 30d
    section Project B
        Plane       :c, 2023-01-05, 12d
        Implement   :d, after c, 24d
```
```mermaid
gantt
    title Schedule
    dateFormat  YYYY-MM-DD

    section Project A
        Plane       :a, 2022-12-25, 10d
        Implement   :b, after a, 30d
    section Project B
        Plane       :c, 2023-01-05, 12d
        Implement   :d, after c, 24d
```

赤い縦線が現在時刻を示します。

## 宣言とタイトル
ガントチャートは`gantt`で宣言されます。

`title`でガントチャートはのタイトルを定義します。こちらは省略可能です。

## 日付の設定
**入力フォーマット**
`dateFormat`でスクリプト上での入力フォーマットを設定します。こちらは`YYYY-MM-DD`がデフォルトで設定されているため省略可能です。

|Input|Exapmle|
|---|---|
|`YYYY-MM-DD`|`2022-12-25`|
|`HH:mm`|`21:30`|
|...||

詳しい形式はこちらを確認してください。

https://momentjs.com/docs/#/parsing/string-format/

**出力フォーマット**
`axisFormat`で横軸の表示形式を設定します。こちらも`YYYY-MM-DD`がデフォルトで設定されているため省略可能です。
|Input|Exapmle|
|---|---|
|`%Y-%m-%d`|`2022-12-25`|
|`%H:%M`|`21:30`|
|...||

詳しい形式はこちらを確認してください。

https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format

```:mermaid
gantt
    title Schedule
    dateFormat  HH:mm
    axisFormat %H:%M

    section today
        Job     :a, 09:00, 12:00
        Break   :b, after a, 1h
```
```mermaid
gantt
    title Schedule
    dateFormat  HH:mm
    axisFormat %H:%M

    section today
        Job     :a, 09:00, 12:00
        Break   :b, after a, 1h
```

## 横軸の目盛
※目盛の変更はマーメイドv.9.3.0以降でレンダリング可能です。
時間軸の目盛を任意の幅に変更することができます。
`tickInterval SCALE`

使用できる単位は以下の通りです。
`minute`, `hour`, `day`, `week`, `month`

```:mermaid
gantt
    tickInterval 1week
    section Project
        Task a  :a, 2022-12-25, 8d
        Task b  :b, after a, 7d
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/20098f50-03c5-0759-1399-79a52e553f61.png)




## 期間の指定
左に開始日時、右に終了日時を記述することで期間を定義することができます。
`TASK: ID, BEGIN_TIME, END_TIME`
```:mermaid
gantt
    section Project
        Task a  :a, 2022-12-25, 2022-12-26
        Task b  :b, 2022-12-26, 2022-12-27
```
```mermaid
gantt
    section Project
        Task a  :a, 2022-12-25, 2022-12-26
        Task b  :b, 2022-12-26, 2022-12-27
```

終了日時の代わりに、開始日時からの所要時間で記述することもできます。
`TASK: ID, BEGIN_TIME, REQUIRED_TIME`
```:mermaid
gantt
    section Project
        Task a  :a, 2022-12-25, 1d
        Task b  :b, 2022-12-26, 1d
```
```mermaid
gantt
    section Project
        Task a  :a, 2022-12-25, 1d
        Task b  :b, 2022-12-26, 1d
```

直前のタスクの終了日時を次のタスクの開始日時に指定することができます。
`TASK: ID, after PREVIOUS_ID, REQUIRED_TIME`

```:mermaid
gantt
    section Project
        Task a  :a, 2022-12-25, 1d
        Task b  :b, after a, 1d
```
```mermaid
gantt
    section Project
        Task a  :a, 2022-12-25, 1d
        Task b  :b, after a, 1d
```

## ステータス
タスクにステータスを付与することができます。

|記述|ステータス|意味|
|---|---|---|
|`done`|完了||
|`active`|実施中||
|`crit`|クリティカルパス|重要タスク|
|`milestone`|マイルストーン|瞬間|

クリティカルパスは重要なタスクであるため遅れると他のタスクにも影響します。マイルストーンは瞬間のスケジュールを定義する際に使用します。

```:mermaid
gantt
    section Project
        Task a  :           a, 2022-12-25, 1d
        Task b  :done,      b, after a,    1d
        Task b  :active,    c, after b,    1d
        Task b  :crit,      d, after c,    1d
        Task b  :milestone, e, after d,    1d
```

```mermaid
gantt
    section Project
        Task a  :           a, 2022-12-25, 1d
        Task b  :done,      b, after a,    1d
        Task b  :active,    c, after b,    1d
        Task b  :crit,      d, after c,    1d
        Task b  :milestone, e, after d,    1d
```
## 除外日
`excludes`で特定の曜日を除外することができます。
ex) `excludes sunday`

`weekends`を指定すると土日が除外されます。
`excludes weekends`

```:mermaid
gantt
    excludes weekends
    section Project
        Task a  :a, 2022-12-25, 12d
```
```mermaid
gantt
    excludes weekends
    section Project
        Task a  :a, 2022-12-25, 12d
```

## 現在時刻の非表示
チャート中に表示される赤い縦線が現在時刻を示しています。
`todayMarker off`を指定することでこれを非表示にすることができます。

**デフォルト**
```:mermaid
gantt
    section Project
        Task a  :a, 2022-12-01, 365d
```
```mermaid
gantt
    section Project
        Task a  :a, 2022-12-01, 365d
```
**現在時刻非表示**
```:mermaid
gantt
    todayMarker off
    section Project
        Task a  :a, 2022-12-01, 365d
```
```mermaid
gantt
    todayMarker off
    section Project
        Task a  :a, 2022-12-01, 365d
```

## まとめ
ER図の基本的な記法について紹介しました！

↓↓次回の記事はこちら！

https://qiita.com/hirokiwa/items/8ba4901a865ccdecb4e8

## 参考

https://mermaid.js.org/