[SwiftUI入門] 公式チュートリアルをまとめてみた

# SwiftUIチュートリアル
初心者にはこちらがとにかくおすすめです。

ランドマークのアプリを実践形式で実装することができます。
リストの取得や詳細ページへの遷移、地図の表示、タブナビゲーション、ユーザー入力などアプリに必要なメソッドが詰まっています。
[https://developer.apple.com/tutorials/swiftui/](https://developer.apple.com/tutorials/swiftui/)

## 環境
- Xcode 11
- MacOS 15以上 ※2021年２月現在
※MacやXcodeは頻繁にアップデートされるので常に公式ページを参照してください

プロジェクト作成や新規swiftファイル作成などXcodeの使い方は説明しません。
公式チュートリアルをみてください。

## ことはじめ
①View
こちらにUIを構成していく
ContentViewは一番初めに表示されるスクリーン
②Preview
プレビューするためのコード。こちらを入れておくと端末やシュミレーターを作動させなくても、コンパイルして描画してくれる。

```swift
import SwiftUI

// ①View
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

// ②Preview
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

VStack 縦にグループ化したい場合に使用
HStack 横にグループ化したい場合に使用
ZStack 重ねて表示したい場合に使用
Text("") テキスト表示
Spacer() スペースを入れる
Divider() 罫線を入れる

スタイルを追加
.font() フォント指定
.foregroundColor()　ファントカラー
.padding() パディングを入れる

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                .font(.subheadline)
                .foregroundColor(.secondary)
                
                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()
            
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

### Image挿入
`Assets.xcassets`フォルダを開いて任意の画像をドラッグ＆ドロップ

Image("<file名>")

スタイルを追加
.clipShape(Circle()) マスクをつける（`Circle()`で円にクリップ）
.overlay Viewの上にViewを重ねて表示
.stroke 罫線をつける
.shadow　影をつける

```swift
import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 7)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
```

### Mapを表示

@Stateを使ってViewの値を変更可能にすることで、経度・緯度を指定して描画することができる。
@Stateに関してはこちらを参照 [https://www.isoroot.jp/blog/2381/](https://www.isoroot.jp/blog/2381/)

MapKitモジュールをインポート
import MapKit

```swift
import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
    
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
```

### ImageとMapをContentViewに表示させる

SwiftUIでは`CircleImage()`、`MapView()`というように書くと別のViewでも表示させることが可能

.ignoresSafeArea　セーフエリアを画面上いっぱいまで指定
.frame(height: 300)　高さ指定
.offset(y: -130)　オブジェクトの移動

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // 追加
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            // ここまで追加
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                .font(.subheadline)
                .foregroundColor(.secondary)
                
                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()
            
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

最終的にこのような表示なれば成功です！
![スクリーンショット 2021-02-11 15.29.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393193/4b5c6f0a-f31c-c960-2946-f70f3d054271.png)