runメソッド

@RestController

HTTPメソッドのマッピング（GET,POST,PUT,DELETE)

最低限の構成のアプリケーション作成

POJOの利用 

Jacksonを利用したJSONの返却

商品クラスの作成と利用

@Compornent

＠Autowired

検索ロジッククラスの作成

@Qualifier

検索ロジック本番用クラスの作成

@RequestParam

@PathVariable

パラメータの対応、商品情報の検索機能追加

個数パラメータへの対応1

個数パラメータへの対応2

POSTメソッドの対応

SpringBootの基本技術を使い、商品情報を返却するAPIを作成するレッスンです。
Springフレームワークを使った簡単なアプリケーション作成を通し、各学習要素への理解を深めていきます。

SpringBootコース

SpringBootによるアプリケーション作成

商品検索APIの作成

ここでは検索処理を実現するため、**メニュー検索画面の修正と、Controllerクラスの修正**を行います。
このステップで作成する範囲は以下のとおりです。


```mermaid
graph TB
    subgraph title[今回該当する範囲（特に★）]
        B["コントローラー"] --"画面を返却（レスポンス）\n・メニュー検索画面\n★検索結果一覧画面"--> A(["👤 クライアント"])
        A --"要求（リクエスト）\n・/menu\n★/menu/results"--> B
        B --問い合わせ--> C[(リポジトリ)]
        C --検索結果--> B
    end

```

- メニュー検索画面の修正
- コントローラーの修正
- 検索結果一覧画面の作成

を行っていきます。

また、Repositoryに関しては、あらかじめ用意されている`MenuRepository.java`を利用します。

## 6.1 メニュー検索画面の修正

ここでは、メニュー検索画面が**検索条件の送信**を行えるように修正を行います。

- 検索フォームの送信先情報を追記・修正
- 検索フォームから送信される情報の確認

### 1. 検索フォームの送信先情報を追記・修正

  - `menu_search.html`を開く

  - 下記のソースコードを参考に、修正
  - `action`属性と`method`属性を追加し、フォームの送信先を指定

#### 参考用のソースコード

```html~menu_search
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>カフェメニュー検索</title>
</head>
<body>
    <h1>カフェメニュー検索</h1>

    <h2>メニュー名検索</h2>
    
    <form action="/menu/results" method="get">
    
        <label for="name">メニュー名:</label>
        <input type="text" id="name" name="name" />
        <button type="submit">検索</button>
    </form>
</body>
</html>
```

### 2.検索フォームから送信される情報の確認

この検索フォームから、どのような情報が送信されるのかまとめておきます。

**フォーム部分の抜粋**
```html~menu_search
    <form action="/menu/results" method="get">
        <label for="name">メニュー名:</label>
        <input type="text" id="name" name="name" />
        <button type="submit">検索</button>
    </form>
```

- **送信される情報**:
  - データを送信する先のURL: `/menu/name`
  - HTTPメソッド: `GET`
  - キー `name` に対応する入力値（例: カフェラテ）


## 6.2 リポジトリクラスのダウンロード
リポジトリとは、データを保存したり検索したりするためのクラスです。
今回は、データベースを必要としない学習用のリポジトリを利用します。

1. ダウンロード
以下から、`MenuRepository.java`をダウンロードします。

