【Xcode】SwiftUIのサンプルプログラムをビルドする

はじめに

iOS用のアプリを作成するためのIDEにXcodeがあります。
本記事ではその中でもSwiftUIを利用してサンプルアプリケーションをシミュレータにビルドする流れをメモしました。

環境情報

• Mac OS X : 10.15.4
• XCode : 11.4.1

SwiftUIとは？

SwiftUIでは、Swiftを利用してすべてのAppleプラットフォーム向けのユーザーインターフェイスを、革新的かつ極めてシンプルに構築することができます。1セットのツールとAPIを使用するだけで、あらゆるAppleデバイス向けのユーザーインターフェイスを構築できます。読みやすく自然に記述できる宣言型Swiftシンタックスにより、SwiftUIは新しいXcodeのデザインツールとシームレスに連携し、コードをデザインと完全に同期させます。

と公式ページにある通りSwiftUIはSwift言語で使用できるフレームワークです。

Xcodeでの開発画面配下のようにコードとプロパティを確認するところが連動しています。

右側でボックスの中の文字列を編集すると右側のソースコートが修正される

Xcodeでプロジェクトを作成する

プロジェクトを新規作成し、以下のようにシングルビューアプリを選択します。

Single View App

　　
任意のプロジェクト名を記載し、LanguageにSwift、User InterfaceにSwiftUIを選択すれば以下のようなファイル群が作成されます。

.
├── Test
│   ├── AppDelegate.swift
│   ├── Assets.xcassets
│   │   ├── AppIcon.appiconset
│   │   │   └── Contents.json
│   │   └── Contents.json
│   ├── Base.lproj
│   │   └── LaunchScreen.storyboard
│   ├── ContentView.swift
│   ├── Info.plist
│   ├── Preview\ Content
│   │   └── Preview\ Assets.xcassets
│   │       └── Contents.json
│   └── SceneDelegate.swift
├── Test.xcodeproj
│   ├── project.pbxproj
│   ├── project.xcworkspace
│   │   ├── contents.xcworkspacedata
│   │   ├── xcshareddata
│   │   │   └── IDEWorkspaceChecks.plist
│   │   └── xcuserdata
│   │       └── etsuko.xcuserdatad
│   │           └── UserInterfaceState.xcuserstate
│   └── xcuserdata
│       └── etsuko.xcuserdatad
│           └── xcschemes
│               └── xcschememanagement.plist
├── TestTests
│   ├── Info.plist
│   └── TestTests.swift
└── TestUITests
    ├── Info.plist
    └── TestUITests.swift

ちなみにContentView.swiftの中身は以下で「HelloWorld」を変更すれば画面に表示される文字列も変化します。

import SwiftUI

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

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

Product > Build For > Running
を選択すると以下のようにシミュレータウィンドウにてHelloWorldの文言が確認できます。

サンプルアプリ

終わりに

サンプルアプリケーションを動かすのみですが今後アプリを作成するための知見を溜めていきます。