CodeAGIを使って開発を行っていきます。（連載３回目）


# 【連載第3回】設計書の準備とCodeAGIへの取り込み方法
CodeAGIを活用してプログラムを自動生成するためには、設計書の準備と適切な取り込みが重要です。本記事では、設計書の種類や準備方法、取り込み手順について詳しく解説します。


## 1.CodeAGIが解析する設計書
CodeAGIはExcel形式の設計書を解析することができます。
テーブル定義、共通仕様、機能仕様、共通部品、の4つの分類で管理され
それぞれの分類に対応する設計書を入力していきます。

### 設計書のファイル形式
- サポート形式: 2007 以降の xlsx 形式を対象としています。
  ※ Excel2003 の xls 形式は読み込めません

### 設計書の分類
下記分類ごとの取り込み画面があります。
1. テーブル定義 ･･･ テーブル定義書
2. 機能仕様 ･･･ 画面項目定義書、アクション定義書、データ編集定義書など
3. 共通仕様 ･･･ メッセージ一覧、定数定義、プログラム一覧など
4. 共通部品 ･･･ ( 機能仕様と同様 )

（画面）
![codeagi_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/6e067391-2cd1-3214-69f6-6391e6f669af.png)

それぞれの分類に応じた設計書の詳細については、
「[解析する設計書(仕様書)のシート名について](https://codeagi.ai/contents/download/sheet-of-designdoc-to-analyze.pdf)」を参照ください。



## 2.設計書準備

### 用意する設計書について
サービスサイトにサンプルとして設計書が用意されていますので、
その中から、今回は「仕入管理システム」の設計書を使用してみます。
設計書は[サンプルダウンロード](https://codeagi.ai/download/samplesform/)ページからダウンロードできます。
 - 03.テーブル定義書（仕入管理）.xlsx
 - 03.画面設計書（仕入情報照会画面）.xlsx


### 設計内容について

**テーブル定義書**
「仕入管理システム」では下記5テーブルが定義されています。
```mermaid

erDiagram 
    "仕入先マスタ" ||--|{ "仕入情報" : "仕入先コード"
    "担当者マスタ" ||--|{ "仕入情報" : "担当者コード"
    "商品マスタ" ||--|{ "仕入情報" : "商品コード"
    "商品種別マスタ" ||--|{ "商品マスタ" : "商品種別"

```
CodeAGI は設計書の判定にシート名を用いています。
テーブル定義書は “テーブル定義(商品マスタ)” 等のシート名にし、“( )”の中にはテーブル名を記載しておいてください。

(テーブル定義書)
![テーブル定義書.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/617758c0-0a1c-e29f-0325-f34a53b8afda.png)


**画面設計書**
今回使用する設計書には以下の5種類のシートがあります。
 - 表紙
 - 改訂履歴
 - 画面イメージ
 - 画面項目定義
 - アクション定義

設計書取り込みの際、設計書の種類、画面またはバッチ処理の数、プログラム名称、使用テーブル、などを自動的に判定しています。この判定結果はプログラムコードの自動生成に必要となります。
判定結果は変更が可能です。必要に応じて画面から変更してください。

より正確な解析をする為に、画面名、使用テーブルなどは、設計書内に明記してください。
例えば画面名は設計書のヘッダー部分に記入しておきます。

(画面設計書)
![画面設計書.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/e13456a4-39c8-5f93-468c-d2d860c8c46f.png)


**画面イメージ**
画面イメージの取り込みについては、現時点ではExcelファイルからの取り込み機能はなく png、jpg形式の画像ファイルから取り込む機能になります。
画面レイアウトやデザインを指定する場合は、別途画像ファイルが必要になります。
画像ファイルによる画面イメージの取り込み方法については、今後の投稿で解説していきたいと思います。



## 3.設計書取り込み方法
設計書取り込み操作の手順を説明していきます。
まず最初にプロジェクト情報の指定が必要になります。以降の設計書の指定は手順が前後しても問題ありません。

### 設計書取り込み手順
1. プロジェクト情報の指定
2. テーブル設計書の指定
3. 機能設計書の指定
4. 共通仕様書の指定（※ 今回は未使用の為説明を省きます）
5. 共通部品の指定（※ 今回は未使用の為説明を省きます）


### 1.プロジェクト情報の指定
画面左上の「プロジェクトを選択」-「新規作成」ボタン から プロジェクト情報設定画面を表示します。
各項目の(？)マークをマウスオーバーすると項目説明が表示されますのでご活用ください。

![プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/9cb28fa7-4589-708d-a22b-fce370510db0.png)

今回選んだ設計書はWebアプリケーションの為、画面（フロントエンド）、画面（バックエンド）を入力します。バッチの入力は不要になります。以下は今回の入力例です。任意に入力してください。

**プロジェクト情報**
- プロジェクト名、説明："仕入管理システム"、"設計書の準備とCodeAGIへの取り込み方法の説明"
- コード出力先フォルダ：自動生成する成果物の格納先を指定
- テストケース・データ出力先フォルダ：自動生成する成果物の格納先を指定
- 生成プログラムに画面ID・バッチIDを使う：今回は使用しないのでOFFのまま

**画面（フロントエンド）**
- 基本設定："Windows 11"、"Webアプリ"、ブラウザ未指定
- プログラミング言語："Java"、バージョン、コーディングスタイル・規約未指定
- フレームワーク："Spring Boot"、バージョン未指定
- パッケージ："Thymeleaf"、"Bootstrap"

**画面（バックエンド）／ＡＰＩ**
- 基本設定："Windows 11"、"MySQL 8.0"
- プログラミング言語："Java"、バージョン、コーディングスタイル・規約未指定
- フレームワーク："Spring Boot"、バージョン未指定
- パッケージ："Spring Data JPA"、"Lombok"

**バッチ／その他**
- 基本設定：全て未指定
- プログラミング言語：全て未指定
- フレームワーク：全て未指定
- パッケージ：全て未指定

**「フォルダ構成の確認・編集」ボタン**

自動生成するプログラムのフォルダ構成を変更できます。
デフォルト設定のまま進めます。


### 2.テーブル設計書の指定
画面左メニューの「テーブル定義書指定」ボタン から テーブル定義書指定画面を表示します。
03.テーブル定義書（仕入管理）.xlsx　を追加してください。

![テーブル定義取り込み.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/3f74ce47-01bf-2727-e579-51f2a1d5cd09.png)


#### テーブル定義書の取り込み結果確認

テーブル定義書の取り込み結果を確認することができます。
画面左メニューの「指定データ確認」ボタン から 指定データ確認画面を表示します。
「機能名・テーブル定義書・共通仕様書」は、選択肢から「テーブル定義書」を選択します。
「設計書・シート名一覧」に取り込んだファイル名がリストアップされます。
確認したいファイルを選択すると、取り込んだテーブルが展開されます。

![指定データ確認2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/aeabb0b3-2221-99bd-6c71-071f434274ac.png)

さらにテーブル名を選択すると画面下部の「設計情報」欄でテーブル定義を確認することができます。

![指定データ確認3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/ab5ab6bc-c1e6-c76a-eb15-ad703e4f854c.png)

**設計ヘッダー編集モード**

項目タイトルの解析結果に誤りがあった場合、手動で修正できる機能があります。
項目タイトルとデータの識別に誤りがあるとプログラム生成の精度を下げる可能性がある為、
自動判定の結果に誤りがある場合は修正してください。

![指定データ確認4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/29c9f5d0-42a4-d16c-232a-2aa2ec7e664d.png)


### 3.機能設計書の指定
画面左メニューの「機能設計書指定」ボタン から 機能設計書指定画面を表示します。
03.画面設計書（仕入情報照会画面）.xlsx　を追加してください。

![機能設計書指定1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/ab554e90-743f-b71a-8025-f38c81b5ee7c.png)

以下は今回の入力例です。「保存」ボタンで保存してください。

- 機能名、概要："仕入情報照会画面"、"商品の仕入金額を一覧表示する"
- 機能種別："画面"を選択
- 設計書指定：03.画面設計書（仕入情報照会画面）.xlsx

![機能設計書指定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/2fbdbf1d-41fd-e5eb-51c0-a4526d3122de.png)

解析結果を確認します。

![機能設計書指定4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/bb803878-a524-6055-01dc-d70617a41fcd.png)

**設計書の種類**

今回の設計書では、"画面項目定義書"、"アクション定義書"が抽出されていてOKです。
設計書の抽出結果が正しくない場合、「設計種別」で正しい選択肢を選択してください。
CodeAGIが判定する設計書の種類については「[解析する設計書(仕様書)のシート名について](https://codeagi.ai/contents/download/sheet-of-designdoc-to-analyze.pdf)」を確認してください。

**プログラム数と名称**

抽出された設計書に対してプログラム名が抽出されている必要があります。
設計書の上部ヘッダーの画面名称の"仕入情報照会画面"が適用されていてOKです。
プログラム数はプログラム名称から判断して1つとなっていてOKです。
プログラム名が未設定、または誤りがある場合、正しい内容に修正してください。

**使用テーブル**

設計書に記載されているテーブルに ◯ 表記があるためOKです。
もし表記に誤りがある場合、設計書の内容を確認してください。

**使用共通部品一覧と画面イメージ一覧**

今回は使用しないため説明を省きます。
今後の投稿で解説していきたいと思います。

#### 機能設計書の取り込み結果確認

機能設計書の取り込み結果を確認することができます。
画面左メニューの「指定データ確認」ボタン から 指定データ確認画面を表示します。
「機能名・テーブル定義書・共通仕様書」は、選択肢から「仕入情報照会画面」(機能名)を選択します。
「設計書・シート名一覧」に取り込んだファイル名がリストアップされます。
確認したいファイルを選択すると、取り込んだシート名が展開されます。

![指定データ確認5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/9a89985f-3196-c59f-7d05-80bd2bf15c73.png)

さらにシート名を選択すると画面下部の「設計情報」欄で設計内容を確認することができます。

![指定データ確認7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/82106683-883e-fb73-c484-f33b09ae29bd.png)

**設計ヘッダー編集モード**

項目タイトルの解析結果に誤りがあった場合、手動で修正できる機能があります。
項目タイトルとデータの識別に誤りがあるとプログラム生成の精度を下げる可能性がある為、
自動判定の結果に誤りがある場合は修正してください。

![指定データ確認8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957461/e26b9c1a-763d-df55-d64e-7c4027ec571f.png)




以上でプログラム自動生成を行う準備が整いました。



## 次回予告

次回は「CodeAGIを活用したプログラムの自動生成」です。
設計書から生成されるコードの仕組みや、注意すべきポイントを解説していきます。

## 連載一覧　CodeAGIを使って開発を行っていきます。
1. ##### [【連載第1回】CodeAGIで設計書からプログラムまでを自動化する流れを解説します](https://qiita.com/sono1/items/76588de183aaa2a09e3b)
2. ##### [【連載第2回】「CodeAGI」の概要](https://qiita.com/to_sprdx/items/e5a065fe01ec588880af)
3. ##### 【連載第3回】設計書の準備とCodeAGIへの取り込み方法
4. ##### [【連載第4回】CodeAGIを活用したプログラムの自動生成](https://qiita.com/k_nomo/items/468198abdd4abdf05230)
5. ##### [【連載第5回】生成されたプログラムの修正・改良方法](https://qiita.com/sono1/items/cc977ae9b71d645ecd59)
6. ##### [【連載第6回】最終動作確認と実行](https://qiita.com/sprdx_c_en/items/b03ed16b237cb35708b5)