SwiftUI入門-勉強メモ001-【シンプルなアプリ】

Flutterの基礎がある程度固まってきたので, 今回からはSwiftUI関係の記事をあげていきます. Flutterへの興味を失ったわけではありません. また, Flutter関係の記事も今後あげていきます.

今回はSwiftUIで簡単なアプリ(というかテキストを出力するだけ)を作成していきます.

環境は,

  • macOS Catalina 10.15.6
  • Xcode 12.0
  • Swift 5.3
  • iOS 14.0

です.

Xcodeを立ち上げ, Create a new Xcode projectを選択します.

SwiftUI

今回はシンプルなアプリですので, 「iOS」の「App」を選択し「Next」をクリックします.

SwiftUI
この画像はmacOS

次は, Choose options for your new projectで初期設定です. App Storeに公開するときなどはちゃんと設定する必要がありますが, ここではシュミレータで動かすだけですので, 迷うことはありません.

  • Product Name:このアプリの名前. 好きな名前で構いません.
  • team:開発者の氏名や企業名. 実機で実行する場合はちゃんと設定する必要がある. 今回は「None」のまま.
  • Organization Identifier:バンドル識別子の指定. 今回は初期設定の「jp.co.exsample」のままで構いません. App Storeにリリースする場合は一意に設定する必要があります.
  • Interface:インターフェイスはSwiftUIを選択. この他にもStoryBoardがあります.
  • Life Cycle:SwiftUI Appを選択.
  • Language:開発言語はSwiftを選択.
  • Use Core Data:データベースを使うかどうか. 今回はチェックをオフにします.

プロジェクトの保存先を決定します. これも好きな場所で構いません. Source Controlは「Xcodeでgitによるバージョン管理等を行う」場合につけます. 今回はチェックの必要はありません.

SwiftUI

「Create」をクリックして, プロジェクトを作成すると, 以下のような画面が起動します. これはXcodeのデフォルトの開発画面です.

SwiftUI
XcodeのテーマをDuskにしているため, ソースコード部分は黒くなっています.

初めから, 以下のような多くのコードが書かれています.

import SwiftUI

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

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

このコードは, 下の①と②の2つに分かれています.

SwiftUI

①の部分は, ContentView構造体でこちらで画面のレイアウトを構成しています. SwiftUIではClassではなく基本は構造体(Structure)を使うようです. 継承がある場合はClassを使うのでしょう.

①の1行目の「View」はプロトコルです. この構造体を生成する上でこのViewプロトコルの約束事を守る必要があります.

CotentViewのプロパティの1つであるbody部分で画面に表示される部品を記述していきます. Flutterでいうとhomeに相当するものです.

bodyには型としてsome viewが指定されていますが, Viewプロトコルを実装する型であれば他のものでも使えます. 実際, 意味があるか分かりませんが, ①の部分を

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

と書き換えてもコードは動きます. (.padding()は取らないとダメです.)

また「some」はSwift5.1から実装されたキーワードで不透明型を返り値として返す場合に使用します. Viewで扱えるものであれば何でも良いという意味があるのでしょうか. これがないとエラーになります.

自動生成されたコードはテキストのみで「Hello, World!」が表示されます. その下の「.padding()」は周囲の余白を取るもので, この部分はFulutterと同じです.

②の部分はContentView_Previews構造体で, ここでプレビューを実装しています. この部分を削除すると「Resume」ボタンを押しても何にも反応しなくなります. (画面を表示させたい場合, ビルトしてシュミレータで表示させると見ることができます.)

極端な話, プレビューせずに毎回シュミレータで起動させるのであればいらなくなります. ただ, UI部品も動かせないし, ビジュアルに頼ることができなくなるので, SwiftUIの良さがなくなりますね. 笑.

このコードをキャンバスにプレビューさせるためには右上の「Resume」ボタンを押します.

SwiftUI

すると, 以下のようにプレビューが表示されます. このResumeボタンはStoryboardにはなかったもので, Flutterと似ています. このFlutterで言うところのHot Reload機能がSwiftUIの1つの魅力です.

SwiftUI

シュミレータで実行したい場合は, 左上の▶︎ボタンを押します.

SwiftUI

右のところでどのシュミレータで実行するか選べます. この画面では「iPod touch(7th generation)」で実行されることになります.

参考までにiPhone11のシュミレータで実行すると以下のようになります.

SwiftUI

表示されたテキストを変更するには, コードを直接変更するか, 右側にある「インスペクタパネル」のtext部分を変更します. どちらでも同じです.

SwiftUI

インスペクタパネルではそのオブジェクトが持つさまざな属性を変更することができます. (Modifiersと呼ばれています.) Textであれば文字のフォントの大きさ, 色などを変更することができます.

SwiftUI

コメント

コメントする

目次
閉じる