SwiftUI で Hello World

## 概要
- Xcode 11.0 から導入された SwiftUI でシンプルな Hello World iOS アプリを書く

## 環境

- Xcode 11.0
- Swift 5.1
- SwiftUI

## SwiftUI とは

[Xcode \- SwiftUI \- Apple Developer](https://developer.apple.com/jp/xcode/swiftui/)

> SwiftUIでは、Swiftを利用してすべてのAppleプラットフォーム向けのユーザーインターフェイスを、革新的かつ極めてシンプルに構築することができます。

[Xcode \- SwiftUI \- Apple Developer](https://developer.apple.com/jp/xcode/swiftui/)

> SwiftUIは宣言型シンタックスを使用しているため、ユーザーインターフェイスの動作をシンプルに記述することができます。たとえば、テキストフィールドからなるアイテムのリストを作成すると書いてから、各フィールドの配置、フォント、色を記述するといった具合です。

## プロジェクトの作成

テンプレートから iOS の Single View App を選択する。

<img width="725" alt="swiftui-hello-world-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/05f25d55-5d8c-af90-8fa2-b58c65fe1d5f.png">

以下のオプションを選択する。

- Language: Swift
- User Interface: SwiftUI

<img width="723" alt="swiftui-hello-world-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/e3e67720-8081-c55e-a3c9-0b875890e837.png">

プロジェクトを作成すると、以下の3つの Swift のソースコードが用意される。

- AppDelegate.swift
- SceneDelegate.swift
- ContentView.swift

今回はこの内の ContentView.swift を修正して Hello World を実現する。

## Hello World を書いてみる

<img width="957" alt="swiftui-hello-world-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/8333a134-45ae-f325-e11d-c4fc62b5d5b3.png">

```swift
import SwiftUI

// SwiftUI の View プロトコルを実装する
struct ContentView: View {

    // コンテンツと動作を記述するプロパティ
    var body: some View {
        Text("Hello World")
    }
}
```

View プロトコルを実装するコードでカスタムなビューを作成できる。
body プロパティに表示内容と動作を記述する。

[View \- SwiftUI \| Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/view)

> You create custom views by declaring types that conform to the View protocol. Implement the required body computed property to provide the content and behavior for your custom view.

[body \- View \| Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/view/3278523-body)

> The content and behavior of the view.

## 地図を表示してみる

もう少しコンテンツを増やしたサンプルとして地図表示機能を作ってみる。

<img width="1000" alt="swiftui-hello-world-4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/4afedd34-6bab-a408-95fb-cb5d1072c902.png">

```swift
import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        // VStack で縦に配置
        VStack(alignment: .center) {
            Text("日本のへそ")
                .font(.title)
                .foregroundColor(.blue)
            Text("兵庫県西脇市")
                .font(.subheadline)
            // HStack で横に配置
            HStack {
                Text("北緯35度")
                    .font(.subheadline)
                Spacer()
                Text("東経135度")
                    .font(.subheadline)
            }
            // 自分で定義した MyMapView を配置
            MyMapView()
                .frame(height: 200)
        }
    }
}

// 地図を表示する MyMapView を定義
// UIViewRepresentable を使うことで
// UIKit の UIView を SwiftUI で使えるように橋渡しできる
struct MyMapView: UIViewRepresentable {

    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(latitude: 35, longitude: 135)
        let span = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}
```

## ビューとコントロール

SwiftUI で配置できる基本的なビューとコントロールについては [Views and Controls \| Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/views_and_controls) に載っている。
Text、Image、Button、NavigationLink、MenuButton、PasteButton、Toggle、Picker、DatePicker、Slider、Stepper などがある。

## SwiftUI のチュートリアルが用意されている

[SwiftUI Tutorials \| Apple Developer Documentation](https://developer.apple.com/tutorials/swiftui) からいくつかのチュートリアルを実施できる。ソースコードと見た目を見ながら段階的にUIと機能を構築してくチュートリアルになっているのでわかりやすい。

直近のチュートリアルは以下のようになっている。

- [Creating and Combining Views](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views)
- [Building Lists and Navigation](https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation)
- [Handling User Input](https://developer.apple.com/tutorials/swiftui/handling-user-input)
- [Drawing Paths and Shapes](https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes)
- [Animating Views and Transitions](https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions)
- [Composing Complex Interfaces](https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces)
- [Working with UI Controls](https://developer.apple.com/tutorials/swiftui/working-with-ui-controls)
- [Interfacing with UIKit](https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit)
- [Creating a watchOS App](https://developer.apple.com/tutorials/swiftui/creating-a-watchos-app)

## 参考資料

- [Xcode \- SwiftUI \- Apple Developer](https://developer.apple.com/jp/xcode/swiftui/)
- [SwiftUI Tutorials \| Apple Developer Documentation](https://developer.apple.com/tutorials/swiftui/)
- [SwiftUI \| Apple Developer Documentation](https://developer.apple.com/documentation/swiftui)
- [Views and Controls \| Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/views_and_controls)
- [UIViewRepresentable \- SwiftUI \| Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/uiviewrepresentable)
- [MKMapView \- MapKit \| Apple Developer Documentation](https://developer.apple.com/documentation/mapkit/mkmapview)