SwiftUI とは

SwiftUIとは、AppleプラットフォームのアプリケーションUIを、開発言語をSwiftとした宣言型シンタックス(Declarative Syntax)で構築するUIフレームワークです。

SwiftUI同様、Apple製品のアプリケーションUIを構築するフレームワークとしてはFlutterが有名ですが、その違いを以下の表にまとめました。

	SwiftUI	Flutter
対応プラットフォーム	Appleのみ	iOS, Android, Web
IDE	Xcode	Android Studio, VS code
記述形式	宣言的シンタックス	宣言的シンタックス
開発言語	Swift	Dart, Widget
コード量	少ない	多い
拡張性	Flutterに劣る	高い

Appleプラットフォームのアプリ開発にあたって、Apple公式のフレームワークSwiftUIに注目していきます。

SwiftUI

テキスト

テキスト(Text)

テキスト

Text("<文字列>")

リンク(Link)

リンク

Link(destination: <URL>) { Text("<ラベル>") }

テキストフィールド(Text Field)&セキュアテキストフィールド(Secure Field)

↑未入力の状態(プレースホルダテキストが表示)

↑テキストフィールド。入力中の状態

↑セキュアテキストフィールド。入力中の状態

テキストフィールドとセキュアテキストフィールド

@State private var value: String = ""

// TextFieldとSecureFieldの値を同一プロパティにすることで連動が可能
TextField("<プレースホルダテキスト>", text: $value)
SecureField("<プレースホルダテキスト>", text: $value)

テキストエディタ

テキストエディタ

@State private var value: String = ""

TextEditor(text: $value)  // テキストエディタはプレースホルダテキストを標準で実装していない

ボタン

システムボタン(Button)

ボタン

Button(action: <実行メソッド>) { <ラベル> }

エディタボタン

↑エディタが非アクティブな状態

↑エディタがアクティブな状態

エディタボタン

EditButton()

スイッチ(Toggle Button)

スイッチ

@State private var flg: Bool = True

Toggle(isOn: $flg) {
    <ラベル>
}

サインインボタン(Sign In With Apple Button)

サインインボタン

import Authentication Services  // ASAuthorizationAppleIDButtonの実装に必要なパッケージ

struct SignInWithAppleButton: UIViewRepresentable {
    func makeUIView(context: Context) -> ASAuthorizationAppleIDButton {
    // ASAuthorizationAppleIDButtonはApple標準のボタンコンポーネントだが、
    // SwiftUIの標準コンポーネントとして用意されていないため、SwiftUIのViewコンポーネントとして実装する必要がある
        let button = ASAuthorizationAppleIDButton()
        return button
    }

    func updateUIView(_: ASAuthorizationAppleIDButton, context _: Context) [}
}

SignInWithAppleButton()

認証機能を実装したい場合は、[こちら]
(https://inon29.hateblo.jp/entry/2020/03/07/171915)を参照。

ピッカー

ピッカ-(Picker)

ピッカ-

Picker(selection: .<選択値プロパティ名>, label: Text(<ラベル>)) {
    Text(<ラベル>).tag(<選択値>)
}

カラーピッカー(Color Picker)

カラーピッカー

ColorPicker("<ラベル>", selection: .constant(.<既定色>))

日付ピッカー(Date Picker)

日付ピッカー

DatePicker(selection: .constant(Date()), label: { Text("<ラベル>") })

リスト

リスト(List)

リスト

List { <コンテンツ> }

ラベル(Label)

ラベル

Label("<ラベル>", systemImage: "<記号>")

セクション(Section)

セクション

Section(header: Text(<ラベル>)) {
    <コンテンツ>
}

グループ(Disclosure Group)

↑閉じた状態

↑開いた状態

アウトライン(Outline Group)

↑ListなしVer.

↑ListありVer.

アウトライン(実装が難解だったため、ソースコードを記述)

struct CityData: Identifiable {  // OutlineGroupで使用するデータはIdentifiableプロトコルに適合していなければならない
    //構造体"CityData"のプロパティはid, name, sitesの3つ
    let id = UUID()  //UUID(ユニークID)…128bitの16進数
    let name: String
    var sites: [CityData]?  // タイプメソッドresult()によって値が後から代入される

    static func result() -> [CityData] {  // タイプメソッド(静的メソッド)の定義はstaticキーワードを付加
        let city1 = [CityData(name: "Site A"), CityData(name: "Site B")]
        let city2 = [CityData(name: "Site C"), CityData(name: "Site D")]

        return [CityData(name: "city1", sites: city1),
                CityData(name: "city1", sites: city1)]
    }  // タイプメソッドによってsitesの値が以下のようになる
       // [name: city1, sites: Optional([name: site A, sites: nil], [name: Site B, sites: nil]) 
       //  name: city2, sites: Optional([name: site C, sites: nil], [name: Site D, sites: nil])]
}

struct ContentView: View {
    var body: some View {
        List {
            ForEach(CityData.result()) { city in  // CityData.sitesのname: city1, city2のそれぞれに対して以下の処理を実行
                OutlineGroup(city, children: \.sites) { site in  // CityData.sites.sitesのname: site A, site Bのそれぞれに対して以下の処理を実行
                    Text(site.name)
                }
            }
        }
    }
}

Identifiableプロトコル

public protocol Identifiable {
    associatedtype ID: Hashable  //型パラメータ(=プレースホルダ)"ID"は"Hashable"プロトコルに適合
    var id: Self.ID { get }  //プロパティ"id"は読み取り専用であり、インスタンス自身の型パラメータ"ID"に適合
}

Hashableプロトコル

public protocol Hashable{
    func hash(into hasher: inout Hasher)
    var hashValue: Int { get }

グループボックス(Group Box)

グループボックス

GroupBox(label: <ラベル>) { <コンテンツ> }

グループ

DisclosureGroup("<ラベル>") { <コンテンツ> }

フォーム(Form)

フォーム

Form { <コンテンツ> }

ビュー

ナビゲーションビュー(Navigation View), ナビゲーションリンク(Navigation Link)

↑画面遷移前

↑画面遷移後

ナビゲーションリンク

NavigationView {  //NavigationLinkはNavigationViewのスコープ内で記述
    NavigationLink(destination: <Viewプロトコルに準拠したインスタンス>) { <ラベル> }
}

進捗ビュー(Progress View)

進捗ビュー

ProgressView(value: <0~1の進捗値>)

スクロールビュー(Scroll View)

スクロールビュー

ScrollView(.<方向>) {
    VStack {   // 縦方向の場合はVStackでまとめる
        <コンテンツ>
    }
    .frame(maxWidth: .infinity)  // 対象範囲の最大化
}

スライダ(Slider)&ステッパ(Stepper)

↑スライダ

↑ステッパ

スライダとステッパ

@State private var value: Double = 0

// SliderとStepperの値を同一プロパティにすることで連動が可能
Slider(value: $value, in: 0...100)
Stepper(value: $value, in: 0...100) {
    <ラベル>
}

タブバー(Tab View)

タブバー

@State private var selection = 0 // 選択タブを保持するプロパティ

TabView(selection: $selection) {
    Text("<コンテンツ>").tabItem { Text(<ラベル>) }.tag(0)
    Text("<コンテンツ>").tabItem { Text(<ラベル>) }.tag(1)
}