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

先生と生徒の会話形式で理解しよう

生徒

「iPhoneアプリを作るときに、画面に文字やボタンを置きたいんですが、どうすればいいですか？」

先生

「良いですね。iOSアプリ開発ではSwiftというプログラミング言語を使います。そして画面に置く部品を『UI部品』と呼びます。例えば、押すと動作するボタンや、入力できるテキスト欄などがあります。」

生徒

「UI部品って具体的にどんなものがあるんですか？」

先生

「代表的なものとして、Button（ボタン）、Label（文字表示）、TextField（文字入力）があります。今日はこの3つを使ってみましょう。」

1. SwiftのUI部品とは？

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

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

2. Button（ボタン）の基本

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

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


import SwiftUI

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

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


ボタンが押されました

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

3. Label（ラベル）の基本

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


import SwiftUI

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

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

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を組み合わせてみよう

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()
        }
    }
}

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