2024-06-17- サンプルプログラム

■シーケンス図

sequenceDiagram
    participant ブラウザ
    participant MemoController
    participant MemoService
    participant MemoRepository
    participant Memo

    ブラウザ->>+MemoController: HTTPリクエスト (例: GET /memos)
    MemoController->>+MemoService: getAllMemos()
    MemoService->>+MemoRepository: findAll()
    MemoRepository-->>Memo: Memoリストを作成
    MemoRepository-->>-MemoService: List<Memo>
    MemoService-->>-MemoController: List<Memo>
    MemoController-->>-ブラウザ: List<Memo>を含むレスポンス

    ブラウザ->>+MemoController: HTTPリクエスト (例: POST /memos)
    MemoController->>+MemoService: saveMemo(memo)
    MemoService->>Memo: 新しいMemoオブジェクトを作成
    MemoService->>+MemoRepository: save(memo)
    MemoRepository-->>Memo: Memoオブジェクトを保存
    MemoRepository-->>-MemoService: 保存されたMemo
    MemoService-->>-MemoController: 保存されたMemo
    MemoController-->>-ブラウザ: リダイレクトレスポンス

    ブラウザ->>+MemoController: HTTPリクエスト (例: GET /memos/edit/{id})
    MemoController->>+MemoService: getMemoById(id)
    MemoService->>+MemoRepository: findById(id)
    MemoRepository-->>Memo: Memoオブジェクトを取得
    MemoRepository-->>-MemoService: Memo
    MemoService-->>-MemoController: Memo
    MemoController-->>-ブラウザ: Memoを含むレスポンス

    ブラウザ->>+MemoController: HTTPリクエスト (例: POST /memos/{id})
    MemoController->>+MemoService: updateMemo(id, memo)
    MemoService->>+MemoRepository: findById(id)
    MemoRepository-->>Memo: Memoオブジェクトを取得
    MemoRepository-->>-MemoService: Memo
    MemoService->>Memo: 更新処理 (setDescription, setPolicy, setResult)
    MemoService->>+MemoRepository: save(memo)
    MemoRepository-->>Memo: Memoオブジェクトを更新
    MemoRepository-->>-MemoService: 更新されたMemo
    MemoService-->>-MemoController: 更新されたMemo
    MemoController-->>-ブラウザ: リダイレクトレスポンス

    ブラウザ->>+MemoController: HTTPリクエスト (例: POST /memos/delete/{id})
    MemoController->>+MemoService: deleteMemo(id)
    MemoService->>+MemoRepository: deleteById(id)
    MemoRepository-->>Memo: Memoオブジェクトを削除
    MemoRepository-->>-MemoService: 完了
    MemoService-->>-MemoController: 完了
    MemoController-->>-ブラウザ: リダイレクトレスポンス

■クラス図

classDiagram
    class ProjectApplication {
        +main(String[] args)
    }

    class MemoController {
        -MemoService memoService
        +listMemos(Model model)
        +newMemo(Model model)
        +saveMemo(Memo memo)
        +editMemo(Long id, Model model)
        +updateMemo(Long id, Memo memo)
        +deleteMemo(Long id)
    }

    class MemoService {
        -MemoRepository memoRepository
        -Random random
        +getAllMemos(): List<Memo>
        +getMemoById(Long id): Optional<Memo>
        +saveMemo(Memo memo): Memo
        +updateMemo(Long id, Memo memo): Memo
        +deleteMemo(Long id): void
        -getResult(): String
        -roll(): int
    }

    class MemoRepository {
    }

    class Memo {
        -Long id
        -String description
        -String policy
        -String result
        +getId(): Long
        +setId(Long id)
        +getDescription(): String
        +setDescription(String description)
        +getPolicy(): String
        +setPolicy(String policy)
        +getResult(): String
        +setResult(String result)
    }

    ProjectApplication --> MemoController
    MemoController --> MemoService
    MemoService --> MemoRepository
    MemoRepository --> Memo

■遷移図

