SwiftUI 4泊5日の旅（1日目：基本）

# はじめに

今回は勉強会向けの資料で、SwiftUIについてです。

さて、みなさんGWはどこかに出かけていますか？
今年は外出自粛の真っ只中で、あまり出かけられませんね。
僕も毎年旅行してましたが、今年はしょうがないのでSwiftUIの世界を旅することにしました（って書き始めはちょい無理があるな…）

SwiftUIはまだ制限が多く、iOS 13以上でしか使えないので、業務でまともに使えるのは来年以降だと思います。
その時に思い出せるよう、軽く「触りの部分」を全5回でまとめます。

第1回は[SwiftUI Tutorials](https://developer.apple.com/tutorials/swiftui/tutorials)に沿った内容で、基本的な画面を作っていきます。

# 準備
## プロジェクト作成
User InterfaceでSwiftUIを選びます。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/a818df20-6fca-4493-2036-18352cbe7520.png">
## プレビュー表示
右上のResumeを押すと、ビルド＆プレビューされます。
<img width="565" alt="スクリーンショット 2020-05-02 21.06.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/1560b464-a5eb-d25f-7f1d-9852d58e39a5.png">
このプレビュー表示は閉じてしまっても、メニューのEditor→Canvasで開けます。
また、コードを変えると↓リアルタイムに反映されます。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/c6d67d10-bf53-1da3-1293-a33cb91f522c.gif">


# 基本
## 第一歩
プロジェクトを作った直後の状態です。Hello, World!
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/4df7e74f-ea60-e1e0-63ac-5328a932af6f.png">

```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}
```

## コード上でフォントと色を変える
試しに`font`と`foregroundColor`を指定してみます。
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/f0d0a18f-0e30-40c1-5ee1-cf471c976c4a.png">


```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        Text("Tonio Nagauzzi")
            .font(.title)
            .foregroundColor(.green)
    }
}
```
## Inspectorからフォントと色と諸々を変える
これらをコード上で入力しなくても、便利な方法があります。
コード上のTextか、プレビューされたパーツのどちらかを、Command押しながらクリックします。
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/d5aead54-4936-527c-a2c0-56cca0388990.png">
<img width="280" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/19b5e565-d3e0-ad63-7f01-9226adcb6b41.png">
メニューのShow SwiftUI Inspectorで、色々設定できます。
<img width="280" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/6caa7943-428d-da2a-519e-8358a2300cc8.png">
実はふきだし内はスクロールできます（罠）
<img width="280" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/414557da-3659-eb76-7992-983fb5313cd8.png">
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/828886e2-e3e3-27df-6c55-3e72b702e079.png">

```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        Text("この度は拙宅落成にあたりましてご丁寧なご祝詞ならびに結構なるお祝いの品をいただきまして有り難く厚くお礼申しあげます。")
            .font(.title)
            .fontWeight(.bold)
            .foregroundColor(.green)
            .multilineTextAlignment(.center)
            .lineLimit(5)
            .frame(width: 300.0)
    }
}
```
## Stackで複数のビューを整列させる
TextをCommandクリックして、Embed in VStackを選びます。
右上の＋からTextを選び、ドラッグ＆ドロップで2つ目のTextとして配置します。
2つ目のTextも1つ目と同様に装飾します。
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/db67888a-386d-f7df-078b-1e18292fdf31.png">


```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Tonio Nagauzzi")
                .font(.title)
                .foregroundColor(.green)
            Text("@tonionagauzzi")
                .font(.subheadline)
                .foregroundColor(.blue)
        }
    }
}
```
> [NOTE] VStackは子のビューを縦方向に並べる

今度は2つ目のTextのInspectorを開き、Embed in HStackを選びます。
3つ目のTextを配置し、同様に装飾します。
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/68ee2e97-6576-809a-80b0-f1db7a8590a4.png">

```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        VStack() {
            Text("Tonio Nagauzzi")
                .font(.title)
                .foregroundColor(.green)
            HStack {
                Text("Twitter:")
                    .font(.subheadline)
                Text("@tonionagauzzi")
                    .font(.subheadline)
                    .foregroundColor(.blue)
            }
        }
    }
}
```
> [NOTE] HStackは子のビューを横方向に並べる


## Alignment、Spacer、Paddingでビュー位置を調整する
VStackをCommandクリックしてInspectorを選び、AlignmentとPaddingを設定します。
また、SpacerをHStackのTextの間に入れます。
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/ad5906fb-d0a9-824a-2ee9-5877ae622a32.png">

```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Tonio Nagauzzi")
                .font(.title)
                .foregroundColor(.green)
            HStack {
                Text("Twitter:")
                    .font(.subheadline)
                Text("@tonionagauzzi")
                    .font(.subheadline)
                    .foregroundColor(.blue)
                Spacer()
                Text("Follow me!")
                    .font(.footnote)
                    .foregroundColor(.accentColor)
            }
        }
        .padding(.all, 20.0)
    }
}
```
> [Note] Spacerは前後のビューを限界まで離す

## 画像を置く
Imageを配置し、Assetカタログ内の画像のIDを指定します。
また、ImageのInspectorから、Clip ShapeやOverlayを設定します。
<img width="565" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277107/82331e16-f4ed-016d-4f2d-21f903f39591.png">


```Swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        VStack() {
            Image("tonionagauzzi")
                .clipShape(Circle())
                .overlay(
                    Circle().stroke(
                        Color.gray,
                        lineWidth: 3
                    )
                )
            Text("Tonio Nagauzzi")
                .font(.title)
                .foregroundColor(.green)
            HStack {
                Text("Twitter:")
                    .font(.subheadline)
                Text("@tonionagauzzi")
                    .font(.subheadline)
                    .foregroundColor(.blue)
            }
        }
    }
}
```

こんな感じでビューを次々並べていくことができます。

# 最後に

ここまでで、[SwiftUI Tutorials](https://developer.apple.com/tutorials/swiftui/tutorials)のSection 1〜4に相当する内容をやりました。
向こうはSection 5以降もビューを並べる演習が続きますが、その前にまずはSwiftUIが動く仕組みを把握したいので、[次回](https://qiita.com/knagauchi/items/24d2b1ab8718270aef92)はプロジェクト構成の話をします。

※macbookを修理してたのでもう3日目なんですけど、気分はGW1日目です 🏎=3=3