[SwiftUI] プロジェクトの新規作成とHello Worldの変更

Xcode11からSwiftUIがつかえるようになりました。最初のプロジェクト作成とSwiftUIのCanvasをざっくり見てみましょう。

Swift 5.1
Xcode 11.1

SwiftUI

　
最初は、SwiftUI Essentials の Creating and Combining Views の内容に沿った形でどんなものか見てみます。
　

目次
1. Projectの作成
2. Hello World
3. Textの変更
4. ビルド＆実行

Projectの作成

　
Xcode を起動：
「Finder」が画面下に通常はありますので、それを起動すると、「アプリケーション」フォルダのリストにXcode があります。ここに色々なアプリを入れて置くところです。
　

　
それをダブルクリックで「Welcome to Xcode」が現れます。あるいは何も表示されない事もありますが、基本的には Mac の場合はメニューは画面の上にあります。

「Create a new Xcode project」をクリックしてプロジェクトを新規に作成します。

あるいはメニューから
「File」「New」「Project…」を選択
　
　

　
Template の選択ウィンドウが出てきます

「iOS」「Single View App」

を選び「Next」とします。他のテンプレートはいずれ使うかもしれませんが最初は「Single View Application」で始めましょう
　

　
プロジェクトのタイトルなどの設定をします。

Product Name	TestApp001 などのプロジェクト名
Team	Xcodeで生成できます。これが設定されていないとエラーになります。
Organization Name	任意の名前
Organization Identifier	下の Bundle Identifier が決まるため公開を前提にする場合は注意して選びますが、公開しない場合は適当で大丈夫です。
Language	開発言語は Swift か Objective-C を選びます。尚、Objective-Cは昔の言語で新規で使うことは無いでしょう。
User Interface	SwiftUI か Storyboard を選択します

SwiftUI or Storyboard

2019年に新しくできたInterfaceです。以前はStoryboardを使っていましたが、10月上旬現在これを解説する本もなければネット情報も限られています。ただ今後はこれが本格的になるでしょう、簡単にコーディングとレイアウトができるようです。近々にアプリを仕上げる予定があるのであればネット情報を調べて今までのStoryboardでの方法で完成させる方が現実的かもしれません。

プロジェクトの保存先を聞いてきますので適当な場所を指定します
　
Team がNoneだとStatusがエラーとなります。
登録したApple ID名をTeamに入れます。プルダウンで候補が出てきます。（Apple IDの登録が必要です）
　

Hello World

　
MacのOSは macOS Catalina にします。（Mojaveでは一部できない機能があります）

プロジェクトを作成しただけですが既にHello Worldを表示させるコードが記述されています。

この画面にならない場合は左の「Project navigator」にある ContentView.swift をクリックします。

コードが書かれているEditorの隣がCanvasになります。

これはCatalinaにしないと使えません。またCanvasが無い場合はメニューから「Editor」「Canvas」を選択しても表示できます。

Canvasには「Automatic preview updating paused」となっているので「Resume」をクリックして再開してみます。

すると Hello World が表示されました。
最初は大きすぎるので、下にある100%のサイズから+/-を使って縮小させて50%にしました。

Textの変更

　
このコードとプレビューが連動しているのを確認してみましょう。

Source Editor:

“Hello World” を “こんにちは” に変更してみます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("こんにちは")
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Text("こんにちは")

}

　
実際に変更がリアルタイムにPreviewに反映しているのが分かると思います。
　

　

Inspector:
今度は逆にPreviewの文字を選択します。
Utility Areaが現れるのでテキストを SwiftUI に変更してみます。

Previewがそれに応じてリアルタイムで変更されています。

またコードも同じく変更されました。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("SwiftUI")
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Text("SwiftUI")

}

Preview:
commandキーでPreviewの文字をクリックするとダイアログが表示され
「Show SwiftUI Inspector」をクリック

Textを編集するダイアログになりここから編集することができます。

ビルド＆実行

　
今までのように出来上がったアプリを Simulator で確認してみましょう。
　
Xcode の左上にある三角印とその右側の iOS Simulator を見てください
Simulator を「iPhone xx」に設定して三角印をクリックします
　

　
Simulator が立ち上がります。
「Window」から「Physical Size」を選ぶと多少サイズを小さくすることもできます。
また「Show Device Bezels」にチェックするとスマホの枠が一緒に表示されます。
　

SimulatorでもPreviewと同じようになりました。