【SwiftUI】@State変数に値を渡してみよう

2025年1月22日

ほりうち

この記事では、Swift5.10およびXcode 15.4における、@State変数に値を渡す方法について、サンプルコードを交えながら説明しております。
初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

この記事を読んで分かること…
・@State変数に値を渡す方法

実行環境

・実行環境：SwiftUI + Xcode
・Swift：5.10
・XCode：15.4
・サンプルコードの実行確認日：12月31日(火)

＠State変数とは？

概要

@frozen @propertyWrapper
struct State<Value>

@State変数とは値を読み書きできるプロパティラッパーです。

サンプルコード

import SwiftUI

struct BlogView: View {
    @State private var message: String = ""

    var body: some View {
        VStack {
            Button("Tap Me!") {
                message = "Hello"
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)

            Text(message)
                .font(.largeTitle)
                .foregroundColor(.purple)
        }
        .padding()
    }
}


#Preview {
    BlogView()
}

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: BlogViewという名前の構造体を定義します。View型を継承します。
◾️行 3: @Stateを付けて変数の値の状態変更を監視します。またprivate修飾子をつけることで、他のファイルからのアクセスを制限します。String型のmessageという変数を定義します。
◾️行 5: VStackを宣言します。
◾️行 6-8: Buttonを宣言します。クロージャーの中で messageにHelloを代入します。
◾️行 9: ボタンの背景色を青色にします。
◾️行 10: ボタンの文字色を白色にします。
◾️行 11: 角丸を8にします。
◾️行 13: messageを表示するためのTextを宣言します。fontを.largeTileに設定し、文字色をpurpleにします。
◾️行 14: 余白を設定します。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。