Swift UI部品の使い方｜Button・Label・TextField入門

1. SwiftのUI部品とは？

1. SwiftのUI部品とは？

iOSアプリ開発では、画面に配置するパーツをUI部品（ユーザーインターフェース部品）と呼びます。UIは「User Interface」の略で、人とアプリがやりとりする仕組みのことです。例えば、アプリを開いて表示される文字、押せるボタン、入力欄などはすべてUI部品です。

Swiftでは、Appleが提供するフレームワーク「SwiftUI」や「UIKit」を使ってこれらの部品を簡単に追加できます。初心者の方が最初に触るのは「SwiftUI」が分かりやすくおすすめです。

2. Button（ボタン）の基本

2. Button（ボタン）の基本

Buttonは、ユーザーが押すことで何かの処理を実行するためのUI部品です。例えば「送信」や「開始」などの操作に使います。

SwiftUIでボタンを作る方法は次のとおりです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("押してください") {
            print("ボタンが押されました")
        }
    }
}

上記では「押してください」という文字が表示され、タップするとコンソールにメッセージが出力されます。

ボタンが押されました

スマホアプリでは、この中に「画面遷移」や「データ保存」などの処理を入れることができます。

3. Label（ラベル）の基本

3. Label（ラベル）の基本

Labelは、画面上に文字やアイコンを表示するUI部品です。ユーザーに情報を伝えるときに使います。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("設定", systemImage: "gear")
    }
}

この例では「設定」という文字と歯車アイコンが一緒に表示されます。Labelを使うとアイコン付きのわかりやすいデザインを作ることができます。

4. TextField（テキスト入力）の基本

4. TextField（テキスト入力）の基本

TextFieldは、ユーザーが文字を入力できるUI部品です。例えば名前やメールアドレスの入力フォームなどに使われます。

import SwiftUI

struct ContentView: View {
    @State private var name: String = ""

    var body: some View {
        TextField("名前を入力してください", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }
}

この例では、入力した文字がnameという変数に保存されます。@StateはSwiftUIで使う「状態を管理する仕組み」です。つまり、入力欄の内容が常に最新の値として変数に入ります。

5. Button・Label・TextFieldを組み合わせてみよう

5. Button・Label・TextFieldを組み合わせてみよう

3つのUI部品を組み合わせると、簡単なアプリが作れます。例えば、名前を入力してボタンを押すとメッセージが表示されるサンプルです。

import SwiftUI

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

    var body: some View {
        VStack {
            TextField("名前を入力してください", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button("決定") {
                message = "こんにちは、\(name)さん！"
            }

            Label(message, systemImage: "person.circle")
                .padding()
        }
    }
}

このコードを実行すると、名前を入力して「決定」ボタンを押すと、下に「こんにちは、○○さん！」と表示されます。アプリらしい動作になりますね。

6. 理解するポイント

6. 理解するポイント

ここまでで紹介したButton・Label・TextFieldは、iOSアプリ開発で最もよく使うUI部品です。プログラミング初心者にとっても理解しやすく、アプリの基礎を学ぶのに最適です。これらを自由に組み合わせれば、簡単な入力フォームやメッセージ表示アプリを作ることができます。

さらに、UI部品はデザインやレイアウトを工夫することで、見やすく使いやすいアプリを作ることが可能です。SwiftUIを使えばシンプルな記述で直感的に操作できるため、プログラミング未経験者でも始めやすいのが魅力です。