【SwiftUI入門】onTapGestureの使い方を初心者向けに徹底解説

2025年10月13日

SwiftUIでアプリ開発をしていると、「画面をタップしたときに何か処理をしたい」という場面によく遭遇します。そんなときに便利なのがonTapGestureモディファイアです。

本記事では、SwiftUI初心者の方でもすぐに使えるよう、onTapGestureの基本から実践的な使い方まで、サンプルコード付きで詳しく解説します。

onTapGestureとは？

onTapGestureは、SwiftUIのビュー（View）にタップ操作を検知する機能を追加するモディファイアです。ユーザーが画面上の特定の要素をタップしたときに、指定した処理を実行できます。

こんな場面で使います

画像をタップして拡大表示する
テキストをタップして編集モードに切り替える
カスタムボタンを作成する
ダブルタップで「いいね」機能を実装する

基本的な使い方

最もシンプルな使い方から見ていきましょう。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("タップしてください")
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            .onTapGesture {
                print("タップされました！")
            }
    }
}

この例では、青い背景のテキストをタップすると、コンソールに「タップされました！」と表示されます。

構文の説明

.onTapGesture {
    // タップされたときに実行したい処理
}

波括弧{}の中に、タップされたときに実行したいコードを書きます。これをクロージャと呼びます。

状態を変更する実践例

実際のアプリでは、タップによって画面の状態を変更することが多いです。@Stateを使った例を見てみましょう。

import SwiftUI

struct TapCounterView: View {
    @State private var tapCount = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("タップ回数: \(tapCount)")
                .font(.title)
            
            Text("ここをタップ")
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(10)
                .onTapGesture {
                    tapCount += 1
                }
            
            Button("リセット") {
                tapCount = 0
            }
        }
    }
}

この例では、緑のテキストをタップするたびにカウンターが増え、リセットボタンで0に戻ります。

ダブルタップ・トリプルタップの実装

countパラメータを使えば、ダブルタップやトリプルタップも簡単に実装できます。

import SwiftUI

struct MultiTapView: View {
    @State private var message = "タップしてください"
    
    var body: some View {
        VStack(spacing: 30) {
            Text(message)
                .font(.title2)
                .multilineTextAlignment(.center)
                .padding()
            
            // シングルタップ
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .overlay(Text("1回").foregroundColor(.white))
                .onTapGesture {
                    message = "シングルタップされました"
                }
            
            // ダブルタップ
            Circle()
                .fill(Color.orange)
                .frame(width: 100, height: 100)
                .overlay(Text("2回").foregroundColor(.white))
                .onTapGesture(count: 2) {
                    message = "ダブルタップされました"
                }
            
            // トリプルタップ
            Circle()
                .fill(Color.purple)
                .frame(width: 100, height: 100)
                .overlay(Text("3回").foregroundColor(.white))
                .onTapGesture(count: 3) {
                    message = "トリプルタップされました"
                }
        }
        .padding()
    }
}

タップ回数の指定方法

.onTapGesture(count: 2) {
    // ダブルタップ時の処理
}

countに指定した回数だけ連続でタップされたときに処理が実行されます。

実用的なサンプル：お気に入り機能

SNSアプリなどでよく見る「いいね」機能を実装してみましょう。

import SwiftUI

struct LikeButtonView: View {
    @State private var isLiked = false
    @State private var likeCount = 42
    
    var body: some View {
        VStack(spacing: 15) {
            Image(systemName: isLiked ? "heart.fill" : "heart")
                .font(.system(size: 60))
                .foregroundColor(isLiked ? .red : .gray)
                .onTapGesture {
                    withAnimation(.spring(response: 0.3)) {
                        isLiked.toggle()
                        likeCount += isLiked ? 1 : -1
                    }
                }
            
            Text("\(likeCount) いいね")
                .font(.headline)
        }
        .padding()
    }
}

このコードでは、ハートアイコンをタップすると色が変わり、いいね数も増減します。withAnimationを使ってスムーズなアニメーションも追加しています。

タップ領域を広げるテクニック

小さいビューは時にタップしにくいことがあります。タップ可能な領域を広げる方法を紹介します。

import SwiftUI

struct TapAreaView: View {
    @State private var message = ""
    
