SwiftUIの解説 1ページ目

# はじめに
このページはAppleの公式サイトである`SwiftUI`のサイトの解説をしているだけです。
公式サイトをそのまま見ると少し詰まる部分がありそうだと思ったので作りました。
中級者以降の方には不要だと思います。

[公式ページ](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views)を見て、理解ができない場合に以下の記事を見てください。
画像などは貼ってませんので、公式ページを参照ください。

※2020年6月に作成しています。
※1ページ目ではサンプルプロジェクトをダウンロードする必要はありません。

# Section 1
MacでmacOS Catalina 10.15が実行されていることを確認してください。
ここでは`SwiftUI`について説明します。

## Step1
[Create a new Xcode project]をクリックするか、[File]>[New]>[Project]を選択します。

## Step2
`Single View App`を選択してプロジェクトを作ってください。

## Step3
なお名前は`Landmarks`で作成して`user interface`は`SwiftUI`を選択してください。

## Step4
左に表示されているプロジェクトナビゲーターからContentView.swiftを選択してください。
`View`を継承している`ContentView`構造体（わからない方はクラスだと思っておいてください。実際は別物ですが、読み進める上ではクラスでも問題ありません。）にデザイン用のコードを作ります。

下部に書かれている`PreviewProvider`を継承している`ContentView_Previews`は右側に表示するプレビューを生成するために必要です。
※実際に起動する時には使われません。

## Step5
右上に表示されている`Resume`ボタンを押してください。
なお、表示されていない場合は`Editor > Editor and Canvas`で表示してください。

## Step6
`ContentView.swift`内の`Text("Hello World!")`部分を好きに変えてください。
ここではプレビューの変化を確認するため何を入れても問題ありません。

## 余談
`SwiftUI`では`AppDelegate.swift`とは別に`SceneDelegate.swift`が生成されています。
こちらのコードを見ると`AppDelegate.swift`と似たような構造で`ContentsView.swift`を呼び出している事がわかると思います。

# Section 2
`SwiftUI`が凄いのはここからです。
ここからデザインを変更していきますが、プログラムからでもインスペクタからでもコードの変更が行えます。インスペクタで変更すると自動的にプログラムが生成されます。

## Step1
`Command`キーを押しながら右クリックをするとインスペクタが選択できるようですが、僕はすでにインスペクタを右側に出していたのでインスペクタの選択肢は出ませんでした。
インスペクタが出ている人は無視してください。

## Step2
インスペクタで`Hello, World!`と表示されている文言を変えるとコードが変わる事を確認してください。
コードの`Text("Hello, World!")`をタップするか、右側のプレビューの`Hello, World!`と表示されているラベルをタップするとインスペクタが切り替わります。
色々タップしてみてインスペクタがどうなるか見てみると良いでしょう。

## Step3
フォントを`Title`に変更してください。

## Step4
Fontメソッドの後に`.foregroundColor(.green)`を打ってください。

## Step5,6
インスペクタから色を変えてください。
インスペクタとコードが常に一致している事が確認できれば大丈夫です。

# Section 3
`SwiftUI`では`Stack`を組み合わせてUIを作っていきます。
試しに以下のコードを打ち込むとわかりますが、エラーが発生します。

```swift
    var body: some View {
        Text("Hello, World!11")
        Text("Hello, World!11")
    }
```

`Stack`については詳しく説明しませんが、横に並べて表示する`HStack`(HorizontallyのH)と縦に並べて表示する`VStack`(VerticallyのV)を使います。
オートレイアウトを学んだ人には馴染み深いと思います。

## Step1
`Command`+右クリックで`VStack`を埋め込んでください。
コードを直接打っても構いません。（多分コードを打つ方が早いです。）

## Step2
右上の「+」ボタンを押して`Text`を挿入してください。
`xib`や`storyboard`でコンポーネントを配置するのと同じですが、コードを打った方が早いです・・・。

## Step3
`Placeholder`と書かれている部分を`Joshua Tree National Park`に変更してください。
もし、Step2がわからない人はStep3のようにコードを書けば解決します。

## Step4
フォントを変えてください。

## Step5
`VStack`に`alignment: .leading`を追加してください。
オートレイアウトに慣れている人には当たり前のことですが、わからない人はこの構文で設置場所を変えられる事を覚えておきましょう。
とても重要なのでインスペクタでもコードからでも変えれるようにしておきましょう。

## Step6
HStackを入れます。
わからない方はそのままStep7へ。

## Step7
フォントを追加します。
わからない方は右側のコードの通りにうちます。
ここで`VStack`の中に`HStack`が入っている事を確認してください。
HStackとVStackを入れ替えたらどうなるか確認してみてください。

