📘 Vol.2 画面駆動設計に基づく設計書の具体例：画面フローからUI設計・処理定義まで

前回（Vol.1）では、画面駆動設計の進め方やそのメリットについてご紹介しました。  
今回は、実際にその画面駆動設計を適用して作成した「画面フロー」「各画面のUI構成」「処理とデータ設計図」について、具体例を挙げながら解説していきます。

---

## 🔗 設計資料へのリンク

以下のGitHubに、今回紹介する資料をすべて公開しています。ぜひ合わせてご覧ください。

- [画面遷移図（全体フロー）](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E5%9B%B3.pdf)
- [UI設計・処理・データ定義](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2.pdf)

---

## 1. 🎯 画面フローの作成

まず最初に取り組むのが「画面遷移図（画面フロー）」の作成です。

- **目的：** ユーザーの操作に応じた画面の遷移パターンを明確にする  
- **ポイント：** 各画面がどのように連携しているかを俯瞰して理解できる

例：ユーザー管理画面からの遷移

- ユーザー作成画面
- ユーザー編集画面
- 管理メニュー など

---

## 2. 🧩 各画面のUI構成と入力制約

画面ごとの設計資料では、次の情報を網羅的に定義しています：

### ✅ UI要素定義

| 項目名         | 分類             | フォーマット |
|----------------|------------------|--------------|
| ユーザー名     | テキストボックス | 全角かな     |
| メールアドレス | テキストボックス | 半角英数     |
| ステータス     | ドロップダウン   | 有効/無効    |

### ✅ 初期表示状態の定義

- ユーザー管理画面では、画面初期表示時に全ユーザーの情報を一覧表示

---

## 3. ⚙️ 各UI操作に対する処理定義

ボタンやリンクなど、各UIコンポーネントに対して紐づく処理を明記します。

### 例：ユーザー管理画面の操作

| ボタン名     | 操作内容                                                              |
|--------------|-----------------------------------------------------------------------|
| ユーザー作成 | 「ユーザー作成画面」へ遷移                                           |
| 編集         | 該当ユーザー情報を持って「ユーザー編集画面」へ遷移                   |
| 削除         | 対象ユーザーを削除後、ユーザー一覧を最新状態で再表示                |
| 戻る         | 管理メニューへ遷移                                                   |

---

## 4. 🗃 データ構造とDAOの逆算設計

表示に必要な情報から、DBのデータ構造や取得方法を逆算して設計を行います。

### 例：ユーザー一覧表示に必要な項目

- ユーザーID
- ユーザー名
- ステータス
- 登録日時

これに応じて、DAOのSQLや取得メソッドの仕様を設計します。

---

## ✅ 画面駆動設計のメリットまとめ

- **ユーザー視点に立った設計ができる**
- **画面単位で仕様を管理できるため、漏れやブレが起きにくい**
- **エンジニア以外のメンバーとも共通認識を持ちやすい**

---

## 🌟 このアプローチの特徴

| 特徴                       | 説明                                                         |
|----------------------------|--------------------------------------------------------------|
| **ユーザー視点でスタート** | 画面＝業務フローに近いため、関係者とも共有しやすい         |
| **処理の漏れが少ない**     | 入力 → 処理 → 出力の流れが自然に設計に反映される           |
| **非エンジニアとも共有しやすい** | モック画面があれば、仕様のすり合わせがしやすい     |
| **プロトタイプ開発にも最適** | まず画面だけ作って「こんな感じです」と合意が取れる         |

---

## 📝 実際にやってみた感想

この「画面から考える」やり方は、過去に文法中心でつまずいた自分にとって  
**非常にしっくり来るスタイル** でした。

- 何を作るのかが常に明確  
- モチベーションが保ちやすい  
- ロジックの設計にも自然と流れができる  

「画面 → 処理 → データ」と段階的に組み立てるので、初心者でも迷いにくいのが魅力です。

---

## ▶️ 次回予告：Vol.3へ続く



[次回は、【Vol.3】詳細設計編：ER図で見るデータ構造と実装の土台 に入っていきます。](https://qiita.com/juehara-crypto/items/6e6431954dc99ea59054)



---

## 🧭 Vol.1〜7 関連リンク

| 回 | タイトル | 主な内容 |
|----|----------|-----------|
| Vol.1 | [プログラミングとの再会 – 「画面ありき」で変わった学び方](https://qiita.com/juehara-crypto/items/2fcc53d765dcc25a4fa3) | プログラミング再入門と、**画面駆動の学習法**というユニークなアプローチの紹介。最初に「画面」から考えることでモチベーションを継続。 |
| Vol.3 | [詳細設計編：ER図で見るデータ構造と実装の土台](https://qiita.com/juehara-crypto/items/6e6431954dc99ea59054) | 実装前提で設計された **ER図（Entity Relationship 図）** をもとに、データ構造と整合性を設計。 |
| Vol.4 | [Struts2とMavenの基礎と設定ファイルの役割](https://qiita.com/juehara-crypto/items/e37fa1879ae996bee73e) | Struts2の構成とMavenでの管理、`web.xml` や `pom.xml` の役割を丁寧に解説。 |
| Vol.5 | [環境構築編：掲示板アプリケーションの実行準備](https://qiita.com/juehara-crypto/items/7010ae45d35174d3a3a6) | TomcatとEclipseでの動作環境構築。 |
| Vol.6 | [BaseActionクラスの詳細解説【Struts2の要】](https://qiita.com/juehara-crypto/items/a5f244a5f58597f33d06) | すべてのアクションに共通する基底クラス **BaseAction** を定義し、ログ出力や共通処理を集約。 |
| Vol.6.1 | [BaseAction の活用例【共通基底クラスでセッション管理を簡素化】](https://qiita.com/juehara-crypto/items/f4efded5b26e39e49928) | BaseAction を継承する具体的なアクション例を紹介し、セッションやログ処理の統合例を実践。 |
| Vol.7 | [Struts2 における MVC モデルの全体像](https://qiita.com/juehara-crypto/items/761c0b13ed1a5f896bba) | Model-View-Controller の各要素が Struts2 でどう分担されるかを体系的に解説。 |
| Vol.7.1 | [Struts2 における Model（モデル）について](https://qiita.com/juehara-crypto/items/14f7f154caf29447ae93) | JavaBeansベースのModelクラス（User, Thread, Post など）設計とその役割を明確化。 |
| Vol.7.2 | [Struts2 における Controller（コントローラ）の責務](https://qiita.com/juehara-crypto/items/06b4f9296a296db8f4ba) | Actionクラスを軸に、入力処理・分岐処理・画面遷移の中核を担うControllerの実装指針を提示。 |
| Vol.7.3 | [Struts2 における struts.xml の書き方と役割](https://qiita.com/juehara-crypto/items/54dc2e0a4d56845a1a61) | URLマッピング、結果遷移、アクション定義の方法を丁寧に記述。初心者の詰まりやすいポイントを回避。 |
| Vol.7.4 | [struts.xmlの高度な設定と実践活用（Struts2）](https://qiita.com/juehara-crypto/items/bf03adbd840c8f4e2044) | namespaceの活用や画面単位での分離設計、開発時の保守性向上テクニックを紹介。 |

---