SwiftUIでいこう！- スタンフォード大学に学ぶ。 - Lecture 1

2021年版が公開されているのででザッとやっていきたいと思います。神経衰弱ゲーム作りが題材となっていてSwiftUIで説明されています。

Lecture1：今回作るゲームの内容とXcodeの全体的な使い方を解説していき、大まかな流れを理解していく感じです。使うソフトはXcode12.5beta3版で新しいプロジェクトを作っていき、その内容についての講義になっています。シミュレーターで確認しながら、インスペクタでの数値の入力、昨日の追加等の操作でのリアルタイム表示も確認しています。

Xcodeで新規プロジェクトを作ってできたファイルについて解説です。

MemorizeAppとプロジェクト名を指定しているので、ファイルは

MemorizeApp.swift
ContentView.swift
Assets.xcassets
Info.plist

が自動で作成されているので、各種設定をして使えるようにしていきます。

MemorizeApp.swift

import SwiftUI

@main
struct MemorizeApp: App {
   var body: some Scene {
       WindowGroup {
           ContentView()
       }
   }
}

新規プロジェクト名で"MemorizeApp"の部分が変わりますが、その他の部分は変わりません。@mainで定義され、最初に呼び出されるファイル、設定が起動時に最初に読み込まれます。最初にしてされているのは

ContentView()

となっています。新規プロジェクトを作って最初に起動する場合はContentView()が呼び出されます。

ContentView.swift

import SwiftUI

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


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

この画面で大事なところは

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

となります。以下のstruct ContentView_Previews{}についてはシミュレータを起動して内容画面をプレビューする時に必要なファイルなのでとりあえずはなくてもアプリは作成可能ということです。

var body: some View {}

で画面描画を行います。このば場合は

 Text("Hello, world!")
           .padding()

の命令。"Hello, world!"という文字を表示しなさいというText()の命令に.padding()という少し文字の周りに空間を開けなさいという命令が付け加えられています。命令を"."ドットで繋げています。この形は今後たくさん出てきます。命令を繋げてより細かい命令としていきます。

Assets.xcassets

ここではアプリで使う写真、画像を置いておく場所です。アイコンを置く場所でもあります。

Info.plist

ここでは各種設定をすることができます。セキュリティ関係の設定もここで行います。

それではSwiftUIでコードを打っていきます。

import SwiftUI

インポートします。

SwiftUIの基本の形に ZStack{}を使って重ねていきます。重ねるものは角丸四角RoundedRectangle()、とテキストText()です。

ZStack{
RoundedRectangle(cornerRadius: 25.0)
　　.stroke(lineWidth: 3)
Text("Hello").foregroundColor(.blue)
}

あとは修飾していきます。

.padding(.horizontal)
.foregroundColor(.red)

全体です。

import SwiftUI

struct ContentView: View {
   var body: some View {
       
       ZStack{
           RoundedRectangle(cornerRadius: 25.0)
               .stroke(lineWidth: 3)
           Text("Hello").foregroundColor(.blue)
       }
       .padding(.horizontal)
       .foregroundColor(.red)

   }
}