Button ― タップに反応する

導入

アプリは「触ると反応する」もの。その主役が Button です。押されたときにやりたいことを書けます。

説明

Button("ラベル") { 押されたときの処理 } で作ります。{ ... } の中はクロージャ（第4章）で、タップされると実行されます。

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("ふつうのボタン") {
                print("タップされた")
            }
            Button("目立つボタン") {
                print("重要な操作")
            }
            .buttonStyle(.borderedProminent)

            Button {
                print("アイコンボタン")
            } label: {
                Label("お気に入りに追加", systemImage: "star.fill")
            }
        }
        .padding()
    }
}

.buttonStyle(.borderedProminent) を付けると、塗りつぶしの目立つボタンになります（.bordered は枠付き）。ラベルにアイコンを使いたいときは、Button { 処理 } label: { ... } の形でViewを組み合わせられます。

次の章では、このボタンで 画面の状態を変える（数を増やす・表示を切り替える）方法を学びます。そこからアプリが「動く」ようになります。

やってみよう

プレビューのボタンを実際にタップしてみましょう。.buttonStyle(.borderedProminent) を別のボタンに付けたり外したりして、見た目の違いを確かめてください。

演習

「送信」というラベルのボタンを1つ作り、.buttonStyle(.borderedProminent) で目立たせて表示してください。