    var body: some View {
        VStack(spacing: 40) {
            // 領域が狭い例（タップしにくい）
            Text("小さい")
                .onTapGesture {
                    message = "小さい領域がタップされました"
                }
            
            // paddingで領域を広げた例
            Text("広い")
                .padding(30)
                .background(Color.blue.opacity(0.2))
                .onTapGesture {
                    message = "広い領域がタップされました"
                }
            
            // frameで明示的にサイズ指定
            Text("固定サイズ")
                .frame(width: 200, height: 60)
                .background(Color.green.opacity(0.2))
                .onTapGesture {
                    message = "固定サイズがタップされました"
                }
            
            Text(message)
                .foregroundColor(.red)
        }
    }
}

背景色を薄く表示することで、実際のタップ可能領域が視覚的にわかりやすくなります。

onTapGestureとButtonの違い

初心者の方がよく疑問に思うのが「Buttonと何が違うの？」という点です。

Buttonの特徴

Button("ボタン") {
    print("タップされました")
}

自動的に視覚的フィードバック（押したときの色変化）がある
アクセシビリティ対応が自動的に行われる
ボタンらしい見た目になる

onTapGestureの特徴

Image("photo")
    .onTapGesture {
        print("タップされました")
    }

あらゆるビューにタップ機能を追加できる
視覚的フィードバックは自分で実装する必要がある
カスタムデザインの自由度が高い

使い分けの目安

Buttonを使う場合: 明確なアクションボタン、標準的なUI
onTapGestureを使う場合: 画像、カスタムビュー、独自デザインの要素

よくあるエラーと解決方法

エラー1: タップが反応しない

// ❌ 悪い例：Colorだけではタップできない
Color.blue
    .onTapGesture {
        print("タップされました")
    }

// ✅ 良い例：frameで領域を指定
Color.blue
    .frame(width: 200, height: 200)
    .onTapGesture {
        print("タップされました")
    }

エラー2: @Stateの宣言忘れ

// ❌ 悪い例：@Stateがない
var count = 0  // これではビューが更新されない

// ✅ 良い例：@Stateを使う
@State private var count = 0  // 状態の変化を検知できる

複数のジェスチャーを組み合わせる

シングルタップとダブルタップを同じビューで使い分けることもできます。

import SwiftUI

struct CombinedGestureView: View {
    @State private var singleTapCount = 0
    @State private var doubleTapCount = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("シングルタップ: \(singleTapCount)")
            Text("ダブルタップ: \(doubleTapCount)")
            
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.purple)
                .frame(width: 200, height: 200)
                .overlay(
                    Text("タップしてみて")
                        .foregroundColor(.white)
                        .font(.headline)
                )
                .onTapGesture(count: 2) {
                    doubleTapCount += 1
                }
                .onTapGesture(count: 1) {
                    singleTapCount += 1
                }
        }
    }
}

重要: ダブルタップを先に書くことで、ダブルタップとシングルタップを正しく区別できます。

パフォーマンスの考慮事項

大量のビューにonTapGestureを追加する場合、パフォーマンスに影響が出ることがあります。

// リストで使う場合の例
List(items) { item in
    Text(item.name)
        .onTapGesture {
            selectedItem = item
        }
}

このような場合は、ListのonTapGestureではなく、NavigationLinkやButtonの使用を検討しましょう。

まとめ

onTapGestureは、SwiftUIで簡単にタップ操作を実装できる便利なモディファイアです。

覚えておきたいポイント

基本構文は.onTapGesture { }
@Stateを使って状態管理ができる
countパラメータでダブルタップも実装可能
タップ領域はpaddingやframeで調整できる
標準的なボタンにはButtonを使う方が良い場合もある

この記事で紹介したサンプルコードをXcodeのPlaygroundやプロジェクトで実際に動かしてみて、理解を深めてください。タップ操作はアプリの基本的なインタラクションなので、しっかりマスターしておきましょう！

参考リンク

独学でプログラミングを学習している方で、エラーなどが発生して効率よく勉強ができないと悩む方は多いはず。Udemyは、プロの講師が動画で実際のプログラムを動かしながら教えてくれるオンライン講座です。講座の価格は、セール期間中には専門書籍を1冊買うよりも安く済むことが多いです。新しく学びたいプログラミング言語がある方は、ぜひUdemyでオンライン講座を探してみてください。