【SwiftUI】AsyncImageを使ってURL画像を表示する

# はじめに
iOS15から[AsyncImage](https://developer.apple.com/documentation/swiftui/asyncimage)が使用できます。
これを使用することでURL画像が表示できるようになります。
便利ですねー

ただiOS15からなので使えるようになるのはまだ先になりそうです。

# 実装方法
### 標準
```swift
import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url))
    }
}
```
![スクリーンショット 2022-11-18 13.42.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/66523f32-9b66-7732-337d-094acad28030.png)

### サイズ変更(scale)
```swift
import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url), scale: 5)
    }
}
```
![スクリーンショット 2022-11-18 13.44.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/334bae8d-5244-c7af-a723-c8fec237e217.png)

### サイズ変更(frame)
```swift
import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url)) { response in
            response.image?
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
        }
    }
}
```
![スクリーンショット 2022-11-18 13.46.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/049c35df-14e4-4d04-230a-70be93c95a1c.png)

### プレイスホルダー
```swift
import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url)) { image in
            image
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
        } placeholder: {
            ProgressView()
        }
    }
}
```
![12_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0150ecd3-41f7-8f75-fe0f-872f5276f4e2.gif)

### プレイスホルダー & 切り替えアニメーション
```swift
import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url), transaction: .init(animation: .easeInOut(duration: 1))) { response in
            switch response {
            case .success(let image):
                image
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100, height: 100)
            default:
                ProgressView()
            }
        }
    }
}
```
:::note warn
**注意**
Previewではアニメーションされません
:::
![画面収録_2022-11-18_14_19_17_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/707f2bda-c372-5eba-588b-fa0a44ab1be9.gif)

# おわり
SwiftUIの完成はiOS20くらいかな？？