ER図・テーブル設計はdbdocsを使ったら心地がよかった

:::note
本記事はQmonus Value Streamの投稿キャンペーン記事です。
:::


みなさまは普段DB設計（特にER図）を記載するときにどのようなツールを使っているでしょうか？
私の場合は以下のようなサービスを用いていました

### 1. draw.io

https://www.drawio.com/

### 2. Canva

https://www.canva.com/ja_jp/about/

### 3. Figma or FigJam

https://www.figma.com/ja-jp/design/

https://www.figma.com/ja-jp/figjam/


上記のツールでもある程度は記載できるのですが、いくつか欠点がありました
- 拡大縮小が煩わしい
- 結局設計向けツールではないので組んでいくときに面倒（若干ツールの知識が必要）
- 共有する際に場合によっては課金が必要

どうでしょう？
同じように苦戦した経験はないでしょうか？

今回紹介するのは、DB設計を書くためのツールである「dbdocs」の紹介です

## dbdocs

https://dbdocs.io/docs

ER図ももちろんのこと

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/8bda84e4-18eb-75c4-5f5e-8381b3538d97.png" >

このようにデータ構造も表示できます

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/24abddc9-cccb-cb7d-4a25-25abf3fd13a6.png" >


さらに、これらはデザインツールではなくコードベースで管理ができます！

## 構築手順

作業もとても簡単です

まずは、dbdocsをインストールします

```bash
npm install -g dbdocs
```

次に、ログインをしましょう

```bash
dbdocs login
```

完了したら、任意の箇所に `.dbml`という拡張子でファイルを作成しましょう。
注意点として、VSCodeでは初期状態だと`.dbml`という拡張子を識別できないためVSCodeで作業する場合はプラグインを入れておくことを推奨します

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/685943ed-34ae-5ed5-8eae-4bc21bde27ae.png" >

では、早速サンプルコードです

```dbml:sample.dbml
Project ProjectName { # ProjectNameは任意のプロジェクト名です。デプロイ時のURLに影響します
  database_type: 'MySQL' # DBの選択
  Note: ''' # NoteはREADMEのような扱いです。マークダウンの記載ができます
    ## ProjectName
    ### 参考情報
    - [テーブル設計情報](https://demo.com)
  '''
}

Table users {
    Note: 'ユーザー情報管理'
    id integer [primary key]
    first_name varchar(50) [not null, note: '苗字（漢字）']
    last_name varchar(50) [not null, note: '氏名（漢字）']
    created_at datetime [default: `CURRENT_TIMESTAMP`, note: '作成日時']
    updated_at datetime [default: `CURRENT_TIMESTAMP`, note: '更新日時']
    deleted_at datetime [note: '削除日時']
}
Table invoices {
    Note: '請求情報管理'
    id integer [primary key, not null, note: '請求No']
    code varchar(50) [not null, unique, note: '識別コード']
    user_id integer [not null, note: '社員No', ref: > users.id] # リレーション設定
    invoice_date date [not null, note: '請求日']
    invoice_amount decimal(10, 2) [not null, note: '請求金額']
}
```

## デプロイ
デプロイして共有するのもすごい簡単です！
```bash
dbdocs build sample.dbml
```

ターミナル上にリンクが表示されるのでアクセスしたら結果を確認することができます。
更新したい場合は、ファイルを更新した上で再度コマンドを実行してください。

## その他データベースに設定できる項目

さらに、コードベースということもありenumの設定やindexの設定も可能となっています

### enum
```dbml
// enum belonged to default "public" schema
enum job_status {
    created [note: 'Waiting to be processed']
    running
    done
    failure
}

// enum belonged to a schema
enum v2.job_status {
    ...
}

Table jobs {
    id integer
    status job_status
    status_v2 v2.job_status
}
```

### index
```dbml
Table posts {
    id integer [primary key]
    user_id integer [ref: > users.id] // many-to-one
}

// or this
Table users {
    id integer [ref: < posts.user_id, ref: < reviews.user_id] // one to many
}

// The space after '<' is optional
```

その他の記載についてはDBMLのドキュメントを参照してください

https://dbml.dbdiagram.io/docs

## セキュアな状態にする

ここまで簡単だと、セキュリティ面が心配になると思います。
dbdocsは、参照するためのパスワードを設定することができます！
設定も以下のように簡単に設定することができます

```bash
dbdocs password

? Project name: demo
? Enter password:  [hidden]
? Re-enter password:  [hidden]
✔ Password is set for 'demo'.
```

以上です！