```swift
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Text("California")
                    .font(.subheadline)
            }
        }
```

これを以下のように変更してみるとどうなるでしょうか？

```
        HStack {
            Text("Turtle Rock")
                .font(.title)
            VStack(alignment: .leading) {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Text("California")
                    .font(.subheadline)
            }
        }
```

また、Textを入れ込むとどうなるかなどオートレイアウトに慣れていない人はここで色々試して理解してください。
これを理解できれば`SwiftUI`が使いこなせるようになります。

## Step8
`Spacer`を入れてください。
これも重要なので、いろいろなところに入れて挙動を確認しておきましょう！

## Step9
`padding`を入れて周りのスペースを取ってください。

# Section 4
このセクションで`SwiftUI`の部品化を学びます。
ここで作ったものをSction5で使います。

## Step1
`Resources`の中の`Assets.xcassets`に画像を入れておいてください。(右クリックで`new image`して画像ファイルをドラッグ&ドロップ。)
画像はなんでも良いですが、正方形のものだと見栄えが良いですよ。

## Step2
`CircleImage`のファイルを`SwiftUI`として作ってください。
（`Swift`ファイルで作って、importに`SwiftUI`と打っても問題ないです。）

## Step3
Step1で作成した画像名を指定して`Image`を打ち込んでください。

## Step4
`.clipShape(Circle())`をコードで書いてください。インスペクタからも選択できる事を確認しておいてください。

## Step5
`.overlay(Circle().stroke(Color.gray, lineWidth: 4))`をコードで書いてください。

## Step6
`.shadow(radius: 10)`をコードで書いてください。
Stap5〜6は中身のコードを変えて何が起こるかみておいてください。

## Step7
円の境界線の色を変えてください。（なんでも良いです。）

# Section 5
ここでは地図を作ります。
あまり深く読む必要はありませんが、`UIView`をどうすれば`SwiftUI`で扱えるかが書かれているのでその部分だけはしっかり理解しておく必要があります。
（これを理解しないと過去の資産が使えなくなってしまいます。）

## Step1
`Section4`と同様に`MapView.Swift`を作ります。

## Step2
`import MapKit`を記述します。
継承元を`View`から`UIViewRepresentable`に変更します。

`UIViewRepresentable`は`UIKit`の`UIView`を`SwiftUI`のビュー階層で使うためのラッパーでViewにも準拠しています。
今までは`UIText`クラスではなく`SwiftUI`の`Text`構造体を使ってました。
しかし、ここでは`UIKit`の`MapKit`を使用するため`UIViewRepresentable`に変更していると思ってください。

## Step3
`makeUIView`を実装してください。
このメソッドで使用する`UIView`を返します。

## Step4
`updateUIView`で`Step3`で作成した`UIView`の状態を設定します。
`CLLocationCoordinate2D`などは地図を定義するための処理です。ここでは理解せずにコピペで大丈夫です。
なんとなく地図用のクラスに座標とか縮小率とかを設定しているんだな程度で大丈夫です。

## Strp5
この状態ではプレビューは正しく動きません。
`Live Preview`ボタンを押して実行すると地図が表示されます。

# Section 6
ここを作り終えると`SwiftUI`の真髄がわかると思います。
僕は凄いと思いまし。
これらのコードはもちろんiPhoneでもiPadでも正しく表示されます。

## Step1
`ContentView.swift`に戻ります。

## Step2
`VStack`で今までのコードを囲んでください。

## Step3
先ほど作った`MapView`をこの画面に表示ささせます。
ここが`SwiftUI`の真髄です。今までは`xib`などで管理していてそれを`storyboard`に組み込むと言う面倒な作業が一行で終わってしまうのです！

## Step4
`Live Preview`を使えば地図も表示されます。
当然緯度経度などを渡すすべもあります。興味のある方は`SwiftUI @State`などで検索してみてください。

## Step5
`CircleImage`も表示させてみましょう

## Step6
ポジションの調整をしていきます。

## Step7
`Spacer`を使って画面を整えます。

## Step8
`edgesIgnoringSafeArea`で画面上部を整えます。

# 最後に
このページはそこまで難しくないと思うのですが、次のページ目は少し混乱しそうだな。と思ってまずは1ページ目として作りました。
作ったらかなり大変だったので2ページ目は需要があれば書きます！

気に入った方はLGTMお願いします！

ちなみに2ページ目はサンプルソースをダウンロードしておく事をお勧めします。
`Landmark.swift`や`Data.swift`、`Resourcesフォルダ`はサンプルからコピーをしてから進めましょう。
では、良い`SwiftUI`ライフを！

P.S.
すいません、見直ししてません・・・。