転職したらスマレジだった件

マジレス大歓迎です。

はじめてのWebアプリ開発を振り返る - ③DB設計のER図の作成

こんにちは!

スマレジ・テックファームのWebエンジニアやまてと申します。



夫婦も同じくらい風邪引いてないかも。最近しんどかった記憶は副反応くらい…

日々のパフォーマンスの維持のために、健康第一でいきます。


はじめに

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


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

qiita.com


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

ryamate.hatenablog.com

ryamate.hatenablog.com


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


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


記事を書く目的

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

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


INDEX


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

今回作成したER図

こちらの図のお互いのエンティティ(テーブル)の位置は、コードの修正をすれば適当な配置にエンティティが移動してくれるので、非常に修正しやすいと感じました。

例えば、機能追加により、テーブルが追加される場合、 draw.io で書いていると、テーブルの配置を手動でずらさないといけませんが、 PlantUML の場合は、コードを追加するだけなので、かなり楽です。


自分で draw.io で作成したER図よりも リレーションシップ(線)の重なりが少なくて見やすいと感じ、出来としても申し分ありません。


3. 検索して気になったER図の作成方法

今回の記事を書くにあたって、他に手段はないかと検索していたところ、気になったツールなどをメモしておきます。

phpMyAdmin」の機能

言語はPHP、RDBSは MySQL という組み合わせのみですが、「phpMyAdmin」の機能の一つとしてER図の作成ができます。

phpMyAdmin(ピーエイチピーマイアドミン)は、MySQLサーバウェブブラウザで管理するためのデータベース接続クライアントツールで、PHP)で実装されている。

ja.wikipedia.org


アプリ開発時、 phpMyAdmin を利用していたのですが、実際に作成したテーブルをER図で表示する機能があります。

今回調べていて、初めて知ったばかりですが…。


実際に作成したテーブルを元に生成されるので、設計段階では使用できないかもしれません。


ちなみにこちらは リレーションシップ(線)がわかりにくいのが難点かなと思います。


また、はじめに表示した時には各テーブルが重なっていた状態から、バラけさせて下記の状態にしています。別の画面に移動して、再度開くと各テーブルが重なっている状態に戻ってしまっていました。(使い方がわかっていないだけかもしれません)



マークダウン構文「Mermaid」

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。

dev.classmethod.jp

mermaid-js.github.io


こちらも検索していて気になって間もないのでまだ試してないですが、タイトルにある通り「グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました」とのことです。

私はパソコン上では Notion を基盤に生活しているような感じなので、こちらはぜひ今後試してみたいです。

www.notion.so


まとめ

今後、PlantUML を利用しようと思いますが、 Notion で マークダウン構文 Mermaid を試し書きしてみようと思います。

今後も色々と柔軟に試していく思考でいきます。


※ 2022/07/29追記:Mermaid を試し書きしたことも書き足した記事をQiitaに投稿しました。

qiita.com



今回の記事は以上です!

今後も引き続き「はじめてのWebアプリ開発を振り返る 」関連の記事を書いていこうと思っています。

データベース設計については、正規化などの観点からチェックして、基礎を振り返る機会としていきたいと思います。

ありがとうございました。