SwiftUIを初めて使ってみた 

#はじめに
今までアプリを作る際はStoryboadしか使ったことがなかったので、
SwiftUIに挑戦してみようと思いました。

今回はAppleのSwiftUIチュートリアルをやってみました!

#準備
Xcode初期画面にて「Create a new Xcode project」を選択し
次の画面でAppを選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/0be9270d-6023-3447-7888-015655512c94.png" width=500px>



Interfaceに「SwiftUI」
Life Cycleに「SwiftUI App」を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/735e4bec-7015-58e2-1b89-0d7480e47083.png" width=500px>

準備完了
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/d7bb40d6-b5c2-3b5f-58c7-c2d62787d79c.png" width=800px>


#PreView機能
エディタに記載した内容がPreviewに反映されます。
コードの内容がうまく反映されないときはResumeボタンを押すことで、Previewに描画されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/0be59350-c3ec-d90a-6b18-89a5ffb524a7.png" width=800px>




#ソースコード
##LandmarksApp

```swift:LandmarksApp.swift
import SwiftUI

@main
struct LandmarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
```
##ContentView
コンテンツが表示される画面になります。
VStackを使用することでレイアウトを縦に並べます。
Spacer()によってスペースを設けたり
padding()で余白を設定できます。

```swift:ContentView.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")
                    Spacer()
                    Text("Califonia")
                }
                .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()
    }
}
```

##CircleImage
Imageで表示する画像を指定したあとに
clipShape(Circle())を記述することで画像を丸く設定します。

```swift:CircleImage.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()
    }
}
```

##MapView
背景の地図を表示します。

```swift:MapView.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()
    }
}
```

#完成

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651213/303af46e-ebfc-6c51-7f7e-62df88ab0ec5.png" width=350px>





#使ってみて思ったこと
・VStackとHStackの書き方が特徴的
・Spacer()やpadding()でスペースと余白をつけられることが便利
・コードで書いたものがそのまま画面の部品になるので面白い


#参考
[Apple Developer Documentation SwiftUI Tutorials](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views)