職場で使用する時間割作成アプリにおけるER図制作の記録

1.スケッチの作成

まずはコピー用紙に時間割アプリのデザインを簡単にスケッチしました。
スケッチを行うことによって、のちに行う要件定義が容易になったと感じます。

2-1.モックアップの作成

スケッチをベースにFigmaで制作しました。
必要なページを一通り制作し、同時にどのような操作がユーザーにとって良いか判断していきました。
のちの更新を行なっていく前提で簡単に制作する予定でしたが、デザインのイメージが浮かばなかったため初めからそこそこ具体的なものを制作してしまいました。
結果的には良かったと思っています。

2-2.マインドマップ作成

モックアップと同時進行でマインドマップを作成しました。
boardmixというツールを使用し、階層に分けて必要な機能を洗い出します。

2-3.ベンチマークアプリのリサーチ

自分が作りたいアプリのイメージに近いアプリケーションをリサーチしました。
目標は2つ見つけることでしたが思いの他イメージに近いものはありませんでした。
そもそも登録しないと使えないアプリばかりで…
資料請求を行った結果、wagacoというアプリがかろうじて参考になりそうでした。

4.現状の課題と解決機能の洗い出し

現在スクールで使用している時間割アプリはスプレッドシートで管理しています。
その管理状態で起こっている課題を洗い出しました。
洗い出しを行った理由としては、アプリで実装したい機能が多く制作がそれなりに難しかったためです。
洗い出しを行うことで、アプリに必要な機能を明確にすることができました。

5.実装すべき機能の優先順位決め

一度にすべての機能を実装するのは大変困難なため、機能の優先順位を決めました。
ここで改めて要件定義を行いました。
詳細についていは以下に添付した画像を参照していただければと思いますが、行った手順を記します。
①実装すべき機能を記述
②必須要件(1校舎における最初に目指したい機能)を決める
③優先要件(1校舎において実用的に使うための最低機能)を決める
④任意要件(複数校舎での使用・現時間割で行う作業を全てカバーするのに必要な機能)を決める
⑤非機能要件を決める

FigJamを使用

6.データ要素の特定

要件定義をベースにデータ要素の特定を行いました。
データ要素については別の記事を参照してください。
「講師」「生徒」「時間割」の3つのエンティティに分類しそれぞれに必要と思われるアトリビュートを記述しました。
その後以下の画像をChat-GPT4oに送信し、不足する要素とver1.0、ver1.2でそれぞれ実装していきたい機能を伝え、不足があれば追加し、ER図のカーディナリティとリレーションシップを生成させました。

データ要素の特定の画像

GPTにプロンプトした時の内容

GPTの回答①

GPTの回答②

GPTの回答③

7.GPTの回答をもとに情報を追加・修正し精度を上げていく

何度か生成を繰り返すことで、不足していた点に気づくことができたり、不要な点を鮮明にできました。
また、この過程を経て自分の中でER図のイメージが明確になっていきました。

8.Mermaid形式でER図を生成させる

GPTに生成させ必要な情報がすべて揃った段階で次のように命令しました。

GPTの回答として、Mermaid形式で生成してくれたので、それに日本語表記を追加させました。
この段階でGPTの使用は一時終了です。

9.VScordのプラグインでMermaid形式のERを図に変換

まずVScordで以下の2つのプラグインをインストールしました。
・Markdown Preview Mermaid Support(コードをもとにプレビューを表示する)
・Mermaid Markdown Syntax Highlighting(コードを着色し可読性をあげる)

そして「.md」という拡張子のファイルを作成しました。
VScord画面右上のプレビューマークをクリックしプレビューを表示しておきます。
ここからはコーディングです。
まずは以下の記述し、その中にGPTが生成したMermaid形式のERをコピペします。

```mermaid
erDiagram
ここにコードを書いていきます。

結果は以下の画像の通りです。

これでER図の完成です。