graph TB
  subgraph パソコン
    browser[ブラウザ]
  end
  
  subgraph SpringBoot["Spring Boot"]
      browser --> |1. HTTPリクエスト| Tomcat[Tomcat]
      Tomcat --> |2. リクエスト転送| DispatcherServlet[DispatcherServlet]
      DispatcherServlet --> |11. ビュー選択| ViewResolver[ビューリゾルバ]
      ViewResolver --> |13. テンプレート処理| Thymeleaf[Thymeleaf（テンプレートエンジン）]
      Thymeleaf --> |14. HTML生成| ViewResolver
      ViewResolver --> |15. HTML返却| DispatcherServlet
  end
  
  subgraph JavaProgram["Javaプログラム"]
    DispatcherServlet --> |3. リクエスト処理| Controller[コントローラ]
    Controller --> |4. ビジネスロジック実行| Service[サービス]
    Service --> |5. データベース操作| Repository[リポジトリ/モデル]
    Repository --> |8. 結果返却| Service
    Service --> |9. 結果返却| Controller
    Controller --> |10. レスポンス返却| DispatcherServlet
  end

  subgraph データベース
    Repository --> |6. クエリ実行| テーブル
    テーブル --> |7. クエリ結果| Repository
  end

  subgraph テンプレート["html"]
    Thymeleaf <--> |13. テンプレート読み込み| 自分作成のhtml
  end

  DispatcherServlet --> |16. HTTPレスポンス| Tomcat
  Tomcat --> |17. HTTPレスポンス| browser

  style テーブル fill:#FFDDC1,stroke:#FF0000,stroke-width:2px
  style Repository fill:#FFDDC1,stroke:#FF0000,stroke-width:2px
  style Service fill:#FFDDC1,stroke:#FF0000,stroke-width:2px
  style Controller fill:#FFDDC1,stroke:#FF0000,stroke-width:2px
  style 自分作成のhtml fill:#FFDDC1,stroke:#FF0000,stroke-width:2px

■実装順序

静的リソースの提供
- 静的なHTMLページの作成:
  - src/main/resources/staticディレクトリに静的なHTMLページを作成します。
  - 簡単な静的HTMLページをブラウザで表示し、正しく提供されていることを確認します。
Thymeleafテンプレートの設定
- Thymeleafテンプレートの作成:
  - src/main/resources/templatesディレクトリにThymeleafテンプレートを作成します。
  - 簡単な動的コンテンツを含むテンプレートを作成し、ブラウザで表示されることを確認します。
- コントローラの作成:
  - 簡単なコントローラを作成し、Thymeleafテンプレートを返すように設定します。
基本的なJavaScriptの追加
- 静的なJavaScriptファイルの作成:
  - src/main/resources/static/jsディレクトリにJavaScriptファイルを作成します。
  - 簡単なDOM操作を含むJavaScriptを追加し、HTMLテンプレートにインクルードして動作を確認します。
データベースの設定
- データベースのセットアップ:
  - 必要なテーブルを作成するSQLスクリプトを準備し、初期データを挿入します。
- リポジトリの作成:
  - JPAリポジトリインターフェースを作成し、データベースとのやり取りを実装します。
  - サンプルデータをデータベースに挿入し、正しく取得できるかを確認します。
サービス層の実装
- サービスクラスの作成:
  - ビジネスロジックをサービスクラスに実装します。
  - サービス層のメソッドを単体テストで検証します。
- コントローラの修正:
  - コントローラからサービス層を呼び出すように変更し、ビジネスロジックの分離を実現します。
CRUD機能の実装
- Create機能:
  - コントローラに新しいデータを作成するエンドポイントを追加します。
  - フロントエンドで新しいデータを作成するフォームを作成し、データベースに挿入できることを確認します。
- Read機能:
  - コントローラにデータを読み取るエンドポイントを追加します。
  - フロントエンドでデータを表示するためのページを作成し、データベースからデータを取得して表示できることを確認します。
- Update機能:
  - コントローラにデータを更新するエンドポイントを追加します。
  - フロントエンドでデータを編集するフォームを作成し、データベースのデータを更新できることを確認します。
- Delete機能:
  - コントローラにデータを削除するエンドポイントを追加します。
  - フロントエンドでデータを削除するボタンを作成し、データベースのデータを削除できることを確認します。
  http プログラム（CRUD) データベース（SQL）
  
  post Create insert
  
  get Read select
  
  put Update update
  
  delete Delete delete
エラーハンドリングとバリデーション
- エラーハンドリングの実装:
  - コントローラやサービス層でエラーハンドリングを実装します。
  - フロントエンドでエラーが発生した場合のメッセージ表示を追加します。
- 入力バリデーションの追加:
  - フロントエンドとバックエンドの両方で入力バリデーションを実装します。
  - バリデーションエラーが発生した場合に適切なメッセージを表示します。

http	プログラム（CRUD)	データベース（SQL）
post	Create	insert
get	Read	select
put	Update	update
delete	Delete	delete