swiftUIでiPhoneアプリをつくろう〜超基本的なコードの書き方

2024年6月12日 14:33

SwiftUIを使ってスマホアプリのUIを作成する方法について、初心者向けに簡単に説明します。SwiftUIはAppleが提供するフレームワークで、少ないコードで美しいUIを作成できるのが特徴です。以下に、基本的な書き方をステップバイステップで説明します。

1. プロジェクトの作成

Xcodeを起動: XcodeはAppleの公式開発ツールです。
新規プロジェクトを作成: 「Create a new Xcode project」を選び、「App」を選択します。
プロジェクト名の入力: 「Product Name」にプロジェクト名を入力し、「Language」は「Swift」を、「User Interface」は「SwiftUI」を選択します。

2. 基本的なレイアウト

SwiftUIでは、画面を「ビュー（View）」と呼ばれるパーツで構成します。これらのビューはコンテナに配置され、UIを組み立てます。最も基本的なビューは `Text` です。

`Text` の使用例:

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.blue)
            .padding()
    }
}

`Text("Hello, SwiftUI!")`：文字列を表示します。
`.font(.largeTitle)`：文字のサイズを大きくします。
`.foregroundColor(.blue)`：文字の色を青にします。
`.padding()`：文字の周りに余白を追加します。

3. コンテナビュー

複数のビューをまとめて配置するためにコンテナビューを使います。代表的なものに `VStack` と `HStack` があります。

`VStack` の使用例（縦方向にビューを並べる）:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
            Text("Welcome to SwiftUI")
                .font(.subheadline)
        }
        .padding()
    }
}

`HStack` の使用例（横方向にビューを並べる）:

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

4. イメージの追加

画像を表示するには `Image` ビューを使用します。

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star.fill")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 100, height: 100)
                .foregroundColor(.yellow)
            Text("SwiftUI Star")
                .font(.title)
        }
        .padding()
    }
}

`Image(systemName: "star.fill")`：システムのアイコンを表示します。
`.resizable()`：画像のサイズを変更可能にします。
`.aspectRatio(contentMode: .fit)`：アスペクト比を維持します。
`.frame(width: 100, height: 100)`：サイズを指定します。
`.foregroundColor(.yellow)`：画像の色を黄色にします。

5. ボタンの追加

ボタンは `Button` を使って追加します。

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Button tapped!")
            }) {
                Text("Tap Me!")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

`Button(action: { ... }) { ... }`：ボタンを作成し、タップされた時のアクションを指定します。
`.background(Color.blue)`：背景色を青にします。
`.cornerRadius(10)`：角を丸くします。

6. 入力フィールド

テキスト入力フィールドを追加するには `TextField` を使用します。

struct ContentView: View {
    @State private var name: String = ""
    
    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Text("Hello, \(name)!")
                .font(.largeTitle)
        }
        .padding()
    }
}

`@State private var name: String`：入力されたテキストを保持するための状態変数。
`TextField("Enter your name", text: $name)`：入力フィールドを作成し、ユーザーの入力を `name` にバインドします。

7. ナビゲーション

画面遷移をするには `NavigationView` と `NavigationLink` を使います。

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("Home")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
            .font(.largeTitle)
    }
}

`NavigationView`：ナビゲーションコントローラのようなコンテナ。
`NavigationLink(destination: DetailView()) { ... }`：他のビューへのリンク。

まとめ

SwiftUIを使えば、宣言的なコードでUIを簡単に構築できます。基本的な要素を組み合わせて、より複雑なレイアウトやインタラクションを実装していくことができます。実際に手を動かしながら、各ビューや修飾子の使い方に慣れていくと良いでしょう。