完全に理解する Storyboard & UIKit (Day 22): UIAlertControllerによるアラートとアクションシート

「データの削除前に確認したい」「カメラを起動するか、アルバムを開くか選択させたい」 アプリ開発では、メインの画面遷移とは別に「ユーザーへ注意を促す」あるいは「選択肢を提示する」ための一時的なポップアップUIが不可欠です。

UIKitでは、これらを全て UIAlertController という単一のクラスで表現します。これはStoryboardを使わず、完全にコードのみで生成・表示 します。

1. UIAlertController の2つのスタイル（Style）

UIAlertController には表示形式を決める .preferredStyle が2種類あります。

1. .alert (アラート)
   • 画面の中央に表示されるダイアログです。
   • 「はい / いいえ」の確認や、エラーメッセージの表示など、ユーザーに短い選択文字や決定を迫る（作業を中断させる）場合に使用します。
2. .actionSheet (アクションシート)
   • 画面の下部からせり上がってくるメニューです（iPadの場合はポップオーバーになります）。
   • 3つ以上の複数の選択肢（例: 「カメラ」「ライブラリ」「キャンセル」）を並べる場合など、ユーザーにアクションを選ばせる場合に使用します。

2. アラート (.alert) の実装手順

標準的な「タイトル」「メッセージ」「OK/キャンセルボタン」を持つアラートを作ります。

swift
@IBAction func deleteButtonTapped(_ sender: UIButton) {

    // 1. コントローラーの初期化（スタイルは .alert）
    let alert = UIAlertController(title: "データ削除",
                                  message: "本当にこのデータを削除してもよろしいですか？この操作は取り消せません。",
                                  preferredStyle: .alert)

    // 2. ボタン（Action）を作成する
    // OKボタン（style: .destructive にすると文字が赤くなり警告を意味する）
    let deleteAction = UIAlertAction(title: "削除する", style: .destructive) { (action) in
        // OKボタンが押された時の処理をここに書く
        print("データが削除されました。")
    }

    // キャンセルボタン（style: .cancel は常にアラートの左側／下側に配置され、太字になる）
    let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel) { (action) in
        print("キャンセルされました。")
    }

    // 3. コントローラーにボタンを追加する
    alert.addAction(cancelAction) // 追加する順序に注意（普通はキャンセルを先に書くと左に配置される）
    alert.addAction(deleteAction)

    // 4. アラートを画面に表示する（Present）
    self.present(alert, animated: true, completion: nil)
}

👉 UIAlertAction の Style（スタイル）

• .default: 通常の青いテキスト。
• .cancel: キャンセル用。太字になり、ActionSheetでは一番下に分離して配置されます**（必ず1つだけ追加可能）**。
• .destructive: 削除やログアウトなど、危険な操作用。赤いテキストになります。

3. アクションシート (.actionSheet) の実装手順

下からメニューがせり上がるアクションシートの作り方も、初期化のスタイルを変えるだけで基本的な流れは全く同じです。

swift
@IBAction func showMenuButtonTapped(_ sender: UIButton) {

    // スタイルを .actionSheet に変更
    let actionSheet = UIAlertController(title: "写真を選択",
                                        message: nil,  // メッセージ不要ならnil
                                        preferredStyle: .actionSheet)

    // 選択肢を追加
    let cameraAction = UIAlertAction(title: "カメラで撮影", style: .default) { _ in
        print("カメラ起動")
    }
    let libraryAction = UIAlertAction(title: "ライブラリから選ぶ", style: .default) { _ in
        print("ライブラリ起動")
    }

    // キャンセルボタン（自動的に一番下に分離してめ目立つように配置されます）
    let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel, handler: nil)

    actionSheet.addAction(cameraAction)
    actionSheet.addAction(libraryAction)
    actionSheet.addAction(cancelAction)

    // iPadでのクラッシュ対策（超重要！※後述）
    actionSheet.popoverPresentationController?.sourceView = sender
    actionSheet.popoverPresentationController?.sourceRect = sender.bounds

    // 表示
    self.present(actionSheet, animated: true, completion: nil)
}

⚠️ iPadでActionSheetを表示する際の注意点

iPhoneでは下からせり上がるActionSheetですが、iPadの広い画面では「どのボタンから吹き出し（ポップオーバー）として出現するか？」をシステムに教えてあげないと、アプリがクラッシュ（強制終了）します。

そのため、上記のコード内にあるように popoverPresentationController?.sourceView 等に対して「発生源のビュー（タップされたボタンなど）」を指定するおまじないが必須になります。

📝 今日のまとめ

• アラートとアクションシートは、共に UIAlertController を用いてコードから生成・表示（present）する。
• 中央のダイアログは .alert、下部からのメニューは .actionSheet を指定する。
• ボタンは UIAlertAction を生成して addAction で追加する。
• ボタンのスタイル（.default, .cancel, .destructive）を使い分けてUXを向上させる。
• ActionSheetを使う場合は、iPadでのクラッシュを防ぐために popoverPresentationController の設定を忘れない。

アプリ開発で絶対に避けては通れないポップアップUIをマスターしました。 明日の Day 23 では、ユーザーに「日付」や「都道府県」のような固定リストから値を選択させるコンポーネント、UIDatePicker と UIPickerView の実装方法を学びます。