【SwiftUI】alertメソッドでアラートを出す

先日リリースした私のアプリに使用した技術をひとつずつ解説しています。
私のアプリはこちら。

alertとは

下のようなアラートを出すメソッド。iPhoneを使っているといろんな場面で見かけるかと思います。

実際の動作

このように、ボタンを押すとアラートが出るサンプルアプリを作りました。こちらについて解説します。

基本的な書き方

まず、alertメソッドの基本的な書き方を説明します。

alertメソッド

.alert(isPresented: ブール値, content: { Alert(アラートの内容) })

引数のisPresentedがtrueになったときにアラートが出現します。
アラートの内容はcontentに書き、Alert構造体を使います。

サンプルアプリのコードについて解説します。

ソースコード

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var goodAlert = false //いいね！ボタンの方のアラートを出すためのブール値
    @State var isGood = false //サムズアップに色をつけるかどうかのブール値
    @State var noGoodAlert = false //よくないね！ボタンの方のアラートを出すためのブール値

    var body: some View {
        VStack{
            // サムズアップのマーク。isGoodがtrueになると色がつく。
            Image(systemName: isGood ? "hand.thumbsup.fill":"hand.thumbsup")
                .font(.title)
                .foregroundColor(isGood ? .pink:.none)
                .padding()
            // いいね！ボタン
            Button(action: {
                goodAlert = true // このアクションでアラートを呼び出す
            }, label: {
                buttonLabel(text: "いいね！", fieldColor: Color.pink)
            })
                .padding()
                // goodAlertがtrueになると呼び出されるアラート
                .alert(isPresented: $goodAlert, content: {
                    Alert(
                        title: Text("いいね！しますか？"),
                        message: Text("いいね！すると色がつきます。"),
                        primaryButton: .default(Text("はい"),
                                                action: {isGood = true}),
                        secondaryButton: .destructive(Text("いいえ"),
                                                      action: {isGood = false})
                    )
                })
            // よくないね！ボタン
            Button(action: {
                noGoodAlert = true // このアクションでアラートを呼び出す
            }, label: {
                buttonLabel(text: "よくないね！", fieldColor: Color.blue)
            })
                .padding()
                // noGoodAlertがtrueになると呼び出されるアラート
                .alert(isPresented: $noGoodAlert, content: {
                    Alert(title: Text("そんなこと言わないで"))
                })
        }
    }
}

struct buttonLabel: View {
    let text: String
    let fieldColor: Color

    var body: some View {
        Text(text)
            .font(.title)
            .foregroundColor(.white)
            .frame(width: 250, height: 100)
            .background(fieldColor)
            .cornerRadius(30)
    }
}

全体のソースコードはこのようになっています。
少し複雑なので、いいね！ボタンの方に焦点を当てて説明したいと思います。

いいね！ボタンとアラートの仕組み

まず、ContentViewのプロパティとしてブール型の変数を用意しています。

    @State var goodAlert = false //いいね！ボタンの方のアラートを出すためのブール値
    @State var isGood = false //サムズアップに色をつけるかどうかのブール値

いいね！ボタンのアラートを出すための変数goodAlertは初期値としてfalseを入れています。初期値がtrueの場合、アプリ起動時にアラートが表示されることになります。

次に、goodAlertがtrueに反転するためのトリガーを書きます。

            Button(action: {
                goodAlert = true // このアクションでアラートを呼び出す
            }, label: {
                buttonLabel(text: "いいね！", fieldColor: Color.pink)
            })

今回はボタンのアクションによってアラートを呼び出したいので、このようになります。

そして、呼び出すアラートがこちら。

                .alert(isPresented: $goodAlert, content: {
                    Alert(
                        title: Text("いいね！しますか？"),
                        message: Text("いいね！すると色がつきます。"),
                        primaryButton: .default(Text("はい"),
                                                action: {isGood = true}),
                        secondaryButton: .destructive(Text("いいえ"),
                                                      action: {isGood = false})
                    )
                })

　isPresentedにgoodAlertを入れているので、goodAlertがtrueに反転したときにcontentに書かれているアラートが出現します。

このように書くことで出現するアラートがこちらです。

こうして見ると、Alert構造体のどの引数がどの部分に表れているかわかりやすいかと思います。このアラートの「はい」ボタンを押すことでisGoodにtrueが、「いいえ」ボタンを押すことでfalseが入ります。そうすることで結果的にサムズアップのマークに色がついたり消えたりしているのです。

よくないね！ボタンとアラートの仕組み

次に、よくないね！ボタンの方の説明をしていきます。
こちらもまずはブール型の変数を用意しています。

    @State var noGoodAlert = false //よくないね！ボタンの方のアラートを出すためのブール値

こちらの変数を反転させるトリガーがこちら。

            Button(action: {
                noGoodAlert = true // このアクションでアラートを呼び出す
            }, label: {
                buttonLabel(text: "よくないね！", fieldColor: Color.blue)
            })

呼び出すアラートはこちら。

                .alert(isPresented: $noGoodAlert, content: {
                    Alert(title: Text("そんなこと言わないで"))
                })

いいね！ボタンの方のアラートに比べるとすっきりしています。実は、Alert構造体はtitleさえあればアラートとして機能します。

実際に出現するアラートがこちら。

Alert構造体にはタイトルしか書いていませんが、自動的にOKボタンをつけてくれます。このボタンを押すとisPresentedがfalseになり、アラートが消えます。(いいね！ボタンの方も同様の仕組みでアラートが消えています)

アラートのボタンについて

先ほど述べたように、Alert構造体はtitleがあれば機能し、アラートを消すボタンを自動的につけてくれますが、どのようなボタンにするかを指定することができます。

アラートのボタンはひとつ、もしくはふたつ付けることができます。それぞれ使用する引数が違うので、別々に解説したいと思います。

ボタンがひとつの場合

先ほどのよくないね！アラートを次のように書きかえます。

                .alert(isPresented: $noGoodAlert, content: {
                    Alert(title: Text("そんなこと言わないで"),
                          dismissButton: .default(Text("了解です")))
                })

dismissButtonという引数を追加しました。これによりボタンのテキストが変わります。

「了解です」ボタンを押すとアラートが消えてくれます。このボタンに機能を追加したい場合、.defaultの引数のactionに書けば追加できます。

ボタンがふたつの場合

いいね！のアラートをもう一度見てみましょう。

                .alert(isPresented: $goodAlert, content: {
                    Alert(
                        title: Text("いいね！しますか？"),
                        message: Text("いいね！すると色がつきます。"),
                        primaryButton: .default(Text("はい"),
                                                action: {isGood = true}),
                        secondaryButton: .destructive(Text("いいえ"),
                                                      action: {isGood = false})
                    )
                })

primaryButtonがボタンひとつめ、secondaryButtonがふたつめです（そのままですね）。
primaryButtonでは.default、secondaryButtonでは.destructiveというメソッドが使われています。実はこれらがボタンの文字の色を決めています。

「はい」ボタンの方はdefault、つまりデフォルトの色の青になります。destructiveとは「破壊的な」という意味があり、これを使った「いいえ」ボタンは文字が赤色になっています。これらふたつを使い分けることで、ユーザーの押し間違いを減らす効果が期待できます。ぜひ使い分けましょう。

まとめ

alertメソッドはおそらく、iPhoneを触っていれば見ない日はないほど頻繁に見る機能かと思います。使うシーンもさまざまなので、ぜひこの機能を応用してアプリに取り入れてみてください。