設計ドキュメントを作成する際に、大きく分けて「画面・UIの仕様と機能」「DB設計」の二種類を作成するのですが、設計フェーズに下記の課題感がありました。
- 実際に動いていない状態では、仕様のイメージがしにくい
- 実装に入ってから仕様の見落としに気付くことがある
- クライアントとの仕様調整を設計ドキュメントだけでしにくい場面がある（説明が難しい・クライアントがイメージしにくい等）
- （個人的に）設計ドキュメント等で、ExcelやDraw.ioで作図するのが苦手（画面設計ドキュメントのイメージは指定がないならHTMLで作った方が早いと感じている）
解決方法として、画面仕様とDB仕様を同時確認できるモックアップを作成するという手段を考えました。
構成と実際の画面
サンプルを作成してみました。下記のような構成になります
/
├── index.html # エントリーポイント
│
├── css/
│ └── styles.css # カスタムスタイル
│
└── js/
├── db.js # DB層（sql.jsの読み込みもここ、初期データの投入）
├── screens.js # テンプレート層（HTML定義）
├── ui.js # 表示層（イベント処理）
├── init.js # 初期化層
│
├── screens/ # 画面管理モジュール
│ └── registry.js # 画面定義の一元管理
│
└── core/ # （コア機能）
├── router.js # ナビゲーション・ルーティング
└── screen-loader.js # 画面読み込み・ライフサイクル
ポイントとしては、DB層でsql.jsのCDNと初期データの定義をすることです。ブラウザ内でSQLiteが実行できます（リンク先に記載されていますが、メモリ上の仮想DBファイルを使用するため変更は保持されずリロードでリセット）。今回はDB操作用の画面も用意します。
実際の画面です。商品管理システムみたいなものを想定しています。
商品を登録すると一覧に表示されるだけでなく
テーブルにも反映されます
クエリも画面から実行できます。
基本的なCRUD以外にも、バリデーションや検索機能も本番に近い想定で作れます。
メリット
- HTML&JSのファイル群であり、file://で完結して動作するので配布しやすい、動きのイメージがしやすいためレビューがしやすい（実行ファイルを配布というのも手ですが、インストールの手間や署名の問題等でクライアントに配布しにくい）
- インメモリSQL（SQLite）が動いているため、DB関連の処理の再現ができたり、モックの画面でクエリ実行やテーブル設計を確認可能
- ドキュメントを作る際の参照情報（コンテキスト）を作りこめたり、テストシナリオを考える際の補助になる
課題
- 要件が複雑な場合単純に工数がかかる
- 仕様変更等で変更が多いかつ、ドキュメントの修正も並行して行うことになった場合多重管理になり効率化にならない
おわりに
今後ブラッシュアップしたり、実現できる機能を調査して、機会があれば実務でも試してみようと考えています。
