はじめに
今回から設計作業に入っていきます。
まず初めに画面設計や画面遷移図の作成をしていきます。
ツールはdraw.ioを使っていきます。
draw.io公式サイト
https://www.drawio.com/
Visual Studio Codeと連携
前回の記事でVSCodeとGitLabの連携をできるようにしました。
せっかくなので、draw.ioをVSCodeで設計できるようにしたいと思います。
手順
VSCodeに”Draw.io Integration”の拡張機能をインストールします。
新規ファイルを作成し、拡張子を”.drawio”にするとdraw.ioを
VSCode上で操作することができます。
成果物
初期画面は下記の感じにしました。至ってシンプルです。
細かいアニメーションなどは実装側で直接作成していきたいと思います。
画面遷移図は下記になります。
テーブル設計はこちら
本システムの内容については、後述の仕様書でまとめて記載したいと思います。
GitLabと連携
資料をまとめて管理したいので、GitLabへ作成した設計書を上げます。
前回と同じく、修正したファイルをステージングに上げて”コミット”ボタンを押下します。
”変更の同期”ボタンを押下します
GitLabを更新してみると、無事設計書が格納されてました。
使ってみた感想
draw.ioは今回始めて使ってみたのですが、大変使いやすいですね。
UIがSpreadsheetに似ているので、結構直感的な操作ができるなと思いました。
何よりGitLabなどでコードベースとしての管理を行えるのがいいですね。
今回は個人での開発なので、恩恵は薄いかもですが
他の方も設計書を修正する際は、差分の確認をすることができるので
運用管理がとても楽になります。
次回はDBの設計を行っていきます。