- **[MenuRepository.zipのダウンロード(Box)](https://app.box.com/s/u2vddcy2lg7hdkgbiazyhz8udyupwr2k)**

ダウンロードしたファイルは必要に応じて、わかりやすい場所に移動しておいてください。

2. インポート

作成したプロジェクトに、ダウンロードした`MenuRepository.zip`をimportし、利用できる状態にします。

- メニュー「ファイル」 > インポート > アーカイブzipファイルを選択
- 以下の画像を参考に、インポート


![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/57681747-4f71-49ba-8cae-878304c43c68.png)

3. トラブルシューティング

うまくいかない時は、`com.example.cafe.repository`パッケージに`MenuRepository.java`を新規作成し、以下のソースコードをコピーアンドペーストしてください。

```java~MenuRepository
package com.example.cafe.repository;

import java.util.ArrayList;
import java.util.Collections;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import com.example.cafe.model.MenuItem;

public class MenuRepository {
    private List<MenuItem> menuItems;

    public MenuRepository() {
        // 初期データの追加
        menuItems = new ArrayList<>();
        menuItems.add(new MenuItem("ラテ", "ドリンク", "クリーミーなミルクとエスプレッソ", 150));
        menuItems.add(new MenuItem("カプチーノ", "ドリンク", "エスプレッソにスチームミルクとフォーム", 120));
        menuItems.add(new MenuItem("クロワッサン", "フード", "バターたっぷりのサクサクしたペストリー", 300));
        menuItems.add(new MenuItem("サンドイッチ", "フード", "ハムとチーズのサンドイッチ", 250));
    }

    public List<MenuItem> findAll() {
        return new ArrayList<>(menuItems);
    }

    public List<MenuItem> findByCategory(String category) {
        List<MenuItem> filteredItems = new ArrayList<>();
        for (MenuItem item : menuItems) {
            if (item.getCategory().equalsIgnoreCase(category)) {
                filteredItems.add(item);
            }
        }
        return filteredItems;
    }

    public List<MenuItem> findByName(String name) {
        List<MenuItem> filteredItems = new ArrayList<>();
        for (MenuItem item : menuItems) {
            if (item.getName().toLowerCase().contains(name.toLowerCase())) {
                filteredItems.add(item);
            }
        }
        return filteredItems;
    }

    public List<String> findAllCategories() {
        Set<String> categories = new HashSet<>();
        for (MenuItem item : menuItems) {
            categories.add(item.getCategory());
        }

        List<String> sortedCategories = new ArrayList<>(categories);
        Collections.sort(sortedCategories); 
        return sortedCategories;
    }
}

```

## 6.3 リポジトリの仕様確認

通常、データの検索処理では**リポジトリ**などの、データベースに接続して処理を行うクラスを利用します。

今回は、学習用として、**データベースに接続しない、学習用の仮リポジトリクラス**を用意しています。

今回利用する、そのリポジトリ**MenuRepository**の仕様を確認してみましょう。

---

### `MenuRepository` クラスの仕様

#### クラス概要
- パッケージ`com.example.cafe.repository`に所属する
- メニュー情報を保持し、カテゴリや名前で検索する機能を持つ

#### メソッド

|メソッド名|説明|引数|戻り値|
|-|-|-|-|
|`findAll()`|全てのメニュー項目を返す|なし|`List<MenuItem>` (メニュー項目のリスト)|
|`findByCategory()`|指定されたカテゴリに一致するメニュー項目を返す|`category`: String型のカテゴリ名 (例: "ドリンク")|`List<MenuItem>` (一致するメニュー項目のリスト)|
|`findByName()`|指定された名前を含むメニュー項目を返す (部分一致)|`name`: String型のメニュー名 (例: "ラテ")|`List<MenuItem>` (一致するメニュー項目のリスト)|
|`findAllCategories`|全てのカテゴリ名を返す|なし|`List<String>`(カテゴリ名のリスト)|

#### 保持しているデータ

|メニュー名|カテゴリ|説明|カロリー|
|-|-|-|-|
|ラテ|ドリンク|クリーミーなミルクとエスプレッソ|150|
|カプチーノ|ドリンク|エスプレッソにスチームミルクとフォーム|120|
|クロワッサン|フード|バターたっぷりのサクサクしたペストリー|300|
|サンドイッチ|フード|ハムとチーズのサンドイッチ|250|

#### 利用方法(コード例)
`MenuRepository`の利用例です。
```java~Sample
        //利用例

        // //インスタンスの生成
        MenuRepository menuRepository = new MenuRepository();

        // 「サンド」で検索する
        // MenuItem1件のリスト（サンドイッチ）が返却される
        List<MenuItem> results = menuRepository.findByName("サンド");
```
**なお`MenuRepository.java`の中身、ソースコードを確認する必要はありません。**
もし学習のために確認するのであれば、今回省略している、データベースのSQL処理なども代用していることを念頭に置くようにしてください。

## 6.4 コントローラーの作成・修正

ここでは、コントローラーが**検索処理**を行えるように修正・追記を行います。

以下の手順で、進めていきましょう。

- パラメータ取得処理の実装
- リポジトリの検索処理呼び出し実装

### 1. パラメータ取得処理の実装

  - `MenuController.java`を開く

  - 下記のソースコードを参考に、`MenuController`クラスを修正
    - コンパイルエラーが出る場合は、import文として、`import org.springframework.ui.Model;`を記述できているか確認する事

#### 参考用のソースコード

```java~MenuController
//下記メソッドを、クラスブロックに追記する
    @GetMapping("/menu/results")
    public String showResults(@RequestParam String name, Model model) {
        MenuRepository menuRepository = new MenuRepository();

        return "menu_results";
    }
```

### 2.リポジトリの検索処理呼び出し実装

- `MenuController`の`showResults()`メソッドの処理として、下記のソースコードを参考に、作成
  - **処理**:
    - `name` が指定されていれば `findByName(name)` で検索
    - 指定されていなければ `findAll()` で全件取得
    - **モデル登録**: 検索結果を `results` というキーでテンプレートに渡す
  - **戻り値**: `menu_results` テンプレートを表示

```java~MenuController

    @GetMapping("/menu/results")
    public String showResults(@RequestParam String name, Model model) {
        MenuRepository menuRepository = new MenuRepository();

        //追記 ここから----------------
        List<MenuItem> results;
        if (name != null) {
            results = menuRepository.findByName(name);
        } else {
            results = menuRepository.findAll();
        }
        model.addAttribute("results", results);
        //ここまで----------------

        return "menu_results";
    }


```
**解説**

## 5.4 検索結果一覧画面の作成

検索結果一覧画面の作成手順は以下のとおりです。

- テンプレートファイルの作成(menu_results.html)
- テンプレートファイルの実装

### 1. テンプレートファイルの作成(menu_results.html)
  - 新規作成より、`htmlファイル`を選択

  - 新規htmlファイルで
    - 名前: menu_results.html
    - ファイルパス：src/main/resources/templates/

    として**完了**をクリック

    `src/main/resources/templates`ディレクトリ内に作成された`menu_results.html`をダブルクリックして開く。

### 2. テンプレートファイルの実装

- 下記のhtmlファイルを参考に、作成

#### 参考用のhtmlファイル

```html~menu_results
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Search Results</title>
</head>
<body>
    <h1>検索結果</h1>
    <ul>
        <li th:each="item : ${results}">
            <span th:text="${item.name}">メニュー名</span>
        </li>
    </ul>
</body>
</html>
```
**解説**
- **`th:each="item : ${results}"`**:
  - コントローラーから渡された`results`リスト内の要素をループ処理して表示
  - リスト内の要素を`item`という変数に代入しながら処理する
- **`th:text="${item.name}"`**:
  - `item`が保持する`name`属性の値を、HTML上に埋め込むための記述
  - 例えば、`item.name` が "ラテ" なら、`<span>` タグの中身が "ラテ" に置き換えられる

## 6.5 アプリケーションの実行
作成したアプリケーションを実行し、ブラウザから確認します。

1. アプリケーションの実行

Bootダッシュボードより localサーバー内の`cafe[devtools]`を選択し、左上の開始ボタンをクリックする。

2. ブラウザからアクセスする

ブラウザのアドレスバーに*http://localhost:8080/menu* と入力する。

3. 検索処理を行う

下記のデータ一覧を参考に、自由に、メニュー名を入力する

|メニュー名|カテゴリ|説明|カロリー|
|-|-|-|-|
|ラテ|ドリンク|クリーミーなミルクとエスプレッソ|150|
|カプチーノ|ドリンク|エスプレッソにスチームミルクとフォーム|120|
|クロワッサン|フード|バターたっぷりのサクサクしたペストリー|300|
|サンドイッチ|フード|ハムとチーズのサンドイッチ|250|


`検索`ボタンを押下し、`http://localhost:8080/menu/results`へ画面が移り、検索結果が表示されることを確認する

例：**サン**で検索した結果

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/2323de66-8460-4491-a5b4-a58d542e799f.png)



これで、検索処理が完成しました！お疲れ様でした。


```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── cafe/
    │               ├── controller/
    │               │   └── MenuController.java (今回のレッスンで一部作成!)
    │               ├── model/
    │               │   └── MenuItem.java (完成済)
    │               ├── repository/
    │               │   └── MenuRepository.java (提供)
    └── resources/
        └── templates/
       　   ├── menu_search.html (今回のレッスンで一部作成!)
        　   ├── menu_results.html (今回のレッスンで一部作成!)
        　   └── menu_detail.html
```

次は、検索結果から、メニュー詳細画面へ遷移する機能を実装してみましょう！

検索結果一覧画面：検索ロジックとテンプレート（画面）の実装