UIKitでの書き方をSwiftUIに直した物をまとめてみた。

# はじめに
こんにちは@kaneko77です。
次からの案件が`SwiftUI`を採用をしているみたいで、これまで`UIKit`オンリーで書いていたので色々`SwiftUI`の書き方をまとめました。
`SwiftUI`という新しい土俵(?)に上がって少し不安もありますが、`UIKIt`でのナレッジがあるのでどうにかなるはず....
私と同じようにこれまで`UIKIt`オンリーでやってきたエンジニアさん多いと思います。
採用率増えてますし、`Storyboard`消してコードだけでレイアウト組んでるプロダクトが大半ですもんね。
ということで共有初めていきます!!

## こんな方対象
- これまで`UIKIT`でレイアウト組んでたけど`SwiftUI`やることになった方
- SwiftUIについてチートシート的な感じで知っておきたい方

## UIKitとSwiftUIの違い一覧
まずは一覧
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/ff60c940-9f46-8a43-d4a7-7392a912e69a.png" width="600px">
[引用](https://qiita.com/giiiita/items/8014c2cece33df950fb0#swiftui%E3%81%A7collectionview%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%AB%E3%81%AFlist)

# 紹介
## ちょっと先に余談
私の端末`Xcode13 beta`なんですが、このXcodeから`SwiftUI`で新しくプロジェクト作成すると`info.plist`とか`SceneDelegate.swift`とかないので注意
まだ`Xcode13`の参考書とか出てるわけでもなく情報も少ないのでbetaでない方のXcodeでやることおすすめします。

一応なんで無くなったのって人のために説明 or 記事記事共有しておきます。
- `info.plist`が無くなった理由 [参照](https://stackoverflow.com/questions/67896404/where-is-info-plist-in-xcode-13-missing-not-inside-project-navigator)
- `SceneDelegate`や`AppDelegate`は前のバージョンでは`lifecycle`って項目が新規フォロジェクトを立ち上げるとあったのですがその項目自体がなくなったから自動的に`SwiftUI App`が適用されることになりました。[参照](https://qiita.com/antk/items/4bd97f0baa770ecef870)

余談以上です。

## Text編
それでは`Hello World`から
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/4f1d5ac6-0bb5-d15d-66f1-febefea8a78a.png" width="400px">
### 定義の仕方
```swift:UIKIT.swift
let testText: UILabel = {
   let text = UILabel()
    text.text = "おはよう世界！"
    return text
}()
```
```swift:SwiftUI.swift
var body: some View {
    Text("おはよう世界！")
}
```

### 文字色の変更
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/7546b382-9015-537c-9cb1-3aaf159600ca.png" width="400px">

```swift:UIKIT.swift
let text = UILabel()
text.text = "おはよう世界！"
text.textColor = .red
```
```swift:SwiftUI.swift
Text("おはよう世界！")
    .foregroundColor(.red)

```

### 背景色の変更
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/a4eec367-76eb-eaaa-e315-a2feade38254.png" width="400px">

```swift:UIKIT.swift
let text = UILabel()
text.text = "おはよう世界！"
text.backgroundColor = .black
```
```swift:SwiftUI.swift
Text("おはよう世界！")
    .background(Color.black)
```

### 余白
`UiKit`では例えば`UILabel`の余白を表示しようとなるとサブクラス化したりと面倒でした..
`SwiftUI`からはこりゃまたびっくり!!
詳しくは[こちら](https://capibara1969.com/1954/)参照
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/aaaff969-1149-a6c5-63ea-7a5af40bf351.png" width="400px">

```swift:SwiftUI.swift
Text("はひふへほ")
    .padding(55)
    .background(Color.red)
```

### 文字の太さの変更
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/f017cdc8-da7a-ac27-6f38-bfee56fd83bb.png" width="400px">

```swift:UIKIT.swift
let text = UILabel()
text.text = "おはよう世界！"
text.font = .boldSystemFont(ofSize: 20)
```
```swift:SwiftUI.swift
Text("おはよう世界！")
    .bold()
    .font(.system(size: 20))
```

### 複数行に対応する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/240cc0ec-88c3-5522-3ed5-eb3a56b43017.png" width="400px">

```swift:UIKIT.swift
let text = UILabel()
text.text = "おはよう\n世界！"
text.numberOfLines = 0
```
```swift:SwiftUI.swift
Text("おはよう\n世界！")
    .lineLimit(nil)
```

## 画像編
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/e46a39cc-0193-2cb3-f0a7-f5013216641d.png" width="400px">

```swift:UIKIT.swift
let imageView: UIImageView = {
   let image = UIImageView()
    image.image = UIImage(systemName: "person.fill")
    return image
}()
self.view.addSubview(imageView)
```
```swift:SwiftUI.swift
Image(systemName: "person.fill")
```

## Label編
`UIKit`では画像とテキストを一緒に表示する時、`attribute`などで割と面倒くさく表現していました。
`SwiftUI`では専用の物が用意されています。これまためちゃくちゃ簡単にできます。
画像はシンボルを使います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/9d8b5755-da6b-7dd4-bb1d-3bdffa1c30f7.png" width="400px">

```swift:SwiftUI.swift
Label("テストで表示", systemImage: "person.fill")
// Viewを入れることもできます
Label(
    title: {
        Text("色変更").foregroundColor(.red)
    },
    icon: {
        Image(systemName: "person.fill").foregroundColor(.blue)
    }
)
```

## コンテンツの表示編
**`SwiftUI`でのコントロール(並べる)は最大10個まで**
### 横に並べる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/786c0c72-50ef-6c73-6437-bff709fbb029.png" width="400px">

```swift:UIKIT.swift
let stackView: UIStackView = {
    let stack = UIStackView()
    stack.axis = .horizontal
    return stack
}()
let testText: UILabel = {
   let text = UILabel()
    text.text = "おはよう世界！"
    return text
}()
let testText1: UILabel = {
   let text = UILabel()
    text.text = "こんにちは世界！"
    return text
}()
addSubview(stackView)
stackView.addArrangedSubview(testText)
stackView.addArrangedSubview(testText1)
```
```swift:SwiftUI.swift
var body: some View {
    HStack{
        Text("おはよう世界！")
        Text("こんにちは世界！")
    }
}

```

### 縦に並べる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/852b6269-0bae-e105-f94f-06bdf6d4ce60.png" width="400px">

```swift:UIKIT.swift
let stackView: UIStackView = {
    let stack = UIStackView()
    stack.axis = .vertical
    return stack
}()
let testText: UILabel = {
   let text = UILabel()
    text.text = "おはよう世界！"
    return text
}()
let testText1: UILabel = {
   let text = UILabel()
    text.text = "こんにちは世界！"
    return text
}()
addSubview(stackView)
stackView.addArrangedSubview(testText)
stackView.addArrangedSubview(testText1)
```
```swift:SwiftUI.swift
var body: some View {
    VStack{
        Text("おはよう世界！")
        Text("こんにちは世界！")
    }
}

```

### 親コンポーネントのレイアウト変更
表現が難しいですね。**親コンポーネント=まとめているView**ということです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/97842ffa-13ad-57d3-9d64-8fdd66edb7d6.png" width="400px">

```swift:UIKIT.swift
let stackView: UIStackView = {
    let stack = UIStackView()
    stack.axis = .vertical
    stack.backgroundColor = .red
    return stack
}()
let testText: UILabel = {
   let text = UILabel()
    text.text = "おはよう世界！"
    return text
}()
let testText1: UILabel = {
   let text = UILabel()
    text.text = "こんにちは世界！"
    return text
}()
addSubview(stackView)
stackView.addArrangedSubview(testText)
stackView.addArrangedSubview(testText1)
```
```swift:SwiftUI.swift
var body: some View {
    VStack{
        Text("おはよう世界！")
        Text("こんにちは世界！")
    }.background(Color.red)
}
```

### 繰り返し条件を使ってレイアウトを表示
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/ecfcba5e-0bed-7b43-3650-6d29f3e8b04b.png" width="400px">

```swift:UIKIT.swift
let stackView: UIStackView = {
    let stack = UIStackView()
    stack.axis = .vertical
    return stack
}()
let testTexts: [UILabel] = {
    let text = UILabel()
    text.text = "hoge"
    let text1 = UILabel()
    text1.text = "huga"
    let text2 = UILabel()
    text2.text = "hugahoge"
    return [text, text1, text2]
}()
addSubview(stackView)
testTexts.forEach{
    stackView.addArrangedSubview($0)
}
```
```swift:SwiftUI.swift
let testTexts: [Text] = [
        Text("hoge"),
        Text("huga"),
        Text("hugahoge")
    ]
    var body: some View {
        VStack{
            ForEach(0 ..< testTexts.count){ self.testTexts[$0] }
        }.background(Color.red)
    }
```

### 区切り線
`UIKit`だとこれ`UIView`で高さを1とかにして表現して作ってましたが`SwiftUI`だと標準で用意されているみたいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/d3ee7653-9ae4-af0d-ef68-2bb490a23a28.png" width="400px">

```swift:UIKIT.swift
let stackView: UIStackView = {
    let stack = UIStackView()
    stack.axis = .vertical
    return stack
}()
let testText: UILabel = {
   let text = UILabel()
    text.text = "hoge"
    return text
}()
let testText1: UILabel = {
   let text = UILabel()
    text.text = "huga"
    return text
}()
let spacer: UIView = {
    let view = UIView()
    view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 1)
    return view
}()
addSubview(stackView)
[testText, spacer, testText1].forEach{
    stackView.addArrangedSubview($0)
}
```
```swift:SwiftUI.swift
var body: some View {
    VStack{
        Text("hoge")
        Divider()
        Text("huga")
    }
}

```

### コンテンツをView全体に表示する
`UIKit`だとまず`view`作ってそれにAutoLayout適用させて私は全体表示表現してました。
しかしこれまた簡単にできるものが用意されてます。
詳しくは[こちら](https://www.yururiwork.net/archives/1226)参照
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/4ff4fc16-5c77-f27b-5e50-1568a51a49a7.png" width="400px">

```swift:SwiftUI.swift
struct ContentView: View {
    private var colorView: some View {
        Color.init(.red)
    }
    var body: some View {
        colorView
            .edgesIgnoringSafeArea(.all)
    }
}

// 上記だったこんな風でいいです。(あくまでUIKit的に上記で書きました)
struct ContentView: View {
    var body: some View {
        Color.red
            .edgesIgnoringSafeArea(.all)
    }
}
```

## Button編
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/9eb17627-2f4c-91ca-721c-b347f1960ed3.png" width="400px">

### 呼び出し方
```swift:UIKIT.swift
let testButton: UIButton = {
    let button = UIButton()
    button.setTitle("ボタン", for: .normal)
    button.addTarget(
        self,
        action: #selector(tapped(_:)),
        for: .touchUpInside
    )
    return button
}()
@objc func tapped(_ sender : Any) {
    print("タップされた")
}

```
```swift:SwiftUI.swift
var body: some View {
    VStack{
        Button(action: {
            print("タップされた")
        }, label: {
            Text("ボタン")
        })
        Spacer(minLength: 0)
    }
}

```

## TextField編
`$`のマークが`PHP`にしか見えないすね...
私は`PHP`ちょっと案件で触ってたんですけど苦い思い出が蘇りました笑
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/bba142f2-e9d6-2b2c-1107-dca3e91600cb.png" width="400px">

### 呼び出し方
```swift:UIKIT.swift
let testButton: UIButton = {
    let button = UIButton()
    button.setTitle("ボタン", for: .normal)
    button.backgroundColor = .red
    button.layer.cornerRadius = 24
    return button
}()
let textField: UITextField = {
    let input = UITextField()
    input.placeholder = "プレースホルダー"
    return input
}()
@objc func tapped(_ sender : Any) {
    print("入力欄の中身", textField.text)
}
```
```swift:SwiftUI.swift
@State var input = ""
var body: some View {
    VStack{
        Button(action: {
            print("入力欄の中身", input)
        }, label: {
            Text("ボタン")
        })
        .background(Color.red)
        .cornerRadius(24)
        
        TextField("プレースホルダー", text: $input)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}
```

### 入力欄のパスワード形式
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/38660bbf-ebf6-e39d-abee-0e574edf2c46.gif" width="400px">

```swift:UIKIT.swift
let textField: UITextField = {
    let input = UITextField()
    input.placeholder = "パスワードを入力してください"
    input.isSecureTextEntry = true
    return input
}()
```
```swift:SwiftUI.swift
@State var pass = ""
var body: some View {
    SecureField("パスワードを入力してください", text: $pass)
}
```

## Form編
私の中で知る限りだとこれは`SwiftUI`での新しい要素なのかな？と思います。
下記のような枠で囲むやつの実装です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/4fd4780b-e6c5-02be-0033-c47ea396641c.gif" width="400px">

```swift:SwiftUI.swift
@State var name = ""
@State var pass = ""
var body: some View {
    Text("タイトル").font(.title)
    Form{
        Text("入力内容\n名前:\(name)\nパスワード\(pass)")
            .lineLimit(nil)
        TextField("名前を入力してください", text: $name)
        SecureField("パスワードを入力してください", text: $pass)
    }
    
    Spacer(minLength: 0)
}

```

##Section編
これは入力できるTableViewとかでみたことがあるUIですね。
`SwiftUI`だとこんなに簡単にできちゃいます。
`header`があってここに書くと`UITableView`でいう`セクション`みたいにできるというわけですね
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/6f64bc2d-f78e-a80b-92c9-599899f01d6e.png" width="400px">

```swift:SwiftUI.swift
struct ContentView: View {
    @State var name = ""
    @State var pass = ""
    @State var address = ""
    @State var tel = ""
    var body: some View {
        VStack{
            Text("Section編").font(.title)
            Form{
                Section(header: Text("ログイン情報")){
                    TextField("名前を入力してください", text: $name)
                    SecureField("パスワードを入力してください", text: $pass)
                }
                Section(header: Text("パーソナル情報")){
                    TextField("住所", text: $address)
                    SecureField("電話番号", text: $tel)
                }
            }
            
            Spacer(minLength: 0)
        }
    }
}
```

## Table編
これは一番簡単にできると感動した物でした。
**`List`や`Form`は自身の中にスクロール機能が組み込まれています。**
### 呼び出し
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/8896705d-10f1-a907-9376-328615640cdc.png" width="400px">

```swift:UIKIT.swift
//割と抜粋して書いてます。
class TestViewController: UITabBarDelegate, UITableViewDataSource {
    let data: [String] = ["huga", "hoge", "hugahuga"]
    
    let tableView: UITableView = {
       let table = UITableView(frame: .zero, style: .grouped)
       table.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
       return table
    }()
    tableView.delegate = self
    tableView.dataSource = self
    self.view.addSubview(tableView)
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
            ?? UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = self.data[indexPath.row]
        return cell
    }
}
```
```swift:SwiftUI.swift
struct ContentView: View {
    let data: [String] = ["huga", "hoge", "hugahuga"]
    var body: some View {
        VStack{
            Text("Table編").font(.title)
            Form{
                Section(header: Text("Test")){
                    List(data, id:\.self){
                        Text($0)
                    }
                }
            }
            
            Spacer(minLength: 0)
        }
    }
}
```

### カスタムセル
カスタムセルって`SwiftUI`ではないんですかね?
`UIKit`だとカスタムセルって言われてた物も割と楽にできちゃいます。
びっくりするくらいコードがスッキリですね.....(恐ろしいSwiftUI)
[Identifiableプロトコルについて](https://capibara1969.com/1650/)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/0d5bfa57-361b-a3fe-93d6-8841a5e2923b.png" width="400px">

```swift:UIKIT.swift
class CustomUITableViewCell: UITableViewCell {
    
    let stackView: UIStackView = {
        let stack = UIStackView()
        stack.axis = .vertical
        stack.layer.borderWidth = 1
        stack.layer.borderColor = UIColor.red.cgColor
        return stack
    }()
    let name: UILabel = UILabel()
    let spacer: UIView = {
        let view = UIView()
        view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 1)
        view.backgroundColor = .gray
        return view
    }()
    let age: UILabel = UILabel()
    // 色々抜粋 ...
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: .subtitle, reuseIdentifier: reuseIdentifier )
        addSubview(stackView)
        [name, spacer, age].forEach{ stackView.addArrangedSubview($0) }
        // AutoLayout抜粋 ...
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setCell(name: String, age: String) {
        self.name.text = name
        self.age.text = age
    }
}

struct CustomCell {
    let name: String
    let age: String
}

class TestViewController: UITabBarDelegate, UITableViewDataSource {
    let data: [CustomCell] = [
        CustomCell(name: "山田", age: "24"),
        CustomCell(name: "小島", age: "83"),
        CustomCell(name: "岡部", age: "39")
    ]
    tableView.delegate = self
    tableView.dataSource = self
    self.view.addSubview(tableView)

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! CustomUITableViewCell
        cell.setCell(
            name: data[indexPath.row].name,
            age: data[indexPath.row].age
        )
        return cell
    }
}
```
```swift:SwiftUI.swift
struct CustomCell: View, Identifiable {
    var id = UUID()
    let name: String
    let age: String
    
    var body: some View{
        VStack{
            Text(name)
                .bold()
                .font(.headline)
            Divider()
            Text(age)
        }.border(Color.red)
    }
}

struct ContentView: View {
    let data: [CustomCell] = [
        CustomCell(name: "山田", age: "24"),
        CustomCell(name: "小島", age: "83"),
        CustomCell(name: "岡部", age: "39")
    ]
    var body: some View {
        VStack{
            Text("Table編").font(.title)
            Form{
                Section(header: Text("Test")){
                    List(data){ $0 }
                }
            }
            
            Spacer(minLength: 0)
        }
    }
}
```

### セルのタップ処理
```swift:UIKIT.swift
//割と抜粋して書いてます。
class TestViewController: UITabBarDelegate, UITableViewDataSource {
    let data: [String] = ["huga", "hoge", "hugahuga"]
    
    let tableView: UITableView = {
       let table = UITableView(frame: .zero, style: .grouped)
       table.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
       return table
    }()
    tableView.delegate = self
    tableView.dataSource = self
    self.view.addSubview(tableView)
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
            ?? UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = self.data[indexPath.row]
        return cell
    }
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("\(data[indexPath.row])が選択されました。")
    }
}
```
```swift:SwiftUI.swift
struct ContentView: View {
    let data: [String] = [
        "huga", "hoge", "hugahuga"
    ]
    var body: some View {
        VStack{
            Text("Tableタップ編").font(.title)
            Form{
                Section(header: Text("Test")){
                    List(data, id:\.self){ element in
                        Text(element)
                            .onTapGesture {
                                print(element,"が選択されました。")
                            }
                    }
                }
            }
            
            Spacer(minLength: 0)
        }
    }
}

```

## スクロールできるView
`UIKit`の`UIScrollView`は`AutoLayout`組むのが割とコードで書くの面倒ですよね。
`SwiftUI`で楽にできます。
### 呼び出し
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/ebda979b-11df-6660-8b2b-b62227c4f850.gif" width="400px">

```swift:UIKIT.swift
let scroll = UIScrollView()
let outline = UIView()
let stackView: UIStackView = {
    let stack = UIStackView()
    stack.axis = .vertical
    return stack
}()
let labels: [UILabel] = {
    let data = ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6", "Test7", "Test8", "Test9", "Test10"]
    return data.map {
        let label = UILabel()
        label.text = $0
        return label
    }
}()
let spacer: UIView = {
    let view = UIView()
    view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 1)
    view.backgroundColor = .gray
    return view
}()
addSubview(scroll)
scroll.addSubview(outline)
outline.addSubview(stackView)
labels.forEach{
    stackView.addArrangedSubview($0)
    stackView.addArrangedSubview(spacer)
}

```
```swift:SwiftUI.swift
struct ContentView: View {
    let data = ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6", "Test7", "Test8", "Test9", "Test10"]
    var body: some View {
        VStack{
            Text("スクロール編").font(.title)
            ScrollView{
                ForEach(data, id: \.self){
                    Text($0)
                        .font(.title)
                        .padding(40)
                    Divider()
                }
            }
            
            Spacer(minLength: 0)
        }
    }
}
```

## Navgation
`UIKit`では`UINavgationController`を使ってViewControllerに当てはめてましたが
今回からViewに直接埋め込んで使うことになりました。

```swift:UIKIT.swift
UINavigationController(rootViewController: TestViewController())
```
```swift:SwiftUI.swift
var body: some View {
    NavigationView{
        Text("ほげ")
    }
}

```

### ナビゲーションのタイトル
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/bae56461-4273-34ec-f393-9482fc04a20e.png" width="400px">

```swift:UIKIT.swift
self.title = "ナビゲーション"
```
```swift:SwiftUI.swift
var body: some View {
    NavigationView{
        Text("ほげ")
            .navigationBarTitle(Text("ナビゲーション"))
    }
}

```

### 画面遷移
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/9a1b7617-0b05-901d-b370-fe4a6a0411fa.gif" width="400px">

```swift:UIKIT.swift
// めちゃくちゃ抜粋しました。
// ボタンを押下してpresentする想定
present(DetailViewController.init(), animated: true, completion: nil)
```
```swift:SwiftUI.swift
struct ContentView: View {
    var body: some View {
        NavigationView{
            // 画面遷移
            NavigationLink("画面遷移", destination: DetailView(item: "画面遷移した"))
                .navigationBarTitle("選択画面")
        }
    }
}

struct DetailView: View {
    let item: String
    
    var body: some View {
        Text(item)
    }
}

```

## アラート編
### デフォルトアラート
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/49022507-2a35-26fd-9d6c-b42f6c0f1148.gif" widt　h="400px">

```swift:UIKIT.swift
// ボタンを押下したら発火する定
let alert = UIAlertController(title: "表示させたいタイトル", message:  "表示させたいサブタイトル", preferredStyle:  .alert)
let confirmAction = UIAlertAction(title: "確定", style: .default, handler:{
    (action: UIAlertAction!) -> Void in
    print("確定")
})
let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel, handler:{
    (action: UIAlertAction!) -> Void in
    print("キャンセル")
})

[cancelAction, confirmAction].forEach{ alert.addAction($0) }
present(alert, animated: true, completion: nil)

```
```swift:SwiftUI.swift
struct ContentView: View {
    @State private var isShow = false
    var body: some View {
        
        NavigationView{
            Button("アラートの表示") {
                self.isShow = true
            }
            .alert(isPresented: $isShow) {
                Alert(title: Text("表示させたいタイトル"),
                      message: Text("表示させたいサブタイトル"),
                      primaryButton: .default(Text("確定"),action: {
                        print("確定")
                      }),
                      secondaryButton: .cancel(Text("キャンセル"),action: {
                        print("キャンセル")
                      })
                )
            }
            .navigationBarTitle("選択画面")
        }
    }
}

```

### アクションシート
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/3e7f1993-8b64-1ee5-6ffc-4cb120a18961.gif" width="400px">

```swift:UIKIT.swift
let actionSheet = UIAlertController(title: "Menu", message: "", preferredStyle: .actionSheet)
let action1 = UIAlertAction(title: "表示させたいタイトル1", style: .default, handler: {
    (action: UIAlertAction!) in
    print("表示させたいタイトル1の処理")
})
let action2 = UIAlertAction(title: "表示させたいタイトル2", style: .default, handler: {
    (action: UIAlertAction!) in
    print("表示させたいタイトル2の処理")

})

let close = UIAlertAction(title: "閉じる", style: .destructive, handler: {
    (action: UIAlertAction!) in
    //実際の処理
    print("閉じる")
})
[action1,action2,close].forEach{ actionSheet.addAction($0) }

self.present(actionSheet,animated: true, completion: nil)
```
```swift:SwiftUI.swift
struct ContentView: View {
    @State private var isShow = false
    var body: some View {
        
        NavigationView{
            Button("アラートの表示") {
                self.isShow = true
            }
            .actionSheet(isPresented: $isShow) {
                ActionSheet(title: Text("Menu"), message: Text("メッセージ"), buttons:
                                [
                                    .default(Text("表示させたいタイトル1")) { print("選択肢１") },
                                    .default(Text("表示させたいタイトル2")) { print("選択肢２") },
                                    .cancel(Text("閉じる"), action: { print("閉じる") })
                                ]
                )
            }
            .navigationBarTitle("選択画面")
        }
    }
}
```

### modalの表示
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/84200658-6fc2-5672-cf4a-16e0f8ca5f4b.gif" width="400px">

```swift:SwiftUI.swift
struct ContentView: View {
    @State private var isShow = false
    var body: some View {
        
        NavigationView{
            VStack{
                Button("モーダルViewを表示"){
                    isShow = true
                }.sheet(isPresented: $isShow) {
                    DetailView()
                }
            }.navigationBarTitle("Modal画面遷移元")
        }
    }
}
```

### 全体のmodalの表示
専用のものが用意されているみたいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/8f2b19d0-329c-7c05-f3ba-f5412dafd327.gif" width="400px">

```swift:UIKIT.swift
let vc = UITestViewController()
vc.modalPresentationStyle = .fullScreen
self.present(vc, animated: true, completion: nil)
```
```swift:SwiftUI.swift
struct ContentView: View {
    @State private var isShow = false
    var body: some View {
        
        NavigationView{
            VStack{
                Button("モーダルViewを表示"){
                    isShow = true
                }.fullScreenCover(isPresented: $isShow) {
                    DetailView()
                }
            }.navigationBarTitle("Modal画面遷移元")
        }
    }
}
```

# 終わりに
まだまだ`SwiftUI`と`UIKit`の違いはあると思いますが、ひとまずは一旦これで終了したいと思います。
ある程度よく使う物たちは共有できたのかなと思います。
`UIKit`のコードはぱぱっと作ったコードで動確していないのでもしかしたらおかしい動作するかもしれません..
`UIKit`のところについては雰囲気だけお楽しみください.
そこはご了承よろしくお願いいたします。

`UIKit`だとあんなに長かったのにってのが学習してる最中終始頭の中でその言葉が流れていました。
本当に便利になったと思います。
これからのSwiftUIライフを楽しみたいと思います!!!
ここまで読んでくださりありがとうございます。
皆さんのお役に少しでも立てましたら幸いです。