こんにちは!
スマレジ・テックファームのWebエンジニアやまてと申します。
はじめに
今回は、Web業界実務未経験での転職活動用にポートフォリオとして作成した『はじめてのWebアプリ開発を振り返る』記事です。
※ 作成したポートフォリオは、絵本を読み聞かせしたことの記録・管理を、家族と共有できるWebアプリケーションです
これまで関連記事については、下記の記事を書きました。
今回は、「データベース設計のER図の作成」についてです。
#今日の積み上げ
— やまて|Webエンジニア2年目 (@r_yamate) 2020年11月21日
11/21 4-7,13-18
☑️PFの課題定義、要件定義
☑️APIの利用方法の下調べ
☑️ER図の記法調査→https://t.co/DjP4yCoj0hで試し書き
ポートフォリオ題材は、息子が大好きな絵本についてのWebサービスにします!
それではおしりたんていを読み聞かせていっしょに寝ます。おやすみなさい😴 pic.twitter.com/LyfPl6Omp8
Twitterのキーワード検索で「@r_yamate ER図」で自分のツイートを検索したら、ER図デビューの日はこんな感じでした。
記事を書く目的
今回の記事を書く目的は、自身の学習の振り返りとして、ポートフォリオのWebアプリのデータベース設計について見直すべき点がなかったかの確認のため、まずはER図作図を通して振り返りたいと思っています。
また、Webエンジニア転職を考えている初学者の方にとっての参考になるよう、draw.io での作図と PlantUMLでの作図の紹介、比較をしたいと思います。
INDEX
1. VSCode拡張機能「Draw.io Integration」
ポートフォリオとしてのWebアプリ作成当時は、 draw.io という作図ツールを利用して作成しました。
draw.io は、 VSCode の拡張機能としても利用できます。 Draw.io Integration の導入は、拡張機能をインストールするだけで使い始められます。
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図の作成の必要性を感じました。
ちなみに当時、設計のベースにさせていただいた教材はこちらです。
2. VSCodeの拡張機能「PlantUML」
PlantUMLは、以下のようなダイアグラムを素早く作成するためのコンポーネントです。
シーケンス図、ユースケース図、クラス図などのUMLを簡単な記法で作成できます。
UMLではない ER図 もサポートしており、コードでテーブルの情報、関係性を書いておくと、その通り図を表示してくれます。
そして、draw.ioと同じく、VSCodeの拡張機能としてもインストールできます。
VSCode拡張機能「PlantUML」のインストール
VScodeの拡張機能「PlantUML」を検索した後、「インストール」ボタンをクリックして、インストール成功した後、Macの場合、下記インストールする必要があります。
brew install --cask temurin brew install graphviz
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」
(参考: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)で実装されている。
アプリ開発時、 phpMyAdmin を利用していたのですが、実際に作成したテーブルをER図で表示する機能があります。
今回調べていて、初めて知ったばかりですが…。
実際に作成したテーブルを元に生成されるので、設計段階では使用できないかもしれません。
ちなみにこちらは リレーションシップ(線)がわかりにくいのが難点かなと思います。
また、はじめに表示した時には各テーブルが重なっていた状態から、バラけさせて下記の状態にしています。別の画面に移動して、再度開くと各テーブルが重なっている状態に戻ってしまっていました。(使い方がわかっていないだけかもしれません)
マークダウン構文「Mermaid」
Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
こちらも検索していて気になって間もないのでまだ試してないですが、タイトルにある通り「グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました」とのことです。
私はパソコン上では Notion を基盤に生活しているような感じなので、こちらはぜひ今後試してみたいです。
https://www.notion.so/ja-jp/productwww.notion.so
まとめ
今後、PlantUML を利用しようと思いますが、 Notion で マークダウン構文 Mermaid を試し書きしてみようと思います。
今後も色々と柔軟に試していく思考でいきます。
※ 2022/07/29追記:Mermaid を試し書きしたことも書き足した記事をQiitaに投稿しました。
おわりに
今回の記事は以上です!
今後も引き続き「はじめてのWebアプリ開発を振り返る 」関連の記事を書いていこうと思っています。
データベース設計については、正規化などの観点からチェックして、基礎を振り返る機会としていきたいと思います。
ありがとうございました。
5歳息子、保育園を直近2年で一度も病気で休んでないけど、それはとてもありがたいことなのかもしれない。
— やまて|Webエンジニア2年目 (@r_yamate) 2022年7月22日
夫婦も同じくらい風邪引いてないかも。最近しんどかった記憶は副反応くらい…
日々のパフォーマンスの維持のために、健康第一でいきます。