SwiftUI 2.0と UIKit と ストーリーボード (パート 3)

# パート 3: ストーリーボード
記事は3つの異なる部分に分かれている：

- [パート 1: SwiftUI 2.0 と ストーリーボード](https://qiita.com/loic-meister-guild/items/b62f2bc90cc6a7f8f92a)
- [パート 2: SwiftUI 2.0 と UIKit](https://qiita.com/loic-meister-guild/items/a45574e6059209b8c87a)
- パート 3: ストーリーボード と SwiftUI 2.0 ([English](https://qiita.com/loic-meister-guild/items/dc24c7319baba675564c))

## UIKitビューとストーリーボードからSwiftUIビューの使用
このパートは前の2つのパートに反して、レガシーアプリケーションの一部をSwiftUIビューへリファクタリングしたり、または新しいSwiftUIビューを追加したりするのに役立つ。

### XCodeプロジェクト
新しい__SwiftUI__アプリプロジェクトを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/2eb13d16-1b15-5b6c-0a80-963291f9665d.png)
プロジェクトに名前を付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/40aec66d-90bb-91dd-a4e6-4e0b8ea54cf7.png)
新しい__SwiftUI__ビューを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/2f326aa3-6637-e3c4-3575-4d9d5696b6e1.png)
ビューに名前を付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/7d2a672c-0aed-e4f9-97da-345da8142e03.png)
次に、UI要素を挿入して、最初のビューコントローラーにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/b21a0617-4ebc-0c72-a833-c0f659e69458.png)
ラベルとボタンを含む`UIViewController`を備えたストーリーボードのプロジェクトができた...
### `Storyboard UIViewController`
ストーリーボードの`UIViewController`には、独自のサブクラス`ViewController`があります

サブクラスの名前を `UIKitViewController`に変更し、ボタン` TouchUpInside`イベントにリンクされた `IBAction`を追加する：

```Swift:UIKitViewController.swift
import UIKit
import SwiftUI

class UIKitViewController: UIViewController {
    @IBAction func toSwiftUI(_ sender: Any) {
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}
```

`SwiftUI`ビューを表示するには、[`UIHostingController`](https://developer.apple.com/documentation/swiftui/uihostingcontroller)を使用する：

```Swift:Swift
UIHostingController(rootView: _)
```

`UIKitViewController`の`IBAction`で、`SwiftUIView`を使用して[`UIHostingController`](https://developer.apple.com/documentation/swiftui/uihostingcontroller)を初期化し、通常の `UIViewController`と同じように使用して、__SwiftUI__ビューを表示する：

```Swift:UIKitViewController.swift
import UIKit
import SwiftUI

class UIKitViewController: UIViewController {
    @IBAction func toSwiftUI(_ sender: Any) {
        let view = UIHostingController(rootView: SwiftUIView())
        self.present(view, animated: true, completion: nil)
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}
```
それでは、 `SwiftUI`ビューを作成しましょう。
### `SwiftUI View`
`SwiftUI View`は、次の4つの要素で構成されている：
- 「SwiftUI」の文字列を表示する`Text`要素
- `labelText`変数の内容を表示する`Text`要素
- `inputText`変数にバインドされた`TextField`要素
- `labelText`の内容を`inputText`の内容に変更するためのボタン

```Swift:SwiftUIView.swift
import SwiftUI

struct SwiftUIView: View {
    @State var labelText = "Initial Text"
    @State var inputText = ""
    
    var body: some View {
        VStack {
            Text("SwiftUI")
            Spacer()
            Text(labelText)
            Spacer()
            TextField("Input", text: $inputText)
            Spacer()
            Button {
                labelText = inputText
                inputText = ""
            } label: {
                Text("Change Text")
            }
        }
    }
}
```
それでは、 `IBAction`をテストしましょう！
### アプリ
アプリを起動し、`Storyboard`ビューで「To SwiftUI!」ボタンをクリックして、「SwiftUI」ビューが表示される：
![storyboard-swftui-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/927af71e-d361-645d-a808-764ec355c542.png)
`SwiftUI`ビューで、テキストフィールドに新しい文章を入力する：
![storyboard-swftui-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/01adad25-63d2-d2a9-fc1b-1c2fd612208c.png)
次に、「Change Text」ボタンをクリックすると、2番目の`Text`要素の「InitialText」が新しい文章に置き換えられる：
![storyboard-swftui-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/e890dc19-b117-9a62-36d3-aaf325e0c02e.png)
やった！