【第1回】SwiftUIアプリ開発に役立つ！知っておくべきコンポーネント紹介

どうも！末広です。

前回の記事(SwiftUIでよく使うStackの基本！アプリ開発で役立つ使い方を解説 | Free Life)でStackがレイアウトを作るのに大切というお話をしましたが、そもそも他にもたくさん大切なのあるんじゃない？
その通り…。
ということで、SwiftUIを使ってアプリ開発を始めたばかりの皆さん、あるいはもっと深く理解したいと思っている皆さんへ。
今回は、SwiftUIアプリ開発に欠かせない基本コンポーネントについてお話しします。
SwiftUIは、シンプルで分かりやすい記述スタイルが魅力のUIフレームワークですが、使いこなすにはいくつかのポイントがあります。
この記事を読めば、効率よくUIを組み立てるための重要なコンポーネントをバッチリ押さえられますよ！

1. Text：文字を表示するための基本コンポーネント

最初にご紹介するのは、アプリのUIに必ずと言っていいほど登場するTextです。
「この画面に何か表示したい！」と思ったら、まずはTextを使ってみましょう。

Text("こんにちは、SwiftUI!")
    .font(.title)
    .foregroundColor(.blue)

font：文字サイズやスタイルを指定できます。.titleや.bodyなどのプリセットが便利です。
foregroundColor：文字の色を指定します。カスタマイズしたいときに使いましょう。

Textはシンプルながらも、スタイルを工夫することでアプリにインパクトを与えられます。

2. Image：画像を表示するコンポーネント

次に、画像を表示するためのImageコンポーネントです。
アプリの見た目を豊かにするために、画像は欠かせませんよね。

Image("profile_picture")
    .resizable()
    .frame(width: 100, height: 100)
    .clipShape(Circle())

resizable：画像のサイズを変更可能にします。デフォルトでは画像のサイズは変更できないので注意！
frame：画像のサイズを指定します。
clipShape：画像の形を指定できます。この例では丸くしています。

Imageコンポーネントを上手に使えば、デザイン性の高いUIが作れますよ。

3. Button：ユーザーの操作を受け付けるボタン

Buttonは、ユーザーが操作できるボタンを作るためのコンポーネントです。
アプリにアクションを加えたいときに便利です。

Button(action: {
    print("ボタンが押されました！")
}) {
    Text("クリックしてね")
        .padding()
        .background(Color.green)
        .foregroundColor(.white)
        .cornerRadius(8)
}

action：ボタンが押されたときに実行するコードを記述します。
padding：ボタンに余白を加えてクリックしやすくします。
background：ボタンの背景色を指定します。
cornerRadius：角を丸くして見た目を整えます。

Buttonは、アプリの操作性を高めるために欠かせないコンポーネントです。
デザインも自由にカスタマイズできますよ！

4. TextField：ユーザーが入力できるテキストボックス

フォームや検索機能を作るときに役立つのがTextFieldです。
ユーザーからテキストを入力してもらいたいときに使います。

@State private var userInput = ""

TextField("ここに入力してください", text: $userInput)
    .padding()
    .textFieldStyle(RoundedBorderTextFieldStyle())

@State：TextFieldの入力を保持するために使います。入力内容をリアルタイムで更新できます。
textFieldStyle：TextFieldのスタイルを指定します。RoundedBorderTextFieldStyle()を使うと、角の丸いテキストボックスになります。

TextFieldは、入力内容を管理するために**@State**を使うことがポイントです。
これでユーザーの入力を簡単に扱えます！

5. List：リスト表示に便利なコンポーネント

Listは、データをリスト形式で表示したいときに使います。
たくさんの情報を整理して見せるのにとても便利です。

List {
    Text("アイテム1")
    Text("アイテム2")
    Text("アイテム3")
}

このように、複数の要素を簡単にリスト化できます。
さらに、ForEachを使って動的なリストも作れます。

let items = ["アイテム1", "アイテム2", "アイテム3"]

List(items, id: \.self) { item in
    Text(item)
}

Listは、データを見やすく整理するのに役立つので、頻繁に使うコンポーネントの一つです。

6. VStack、HStack、ZStack：レイアウトを整える

前回やったStackですね。
SwiftUIのレイアウトの要となるのがVStack、HStack、ZStackです。
これらのStackを使って、要素を並べたり重ねたりして自由にレイアウトできます。

VStack：要素を縦に並べます。
HStack：要素を横に並べます。
ZStack：要素を重ねて配置します。

VStack {
    Text("上のテキスト")
    Text("下のテキスト")
}

HStack {
    Text("左のテキスト")
    Text("右のテキスト")
}

ZStack {
    Image("背景画像")
    Text("重ねたテキスト")
        .foregroundColor(.white)
}

Stackをうまく使えば、複雑なUIも簡単に作れます。
組み合わせて活用することで、アプリの見た目がぐっと引き締まりますよ！