TapGestureの使い方

2026.09.23

SwiftUIのTapGestureは、画面をタップした時に特定の処理を実行するためのジェスチャーです。

例えば、画面をタップすると数字が増えるカウンターや、画面をタップすると表示が切り替わるアプリなどに利用できます。

今回は、TapGestureの基本的な使い方から、シングルタップとダブルタップの違いまで、サンプルコードを使って解説します。

  1. TapGestureの基本構文　　　　　　　　　　　　　　　　　　　　　　　　TapGestureを実装するには、主に次の２つの方法があります。
    • TapGesture()と.gesture()を組み合わせる方法
    • .onTapGesture()を使用する方法　　　　　　　　　　　　　　

まずは、TapGestureを使った基本的なコードを見てみましょう。

Swift

Text("タップすてください")
    .gesture(
       TapGesture()
            .onEnded {
                print("タップされました")
            }
    }

このコードを実行して文字をタップすると、Xcodeのコンソールに「タップされました」と表示されます。

各コードの役割を確認しましょう。

コード役割
TapGestureタップ操作を認識する
.gesture()Viewにジェスチャーを設定する
.onEndedジェスチャーが認識された時に処理を実行する

ここで重要なのは、.onEndedです。

TapGestureの場合、指定した回数のタップが認識されると、.onEnded内の処理が実行されます。

2.タップすると数字が増えるカウンターを作る

次に、TapGestureを利用して簡単なカウンターアプリを作ってみましょう。

画面に表示された数字をタップすると、カウントが１づつ増えていくアプリです。

swift

import SwiftUI

struct ContenView: View {
  @State private var count = 0
       var body: some View {
        VStack(spacing: 20) {
          Text("\(count)")
             .font(.system(size: 60))
             .gesture(
                 TapGesture()
                    .onEnded {
                          count += 1
                    }
             )
            Text("数字をタップしてください。")
          }
      }
}

コードの解説

まず、次のコードでカウントを保存する変数を用意します。

swift
@State private var count = 0

@State は、SwiftUIでViewの状態を管理するためのプロパティラッパーです。

countの値が変更されると、その値に応じて画面の表示が更新されます。

続いて、次のコードを見てみましょう。

swift
Text("\(count)")
    .font(.system(size: 60))
    .gesture(
        TapGesture()
           .onEnded {
               count += 1
           }
    )

Text(“\(count)”)で現在のカウントを表示します。

数字がタップされると、.onEnded内のcount += 1 が実行され、カウントが１増えます。

これで、数字をタップするたびにカウントが増えるアプリが完成しました。

3. .onTapGestureを使って実装する方法

SwiftUIには、TapGestureをより簡潔に記述できる.onTapGesture()というモディファイアが用意されています。

先ほどのカウンタアプリは、次のように書き換えることができます。

swift
Text("\(count)")
   .font(.system(size: 60))
   .onTapGesture {
       count += 1
   }

このコードでも、数字をタップするたびにカウントが１ずつ増えます。

単純なタップ操作を実装する場合は、.onTapGesture()を使うとコードを短く記述できます。

一方、他のジェスチャーと組み合わせたり、ジェスチャーの認識方法を細かく設定したりする場合は、TapGesture()を使用する方法もあります。

4. ダブルタップを実装する方法

TapGestureでは、タップする回数を指定することもできます。

例えば、ダブルタップした時に処理を実行するには、countパラメータに「2」を指定します。

swift
Text("\(count)")
   .font(.system(size: 60)
   .gesture(
      TapGesture(count: 2)
         .onEnded {
            count += 1
         }
   )

ダブルタップが認識された時に、カウントが１増えます。

また、.onTapGesture()でも同じ容易にダブルタップを実装できます。

swift
Text("\count)")
   .font(.system(size: 60))
   .onTapGesture(count: 2) {
       count += 1
   }

countパラメータには、認識させたいタップの回数を指定します。

指定方法操作
count: 1シングルタップ
count: 2ダブルタップ
count: 3トリプルタップ

なお、.onTapGesture()のcountパラメータを省略した場合は、シングルタップとして扱われます。

5. シングルタップとダブルタップを組み合わせる

最後に、シングルタップとダブルタップの両方を実装してみましょう。

今回は、次のような動作をするカウンタアプリを作成します。

サンプルコード

swift
import SwiftUI
struct ContentView: View {
 @State private var count = 0
  var body: some View {
    
      VStack(spacing: 20) {
          Text("\(count)")
             .font(.system(size: 60))
             .onTapGesture(count: 2) {
                   count += 10
               }
             .onTapGesture(count: 1) {
                   count += 1
              }
            Text("タップ: +1")
            Text("ダブルタップ: +10)
          }
       }
   }

ここで重要なのは、ダブルタップの処理を先に記述している点です。

ダブルタップは、２回のタップによって認識されます。そのため、シングルタップとダブルタップを同じViewに設定すると、ジェスチャーの認識が競合する場合があります。

上記のコードでは、ダブルタップを先に記述することで、ダブルタップの認識を優先させています。

ただし、複数のジェスチャーを組み合わせた場合の動作は、設定方法やViewの構造によって変わることがあります。実際のアプリでは、シングルタップとダブルタップが意図した通りに認識されるか確認しましょう。

6. TapGestureのまとめ

今回は、SwiftUIのTapGestureを利用して、画面をタップした時に処理を実行する方法を紹介しました。

TapGestureの基本的な使い方を振り返りましょう。

項目内容
TapGesture()タップ操作を認識する
.onEndedタップが認識された時の処理を指定する
.onTapGesture()タップ操作を簡潔に実装する
count: 2ダブルタップを認識する

TapGestureを使えば、カウンターだけでなく、画像の切り替えやゲームの操作など、さまざまな機能を実装できます。

次回は、画面を一定時間押し続けた時に処理を実行するLongPressGesureについて解説します。

コメント

タイトルとURLをコピーしました