SwiftUIでhotpepperAPIを使って飲食店を表示する

## この記事を書こうと思ったきっかけ
・SwiftUIでラーメン屋検索アプリを作成してみたいと思った。
・almofire等を使ってAPI通信の学習がしたかった。
## 今回作成するアプリ
ボタン押下時にhotpepperAPを使いラーメン屋を検索する
条件として東京のラーメン屋を一件取ってきて画像と店名と住所を表示する

## 前提条件
初学者のかた向けの内容になっているいるのでご了承ください
者
下記をcocoapodsでimportしてください
import Alamofire
import SwiftyJSON

下記URLから登録してAPIkeyを取得してください
https://webservice.recruit.co.jp/doc/hotpepper/reference.html
hotpepperAPIkey 

## 1.ファイルの作成
今回は簡単なアプリの作成にしたいため
使用ファイルはデフォルトで作成されている「ContentView.swift」のみを
つかっていきます。
## 2.変数の定義
下記4つの変数を使用します。
@Statはつけるとプロパティの値が更新できるようになるため付けています。
```swift
    @State private var name = ""
    @State private var address = ""
    @State private var imageUrl = ""
    @State private var isShowingShop = false

```
## 3.View
特にコメントすることがない簡単なviewにしております。
4で記載しておりますfetchRamenShop()で取得したものを
viewに反映するようにしてます。
```swift
var body: some View {
        VStack {
            Button(action: {
                isShowingShop = true
                fetchRamenShop()
            }, label: {
                Text("Fetch Ramen Shop")
            })
            .padding()

            if isShowingShop {
                Text("Ramen Shop")
                    .font(.title)
                    .padding()

                if let url = URL(string: imageUrl), let imageData = try? Data(contentsOf: url) {
                    Image(uiImage: UIImage(data: imageData)!)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 200, height: 200)
                        .padding()
                }

                Text(name)
                    .font(.headline)

                Text(address)
                    .font(.subheadline)
                    .foregroundColor(.gray)
            }
        }
    }
```
## 4.APIをリクエストするメソッド作成
ここがメインです。
下記コードにコメントで解説入れてます。
```swift

func fetchRamenShop() {
        //ご自身のAPIをyour API keyに入れてください
        let apiKey = "your API key" 
        let baseUrl = "https://webservice.recruit.co.jp/hotpepper/gourmet/v1/"

        //下記二つはURLクエリパラメータとして使用する場合、URLエンコードを行うことで正しい形でデータを送信できるようにしてます
        let apiKeyEncoded = apiKey.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? ""
        let keywordEncoded = "ラーメン".addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? ""

        //ホットペッパーグルメAPIにリクエストを送信するためのURL
        //apiKeyEncoded: エンコードされたAPIキー
        //large_area: 東京のエリアコード (Z011)
        //format: レスポンスの形式(今回はjson)
        //count: 取得する結果の件数(今回は1件のみ)
        //keywordEncoded:検索する内容(今回はラーメン)
        let urlString = "\(baseUrl)?key=\(apiKeyEncoded)&large_area=Z011&format=json&count=1&keyword=\(keywordEncoded)"

        if let url = URL(string: urlString) {
        //Alamofireを使用して作成したURLにリクエストを送信します
            AF.request(url)
                .responseJSON { response in
                    switch response.result {
                    case .success(let value):
        //処理が成功したら受け取ったデータをSwiftyJSONのJSONオブジェクトに変換しています
                        let json = JSON(value)
                        print(json)
        //各データに格納していく
                        let shopData = json["results"]["shop"].arrayValue.first
                        if let shopData = shopData {
                            name = shopData["name"].stringValue
                            address = shopData["address"].stringValue
                            imageUrl = shopData["photo"]["pc"]["l"].stringValue
                        }
                    case .failure(let error):
                        print("API Request Error: \(error)")
                    }
                }
        } else {
            print("Invalid URL: \(urlString)")
        }
    }
}
```

## まとめ
アプリの一つの機能として簡単に実装できるので参考になれば幸いです。
また誤りや修正案等あれば教えて頂けますと幸いです。