プロジェクト登録画面設計書レビュー結果

1. 設計書レビュー結果

十分な項目:

• プロジェクト情報入力項目の詳細定義（項目名、種別、必須有無等）
• 画面イベント（初期表示、部門リスト取得、顧客検索、確認）の基本フロー
• バリデーション処理の基本的な定義
• DBアクセス（検索条件、取得カラム）の詳細
• 画面間の遷移先情報

不足している項目:

• 画面のURL（エンドポイント）情報
• 各ドメインの具体的なバリデーションルールの詳細
• 顧客管理システムAPIのインターフェース仕様
• エラー発生時の画面表示方法と位置
• クライアント側の処理詳細（特に非同期通信部分）
• 画面レイアウト情報（省略されている）
• 前の画面からの遷移情報

改善点:

• 各入力項目のフォーマットや文字数制限を明確にすると実装がスムーズになる
• API通信エラー時の処理と表示メッセージを定義することで堅牢な実装が可能になる
• クライアント側の入力補助機能（カレンダーピッカーの詳細動作等）を明記すると実装者の理解が深まる
• 画面遷移の全体像（前画面からの遷移を含む）を記述するとユーザーの動線が把握しやすくなる

2. 不足項目の詳細

不足している項目: 画面のURL情報

• 現在の記述: 「WA10201/プロジェクト登録」とタイトルのみ記載
• 不足している内容:
  • 具体的なエンドポイント（URL）パス
  • HTTPメソッド（GETかPOSTか）
• 改善提案:

  画面URL: /projects/create
  HTTPメソッド: GET（表示）, POST（確認処理）
  

不足している項目: ドメインのバリデーションルール詳細

• 現在の記述: 「単項目バリデーション」として「指定ドメインに応じたバリデーション」と記載
• 不足している内容:
  • 各ドメイン（プロジェクト名、売上高など）の具体的な入力制限
  • 文字数制限、入力可能文字種
  • 数値項目の有効範囲
• 改善提案:

  【ドメイン別バリデーションルール】
  - プロジェクト名: 最大100文字、必須
  - 売上高(千円): 整数のみ、0～999,999,999の範囲、カンマ区切り表示
  - 顧客ID: 数値のみ、必須
  - プロジェクト開始日/終了日: yyyy/MM/dd形式、過去日も将来日も許容、必須
  - 備考: 最大1000文字、任意
  

不足している項目: 顧客管理システムAPIの仕様

• 現在の記述: 「顧客管理システム．顧客詳細取得APIを実行し顧客名を取得する」
• 不足している内容:
  • APIのエンドポイント
  • リクエストパラメータの形式
  • レスポンスの形式と内容
  • エラーケースの処理方法
• 改善提案:

  【顧客管理システムAPI仕様】
  - エンドポイント: /api/customers/{customerId}
  - HTTPメソッド: GET
  - リクエストパラメータ: パスパラメータとしてcustomerId（数値）
  - レスポンス形式: JSON
    成功時: { "customerId": 123, "customerName": "○○株式会社", ... }
    失敗時: { "errorCode": "E001", "errorMessage": "顧客が存在しません" }
  - エラー時の処理: エラーメッセージを画面上部に表示し、顧客選択をクリアする
  

不足している項目: エラー表示の詳細

• 現在の記述: バリデーションエラー発生時は「後続の処理は実施しない」
• 不足している内容:
  • エラーメッセージの表示位置
  • 複数エラー発生時の表示順序
  • フィールドエラーの表示方法
• 改善提案:

  【エラー表示仕様】
  - バリデーションエラーは対象フィールドの直下に赤字で表示
  - 複数エラー発生時は全てのエラーを表示
  - 画面上部に全体エラーメッセージも表示
  - エラーフィールドは赤枠で強調表示
  - フォーカスは最初のエラーフィールドに自動設定
  

不足している項目: クライアント処理の詳細

• 現在の記述: カレンダー表示や非同期通信について最小限の記載
• 不足している内容:
  • カレンダーピッカーの詳細動作
  • 非同期通信中の画面状態（ローディング表示など）
  • JavaScriptによる入力支援機能
• 改善提案:

  【クライアント処理の詳細】
  - カレンダーピッカー: フラットピッカーを使用、日本語表示、曜日色分け対応
  - 非同期通信中はボタン部分にスピナーを表示し操作を無効化
  - 部門選択プルダウン更新中は「ロード中...」と表示
  - 売上高入力時は自動的にカンマ区切りに整形
  - PM/PL入力欄にはユーザー名オートコンプリート機能を実装
  

プロジェクト登録機能実装計画

1. 概要

プロジェクト登録機能は、プロジェクト管理システムにおいて新規プロジェクトを登録するための機能です。ユーザーは事業部・部門の選択、プロジェクト名や種別、分類などの基本情報を入力し、顧客情報やプロジェクト期間を設定して登録を行います。入力内容は確認画面で確認してから登録される仕組みです。

2. クラス図

3. シーケンス図

初期表示イベント

