【SwiftUI入門講座Part6】サイコロアプリを作ってみよう！~ボタン・タイマー機能を利用~

Xcodeを立ち上げて、Create a new Xcode projectをクリック。

この画面が開かない場合は、command + shift + 1を押してください。

①iOSを選択
②Appを選択
③Nextをクリック

①Product Nameに、Dice
②Interfaceは、SwiftUI
③Languageは、Swift
④全てチェックなし
⑤Nextをクリック

Part2で作ったPracticeフォルダを選択してCreateをクリック

これでプロジェクトが作成できました。

まずは、Resumeを押して画面を確認してください。そうすると、Hello, world!の画面が表示されると思います。この講座の最中は、こまめにResumeを押して画面を確認してみてください。

Text("Hello, world!")の部分を以下のように書き換えましょう。

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "die.face.1")
            Button(action: {
                print("ボタンが押されたよ")
            }) {
                Text("サイコロを振る")
            }
        }
    }
}

Image(systemName: "die.face.1")

Button(action: {
    print("ボタンが押されたよ")
}) {
    Text("サイコロを振る")
}

画像が小さすぎるので大きくしましょう。

Image(systemName: "die.face.1")
    .resizable()
    .scaledToFit()
    .frame(width: UIScreen.main.bounds.width/2)
    .padding()

次はボタンを装飾しましょう。

Text("サイコロを振る")
    .padding()
    .background(.orange)
    .foregroundColor(.black)
    .cornerRadius(10)

現時点では、真ん中に寄りすぎているので、もう少し画像とボタンのスペースを広げてあげます。

そういう時は、Spacer()を追記してバランスを取ります。

Imageの上と下、ボタンの下にSpacer()を追記しましょう。

VStack {
    Spacer()
    Image(systemName: "die.face.1")
        .resizable()
        .scaledToFit()
        .frame(width: UIScreen.main.bounds.width/2)
        .padding()
    Spacer()
    Button(action: {
        print("ボタンが押されたよ")
    }) {
        Text("サイコロを振る")
            .padding()
            .background(Color.orange)
            .foregroundColor(.black)
            .cornerRadius(10)
    }
    Spacer()
}

これでレイアウトがいい感じになりました。

例えば、サイコロの出目を3に変更するには、"die.face.1"を"die.face.3"というふうに変更します。

試しに、変更して実行してみましょう。

Image(systemName: "die.face.3")

そのため、"die.face.1"の数値を変えることで、出目を変更できるということがわかりました。

"die.face.1"の数値を変数で持つようにしましょう。

@State var randomNumber = 1

では、先ほど作った変数を、画像の数値に対応させます。

Imageを以下のように記載してください。

ちなみにバックスラッシュ(\)は、option + ¥で打てます。

Image(systemName: "die.face.\(randomNumber)")

では、ボタンを押したら出目を4に変更してみましょう。

Button(action: {
    print("ボタンが押されたよ")
    randomNumber = 4
}) {

今は、ボタンを押すと強制的に4になりますが、これをランダムに変更してみましょう。

randomNumber = Int.random(in: 1...6)

これで、ボタンを押すたびにサイコロの出目が変わるはずです。

これで最低限のサイコロアプリが完成しました！

0.1秒ごとに処理をするには、Timerを使います。

まず、timerという変数を追加します。

@State var timer: Timer?

randomNumberにランダムな値を入れているところを以下のように変更しましょう。

Button(action: {
    print("ボタンが押されたよ")
    timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
        randomNumber = Int.random(in: 1...6)
    }
}) {

これで、実行してボタンを押してみてください。高速で0.1秒ごとに出目が変わり続けると思います。

timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
}

では、次に、ボタンを押してから0.5秒後に出目を止めるようにしましょう。

Button(action: {
    print("ボタンが押されたよ")
    timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
        randomNumber = Int.random(in: 1...6)
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        timer?.invalidate()
        timer = nil
    }
}) {

DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
}

timer?.invalidate()
timer = nil

これで、アニメーションが完成しました！良い感じに動いています！

2回連続タップさせないようにするには、1回目押されてから0.5秒間は、ボタンを無効にするという処理を入れないといけません。

ボタンを無効にするには、以下のように書きます。とりあえず、無効にして実行して確認しましょう。

Button(action: {
    //省略
}) {
    Text("サイコロを振る")
        //省略
}
.disabled(true)

ボタンを押してから0.5秒間は、trueで、それ以外はfalseという変数を用意します。

以下のコードを追記しましょう。

@State var isRolling = false

ボタンを押してから、0.5秒間をtrueにするので、以下のようにコードを追記しましょう。

Button(action: {
    print("ボタンが押されたよ")
    isRolling = true
    timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
        randomNumber = Int.random(in: 1...6)
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        timer?.invalidate()
        timer = nil
        isRolling = false
    }
}) {

isRollingを、.disabledに反映させましょう。

Button(action: {
    //省略
}) {
    Text("サイコロを振る")
        //省略
}
.disabled(isRolling)

これで、サイコロアプリは完成です！

var body: some View {のブロックの下に、以下のコードを追記しましょう。

func playDice() {
}

Button(action: {の中に書いてある処理を全て関数の中に移動させましょう。

func playDice() {
    print("ボタンが押されたよ")
    isRolling = true
    timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
        randomNumber = Int.random(in: 1...6)
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        timer?.invalidate()
        timer = nil
        isRolling = false
    }
}

Button(action: {の中で先ほど作った関数を呼びましょう。

Button(action: {
    playDice()
}) {

これで、処理を分けることができました。

リファクタリングしたら、必ず実行して挙動が変わっていないかを確認しましょう。

これで、処理を関数化することができました。