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

```

## 5.1 コントローラークラスの作成
コントローラークラスの作成手順は以下のとおりです。

- コントローラーの作成(MenuController.java)
- コントローラーの実装

### 1. コントローラーの作成(MenuController.java)
  - 新規作成より、**クラス**を選択

  - 新規Javaクラスで
    - 名前: MenuController
    - パッケージ：com.example.cafe.controller

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

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

### 2. コントローラーの実装

- 下記のソースコードを参考に、作成
  - クラス定義の上に`@Controller`アノテーションを記述
  - URL`/menu`への`GET`リクエストに対応している`showSearchForm()`メソッドを定義
  - このメソッドは、`menu_search.html`というテンプレートを返却する

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

```java~MenuController
package com.example.cafe.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MenuController {
    
    @GetMapping("/menu")
    public String showSearchForm() {
        return "menu_search";
    }
}

```

## 5.2 テンプレートファイルの作成
テンプレートファイルの作成手順は以下のとおりです。

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

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

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

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

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

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

- 下記のhtmlファイルを参考に、作成
  - `html`要素の`xmlns:th="http://www.thymeleaf.org`を記述することで、Thymeleafを使った名前空間`th`を利用することが可能
    - このステップで、`xlmns:th`属性を活用している箇所はない、後のステップのため宣言のみ記述
  - 今回はページ表示のみの為、formの送り先は指定していない
#### 参考用のhtmlファイル

```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>
        <label for="name">メニュー名:</label>
        <input type="text" id="name" name="name" />
        <button type="submit">検索</button>
    </form>
</body>
</html>
```

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

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

**Bootダッシュボード(下図参照)**より localサーバー内の**__cafe[devtools]__**を選択し、左上の開始ボタンをクリックする。

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/8261bd7e-c863-4c05-b24c-96c15caafff6.png)



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

ブラウザ（ChromeやSafariなどのこと）のアドレスバーに *http://localhost:8080/menu* と入力し、以下の画像のような結果となることを確認する。

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/cd846849-aa08-4f18-abd3-e4318edf4098.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
```

次は、実際に検索処理を記述していきます、頑張りましょう！

 メニュー検索画面：コントローラとテンプレート（画面）の実装