(O+P)ut

アウトプット



(O+P)ut

エンジニアのアウトプット

【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での開発画面配下のようにコードとプロパティを確認するところが連動しています。

f:id:mtiit:20200421204013p:plain
右側でボックスの中の文字列を編集すると右側のソースコートが修正される

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

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

f:id:mtiit:20200420220511p:plain
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の文言が確認できます。

f:id:mtiit:20200420221138p:plain
サンプルアプリ

終わりに

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


他の記事を読む