部門リスト取得イベント（非同期）

顧客検索イベント

確認イベント

4. 実装計画

初期表示イベント

ステップ 1: Organization Mapperの実装

• 編集対象ファイル: web/src/main/java/com/example/web/project/mapper/OrganizationMapper.java（新規作成）
• 目的: 初期表示イベントのシーケンス図の(3)〜(4)を実装。組織データを取得するマッパーを実装する
• 内容:
  • OrganizationMapperインターフェイスを作成する
  • 上位組織IDがNULLの組織（事業部）を取得するselectDivisions()メソッドを定義する
  • selectDepartmentsByDivision(String divisionId)メソッドを定義する（部門リスト取得用）
  • selectOrganizationById(String organizationId)メソッドを定義する（組織名取得用）
• 活用するクラス・メソッド:
  • MyBatisのアノテーションを使用（@Selectなど）
• ポイント:
  • SQL文は適切なWHERE条件を設定し、必要なカラムのみを取得する
• 関連ファイル: com.example.web.project.model.Organization

ステップ 2: Organization Mapper XMLの実装

• 編集対象ファイル: web/src/main/resources/com/example/web/project/mapper/OrganizationMapper.xml（新規作成）
• 目的: MapperインターフェースのSQLを実装する
• 内容:
  • selectDivisions()、selectDepartmentsByDivision()、selectOrganizationById()のSQLを実装する
• ポイント:
  • XMLの命名空間が正しく設定されていることを確認する
• 関連ファイル: OrganizationMapper.java

ステップ 3: ProjectServiceの実装

• 編集対象ファイル: web/src/main/java/com/example/web/project/service/ProjectService.java（新規作成）
• 目的: 初期表示イベントのシーケンス図の(2)〜(5)を実装。OrganizationMapperを利用して事業部一覧を取得するサービスを実装する
• 内容:
  • ProjectServiceクラスを作成する
  • getDivisions()メソッドを実装し、OrganizationMapperを使って事業部一覧を取得する
  • getDepartments(String divisionId)メソッドを実装する（部門リスト取得用）
  • getOrganizationName(String organizationId)メソッドを実装する（組織名取得用）
  • getClientName(String clientId)メソッドを実装する（外部APIでの顧客名取得用）
• 活用するクラス・メソッド:
  • com.example.web.project.mapper.OrganizationMapper#selectDivisions()
  • com.example.web.project.mapper.OrganizationMapper#selectDepartmentsByDivision(String)
  • com.example.web.project.mapper.OrganizationMapper#selectOrganizationById(String)
• ポイント:
  • 必要に応じてキャッシュを検討する
• 関連ファイル: OrganizationMapper.java

ステップ 4: ProjectCreateFormの実装

• 編集対象ファイル: web/src/main/java/com/example/web/project/form/ProjectCreateForm.java（新規作成）
• 目的: プロジェクト登録画面の入力項目を保持するフォームクラスを実装する
• 内容:
  • 画面項目定義に従って、フォームクラスのフィールドを実装する
  • 必要なバリデーション用アノテーションを追加する
  • 日付関係のカスタムバリデーションメソッドを実装する
• 活用するクラス・メソッド:
  • javax.validationアノテーション（@NotEmpty、@Sizeなど）
• ポイント:
  • 日付の大小関係チェックなど、複合的なバリデーションは独自メソッドで実装する
• 関連ファイル: なし

ステップ 5: ProjectCreateViewHelperの実装

• 編集対象ファイル: web/src/main/java/com/example/web/project/helper/ProjectCreateViewHelper.java（新規作成）
• 目的: 初期表示イベントのシーケンス図の(6)〜(7)を実装。画面表示に必要な補助メソッドを提供する
• 内容:
  • ProjectCreateViewHelperクラスを作成する
  • getDivisionOptions()メソッドを実装し、事業部のSelectOptionリストを作成する
  • getProjectTypeOptions()、getProjectClassOptions()メソッドを実装する
  • getOrganizationName()、getClientName()メソッドを実装する
• 活用するクラス・メソッド:
  • com.example.web.project.service.ProjectService#getDivisions()
  • com.example.web.common.helper.CodeHelper#getSelectOptions(String, String)
  • com.example.web.common.helper.CodeHelper#getRadioOptions(String, String)
• ポイント:
  • SelectOptionクラスは既存のものを使用する
• 関連ファイル: CodeHelper.java、ProjectService.java

ステップ 6: ProjectCreateControllerの実装

• 編集対象ファイル: web/src/main/java/com/example/web/project/controller/ProjectCreateController.java（新規作成）
• 目的: 初期表示イベントのシーケンス図の(1)〜(13)を実装。画面の初期表示処理を実装する
• 内容:
  • ProjectCreateControllerクラスを作成する
  • @ControllerアノテーションとURLマッピングを設定する
  • index()メソッドを実装し、初期表示処理を行う
  • モデルにViewHelperから取得した各種オプションリストを設定する
