完全に理解する Storyboard & UIKit (Day 11): 基本的なUI部品（UILabel, UIButton, UITextField）

ここから始まる第3部では、画面上に配置される具体的なUIコンポーネントの使い方を深掘りします。 初回は、どんなアプリにも必ず存在する3つの基本ビュー UILabel, UIButton, UITextField に焦点を当てます。

1. UILabel (テキストの表示)

UILabel は、ユーザーが編集できない静的なテキストを表示するためのビューです。

Storyboard (Attributes Inspector) での主な設定

• Text: 表示する文字列。「Plain（単一スタイル）」と「Attributed（装飾付き）」が選べます。
• Color / Font: 文字色とフォント。FontはSystemフォントだけでなく、Customフォントも指定可能です。
• Lines: 表示する最大行数。0 に設定すると、テキストの長さに応じて何行でも表示されるようになります（超重要）。
• Line Break: テキストが枠に収まらない場合の省略方法（末尾を ... にするなど）。

コードからの操作 (IBOutlet)

swift
@IBOutlet weak var titleLabel: UILabel!

override func viewDidLoad() {
    titleLabel.text = "ようこそ！"
    titleLabel.textColor = .systemBlue
    titleLabel.font = UIFont.boldSystemFont(ofSize: 24)
}

2. UIButton (ユーザーアクションのトリガー)

UIButton は、ユーザーのタップ操作を受け取り、何らかのアクションを実行するためのビューです。 iOS 15からボタンのスタイル定義が大きく刷新されました。

iOS 15以降のボタン構成 (Configuration)

Attributes Inspectorの上部にある Style で、以下のモダンなスタイルを選択できます。

• Plain: 背景色なし。
• Gray: 薄いグレーの背景色。
• Tinted: アクセントカラー（Tint Color）を薄くした背景色。
• Filled: アクセントカラーで塗りつぶされた背景色（一番目立つ）。

Storyboardでの主な設定

• Title / Subtitle: ボタンのテキスト。
• Image: ボタンに添えるアイコン（SF Symbolsなど）。
• Placement: アイコンをテキストの上下左右どこに配置するか。
• Corner Style: 角丸の形状（Capsuleにすると完全な丸角になります）。

コードからの操作 (IBAction)

Storyboardからコードへ Control+ドラッグ し、Action として接続します。

swift
@IBAction func loginButtonTapped(_ sender: UIButton) {
    print("ログインボタンが押されました")
    // ボタンを一時的に無効化する
    sender.isEnabled = false
}

3. UITextField (1行のテキスト入力)

UITextField は、パスワードやメールアドレスなど、ユーザーに短いテキスト（1行）を入力させるためのビューです。

Storyboardでの主な設定

• Placeholder: 入力前に薄く表示されるヒントテキスト（例：「メールアドレスを入力」）。
• Border Style: 枠線のスタイル。通常は一番右の角丸枠（Rounded Rect）を使います。
• Clear Button: 入力中に右端に表示される「×」ボタン。Appears while editing（編集中のみ表示）が便利です。

Keyboard / Text Input Traits (超重要設定)

テキスト入力のUXを左右する設定です。

• Content Type: Email Address や Password 等を設定しておくと、システムがキーボード上部で自動入力（AutoFill）を提案してくれます。
• Keyboard Type: 数字専用（Number Pad）、メール入力用（Email Address）など、用途に合わせたキーボードを指定します。
• Return Key: キーボード右下の青いボタンの文字（Done, Search, Next など）を変更します。
• Secure Text Entry: パスワード入力用に、入力文字を ●●● で隠すかどうかの設定です。

コードからのデータの取得

swift
@IBOutlet weak var emailTextField: UITextField!

@IBAction func submitButtonTapped(_ sender: UIButton) {
    // ユーザーが入力したテキストを取得（オプショナル型なのでアンラップが必要）
    if let email = emailTextField.text, !email.isEmpty {
        print("入力されたアドレス: \(email)")
    } else {
        print("未入力です")
    }
}

📝 今日のまとめ

• UILabel: テキスト表示用。複数行表示したい場合は Lines を 0 にする。
• UIButton: タップアクション用。iOS 15以降の Style (Filled等) を使うとモダンな装飾が簡単にできる。
• UITextField: 1行の文字入力用。UX向上のため Keyboard Type や Content Type を適切に設定する。

基本的な部品の使い方がわかりました。 しかし、UITextFieldを使っていて「キーボードをどうやって閉じるのか？」という壁に必ずぶつかります。 明日の Day 12 では、複数行入力の UITextView とともに、iOS開発初心者が最初につまずく「キーボードのハンドリング」について学びます。