はじめに

今回は、Web業界実務未経験での転職活動用にポートフォリオとして作成した『はじめてのWebアプリ開発を振り返る』記事です。

※ 作成したポートフォリオは、絵本を読み聞かせしたことの記録・管理を、家族と共有できるWebアプリケーションです

これまで関連記事については、下記の記事を書きました。

ryamate.hatenablog.com

今回は、「データベース設計のER図の作成」についてです。

#今日の積み上げ
11/21 4-7,13-18
☑️PFの課題定義、要件定義
☑️APIの利用方法の下調べ
☑️ER図の記法調査→https://t.co/DjP4yCoj0hで試し書き

ポートフォリオ題材は、息子が大好きな絵本についてのWebサービスにします！
それではおしりたんていを読み聞かせていっしょに寝ます。おやすみなさい😴 pic.twitter.com/LyfPl6Omp8
— やまて｜Webエンジニア2年目 (@r_yamate) 2020年11月21日

Twitterのキーワード検索で「@r_yamate ER図」で自分のツイートを検索したら、ER図デビューの日はこんな感じでした。

記事を書く目的

今回の記事を書く目的は、自身の学習の振り返りとして、ポートフォリオのWebアプリのデータベース設計について見直すべき点がなかったかの確認のため、まずはER図作図を通して振り返りたいと思っています。

また、Webエンジニア転職を考えている初学者の方にとっての参考になるよう、draw.io での作図と PlantUMLでの作図の紹介、比較をしたいと思います。

INDEX

はじめに
- 記事を書く目的
1. VSCode拡張機能「Draw.io Integration」
- 当時作成したER図
2. VSCodeの拡張機能「PlantUML」
3. 検索して気になったER図の作成方法
- 「phpMyAdmin」の機能
- マークダウン構文「Mermaid」
まとめ
おわりに

1. VSCode 拡張機能「Draw.io Integration」

ポートフォリオとしてのWebアプリ作成当時は、 draw.io という作図ツールを利用して作成しました。

www.draw.io

draw.io は、 VSCode の拡張機能としても利用できます。 Draw.io Integration の導入は、拡張機能をインストールするだけで使い始められます。

marketplace.visualstudio.com

ER図用のパーツ（エンティティ）を手動で配置して、そこにデータを入力、線（リレーションシップ）を追記していく、というそこそこ地道な作業をする必要があり、結構大変でした。

（Excel よりは百倍楽だったと思いますが…）

当時作成したER図

ER図の各テーブルについて、簡単な説明ですが以下のとおりです。

テーブル名	説明
families	ユーザーが所属する家族情報の管理
users	ユーザー情報の管理
children	お子さま情報の管理
picture_books	登録絵本情報の管理
read_records	読み聞かせ記録の管理
child_read_record(※)	「どの子に」「どの読み聞かせ記録を」したか
follows(※)	「どのユーザーが」「どの家族の本棚を」フォローしているか
likes(※)	「どのユーザーが」「どのレビューを」いいねしているか
tags	読み聞かせタグ情報の管理
read_record_tag(※)	「どの読み聞かせ記録に」「どのタグを」つけているか
invites	家族招待メール送信時のトークン
contacts	問い合わせ内容の管理

※ 中間テーブル

アプリの作成中、変更箇所を都度修正しながら、ER図がわかりやすく、収まり良く見えるように配置を考えたりしました。（几帳面な性格）

機能追加など実装を進めていく中でも、ER図を振り返りながら、DBからのレコード取得や、レコード追加・削除などのコードを考えることが多かったので、ER図の修正は面倒ではありましたが、正確なER図の作成の必要性を感じました。

ちなみに当時、設計のベースにさせていただいた教材はこちらです。

www.techpit.jp

2. VSCodeの拡張機能「PlantUML」

PlantUMLは、以下のようなダイアグラムを素早く作成するためのコンポーネントです。

plantuml.com

シーケンス図、ユースケース図、クラス図などのUMLを簡単な記法で作成できます。

UMLではない ER図もサポートしており、コードでテーブルの情報、関係性を書いておくと、その通り図を表示してくれます。

plantuml.com

そして、draw.ioと同じく、VSCodeの拡張機能としてもインストールできます。

marketplace.visualstudio.com

VSCode 拡張機能「PlantUML」のインストール

VScodeの拡張機能「PlantUML」を検索した後、「インストール」ボタンをクリックして、インストール成功した後、Macの場合、下記インストールする必要があります。

brew install --cask temurin
brew install graphviz

※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」

qiita.com

（参考：PlantUML導入後の編集中画面）

PlantUMLでのER図の表記法

@startuml yonde
' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity "families" as families {
  id
  --
  name
  nickname
  introduction
  created_at
  updated_at
}

entity "users" as users {
  id
  --
  family_id<<FK>>
  name
  nickname
  email
  email_verified_at
  password
  remember_token
  icon_path
  relation
  created_at
  updated_at
  deleted_at
}

entity "children" as children {
  id
  --
  family_id<<FK>>
  name
  gender_code
  created_at
  updated_at

}

entity "picture_books" as picture_books {
  id
  --
  family_id<<FK>>
  user_id<<FK>>
  google_books_id
  isbn_13
  title
  authors
  published_date
  thumbnail_url
  five_ster_rating
  read_status
  review
  created_at
  updated_at
}

entity "read_records" as read_records {
  id
  --
  picture_book_id<<FK>>
  family_id<<FK>>
  user_id<<FK>>
  memo
  read_date
  created_at
  updated_at
}

entity "child_read_record" as child_read_record {
  id
  --
  read_record_id<<FK>>
  child_id<<FK>>
  created_at
  updated_at
}

entity "tags" as tags {
  id
  --
  name
  created_at
  updated_at
}

entity "read_record_tag" as read_record_tag {
  id
  --
  read_record_id<<FK>>
  tag_id<<FK>>
  created_at
  updated_at
}

entity "follows" as follows {
  id
  --
  follower_user_id<<FK>>
  followee_family_id<<FK>>
  created_at
  updated_at
}

entity "likes" as likes {
  id
  --
  user_id<<FK>>
  picture_book_id<<FK>>
  created_at
  updated_at
}

entity "invites" as invites {
  id
  --
  family_id<<FK>>
  email
  token
  created_at
  updated_at
}

entity "contacts" as contacts {
  id
  --
  email
  nickname
  name
  title
  body
  created_at
  updated_at
}

families ||--|{ users
families ||--|{ children
families ||--o{ follows
families ||--o{ picture_books
families ||--o{ read_records
families ||--o{ invites
users ||--o{ follows
users ||--o{ likes
users ||--o{ picture_books
users ||--o{ read_records
children ||--o{ child_read_record
picture_books ||--o{ read_records
picture_books ||--o{ likes
read_records ||--o{ child_read_record
read_records ||--o{ read_record_tag
tags ||--o{ read_record_tag

@enduml