• 活用するクラス・メソッド:
  • com.example.web.project.helper.ProjectCreateViewHelper#getDivisionOptions()
  • com.example.web.project.helper.ProjectCreateViewHelper#getProjectTypeOptions()
  • com.example.web.project.helper.ProjectCreateViewHelper#getProjectClassOptions()
• ポイント:
  • 画面項目の初期値を適切に設定する
• 関連ファイル: ProjectCreateViewHelper.java

部門リスト取得イベント（非同期）

ステップ 7: コントローラに部門リスト取得メソッドを追加

• 編集対象ファイル: web/src/main/java/com/example/web/project/controller/ProjectCreateController.java
• 編集対象のメソッド: getDepartments()（新規作成）
• 目的: 部門リスト取得イベントのシーケンス図の(1)〜(6)を実装。選択された事業部に基づいて部門リストを非同期取得する
• 内容:
  • @GetMapping("/project/create/departments/{divisionId}")でURLマッピングを設定する
  • @PathVariableで事業部IDを受け取る
  • ProjectServiceを使って部門リストを取得する
  • 部門リストをJSON形式で返却する
• 活用するクラス・メソッド:
  • com.example.web.project.service.ProjectService#getDepartments(String)
  • org.springframework.http.ResponseEntity
• ポイント:
  • クライアントサイドJavaScriptから呼び出される非同期APIとして実装する
• 関連ファイル: ProjectService.java

顧客検索イベント

ステップ 8: コントローラに顧客検索メソッドを追加

• 編集対象ファイル: web/src/main/java/com/example/web/project/controller/ProjectCreateController.java
• 編集対象のメソッド: openClientSearch()（新規作成）
• 目的: 顧客検索イベントのシーケンス図の(1)〜(2)を実装。顧客検索画面へ遷移する
• 内容:
  • @GetMapping("/project/create/client-search")でURLマッピングを設定する
  • 顧客検索画面へのリダイレクトURLを返す
• ポイント:
  • ポップアップとして開くためのHTML/JavaScriptも実装する必要がある
• 関連ファイル: なし

確認イベント

ステップ 9: コントローラに確認処理メソッドを追加

• 編集対象ファイル: web/src/main/java/com/example/web/project/controller/ProjectCreateController.java
• 編集対象のメソッド: confirm()（新規作成）
• 目的: 確認イベントのシーケンス図の(1)〜(15)を実装。入力内容のバリデーションと確認画面への遷移を行う
• 内容:
  • @PostMapping("/project/create/confirm")でURLマッピングを設定する
  • フォームのバリデーションを実行する
  • エラーがある場合は入力画面に戻る
  • 問題なければ、組織名と顧客名を取得してモデルに設定する
  • 確認画面を表示する
• 活用するクラス・メソッド:
  • com.example.web.project.service.ProjectService#getOrganizationName(String)
  • com.example.web.project.service.ProjectService#getClientName(String)
• ポイント:
  • バリデーションエラー時は入力値を保持して入力画面に戻す
  • 確認画面のテンプレートパスを正しく指定する
• 関連ファイル: ProjectService.java、ProjectCreateForm.java

ステップ 10: 画面テンプレートの実装

• 編集対象ファイル: web/src/main/resources/templates/project/create.html（新規作成）
• 目的: プロジェクト登録画面のHTMLテンプレートを実装する
• 内容:
  • Thymeleafテンプレートを使用して画面レイアウトを実装する
  • 各入力フィールドをProjectCreateFormにバインドする
  • 事業部プルダウン選択時に部門リストを非同期で取得するJavaScriptを実装する
  • 顧客検索ボタンのポップアップ処理を実装する
• 活用するクラス・メソッド:
  • Thymeleafの標準タグ
  • jQueryなどのJavaScriptライブラリ
• ポイント:
  • バリデーションエラーメッセージの表示処理を適切に実装する
  • ラジオボタンやプルダウンの選択肢を動的に表示する
• 関連ファイル: なし

ステップ 11: 確認画面テンプレートの実装

• 編集対象ファイル: web/src/main/resources/templates/project/confirm.html（新規作成）
• 目的: プロジェクト登録確認画面のHTMLテンプレートを実装する
• 内容:
  • Thymeleafテンプレートを使用して確認画面レイアウトを実装する
  • 各項目の入力値を表示する
  • 戻るボタンと登録ボタンを配置する
• 活用するクラス・メソッド:
  • Thymeleafの標準タグ
• ポイント:
  • 入力値をhiddenフィールドに保持して次の処理に引き継ぐ
• 関連ファイル: なし

ステップ 12: JavaScript実装

• 編集対象ファイル: web/src/main/resources/static/js/project/create.js（新規作成）
• 目的: 画面の動的な挙動を実装する
• 内容:
  • 事業部選択時の部門リスト取得処理を実装する
  • 顧客検索画面のポップアップ処理を実装する
  • バリデーションエラー表示のための処理を実装する
• 活用するクラス・メソッド:
  • jQuery AJAXメソッド
• ポイント:
  • エラーハンドリングを適切に実装する
• 関連ファイル: なし