swiftUI入門

「カウンターアプリ」ボタンアクションから画面遷移を実装

 
Contents
  1. ContentView
  2. 解説
  3. まとめ

ContentView

import SwiftUI
import FirebaseAuth

struct ContentView: View {
    @State private var count = 0  // 状態変数
    @State private var isLoggedIn = false
    @State private var email = ""
    @State private var password = ""
    @State private var isShowingDetailView = false
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                if isLoggedIn {
                    Text("カウンター: \(count)")
                        .font(.largeTitle)
                        .padding()
                    
                    HStack {
                        Button(action: { count -= 1 }) {
                            Text("−")
                                .font(.largeTitle)
                                .frame(width: 80, height: 80)
                                .background(Color.red.opacity(0.7))
                                .foregroundColor(.white)
                                .clipShape(Circle())
                        }
                        
                        Button(action: { count += 1 }) {
                            Text("+")
                                .font(.largeTitle)
                                .frame(width: 80, height: 80)
                                .background(Color.blue.opacity(0.7))
                                .foregroundColor(.white)
                                .clipShape(Circle())
                        }
                    }
                    
                    NavigationLink("詳細画面へ", destination: DetailView())
                        .padding()
                    
                    Button("ログアウト") {
                        logout()
                    }
                    .padding()
                } else {
                    VStack {
                        TextField("Email", text: $email)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .padding()
                        SecureField("Password", text: $password)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .padding()
                        Button("ログイン") {
                            login()
                        }
                        .padding()
                    }
                }
            }
            .navigationTitle("カウンターアプリ")
        }
    }
    
    func login() {
        Auth.auth().signIn(withEmail: email, password: password) { result, error in
            if error == nil {
                isLoggedIn = true
            }
        }
    }
    
    func logout() {
        do {
            try Auth.auth().signOut()
            isLoggedIn = false
        } catch {
            print("ログアウトに失敗しました: \(error.localizedDescription)")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("これは詳細画面です")
            .font(.largeTitle)
            .padding()
    }
}

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

解説

このコードはSwiftUIを使ったシンプルなカウンターアプリで、Firebase Authenticationによるログイン機能と、画面遷移機能を備えています！
それぞれのパーツを詳しく解説しますね。✨

📱 ContentViewの構成

状態変数の定義：

@State private var count = 0
@State private var isLoggedIn = false
@State private var email = ""
@State private var password = ""
  • count: カウンターの値を保持する変数
  • isLoggedIn: ログイン状態を管理するフラグ
  • email と password: ログイン時に使用するメールとパスワード

画面レイアウト：

NavigationStack {
    VStack(spacing: 20) {
        if isLoggedIn {
  • NavigationStack: iOS 16以降で導入された新しいナビゲーション管理方法。画面遷移を行う際に使います。
  • VStack: 縦方向に要素を並べるためのコンテナ
  • if isLoggedIn: ログイン状態に応じてUIを切り替え

カウンター部分：

Text("カウンター: \(count)")
  • 現在のカウントを表示
Button(action: { count -= 1 }) {
    Text("−")
        .font(.largeTitle)
        .frame(width: 80, height: 80)
        .background(Color.red.opacity(0.7))
        .foregroundColor(.white)
        .clipShape(Circle())
}
  • Button: マイナス・プラスボタンでカウントを増減
  • clipShape(Circle()): ボタンを円形にデザイン
  • opacity(0.7): 背景色を少し透明に

画面遷移：

NavigationLink("詳細画面へ", destination: DetailView())
  • NavigationLink: ボタンを押すとDetailViewへ遷移
  • destination: 遷移先の画面を指定

ログアウトボタン：

Button("ログアウト") {
    logout()
}
  • 押すとlogout()関数が呼ばれ、Firebaseのログアウト処理を実行

🔐 ログイン画面

ログインフォーム：

TextField("Email", text: $email)
SecureField("Password", text: $password)
  • TextField: メールアドレス入力
  • SecureField: パスワード入力（文字が隠される）
  • $email / $password: 双方向バインディングで、ユーザーの入力を状態変数に反映

ログインボタン：

Button("ログイン") {
    login()
}
  • 押すとlogin()関数が呼ばれ、Firebase認証を実行

🔥 Firebase認証機能

ログイン：

func login() {
    Auth.auth().signIn(withEmail: email, password: password) { result, error in
        if error == nil {
            isLoggedIn = true
        }
    }
}
  • FirebaseのsignInを使用してメール・パスワードでログイン
  • 成功したらisLoggedInをtrueにして画面を切り替え

ログアウト：

func logout() {
    do {
        try Auth.auth().signOut()
        isLoggedIn = false
    } catch {
        print("ログアウトに失敗しました: \(error.localizedDescription)")
    }
}
  • signOut() でログアウト処理
  • 成功したらisLoggedInをfalseにしてログイン画面を表示

🏞️ 詳細画面

struct DetailView: View {
    var body: some View {
        Text("これは詳細画面です")
            .font(.largeTitle)
            .padding()
    }
}
  • シンプルな画面で「これは詳細画面です」と表示するだけ

🧪 プレビュー

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
  • Xcodeのプレビュー機能で、UIを確認するためのコード

まとめ


✅ ログイン状態によってUIが切り替わる
✅ カウンターの増減ができる
✅ 画面遷移が可能
という機能が実装されています！

おすすめ記事