<TouchableOpacity>と<Button>の違い、使い分け

React Nativeでボタンを作成する際、TouchableOpacityとButtonのどちらを使うべきか迷うことがあります。それぞれのコンポーネントには異なる特徴と用途があり、シーンに応じて適切に選ぶことが重要です。本記事では、その違いを詳しく解説します。

1. 概要

TouchableOpacity

• カスタマイズ性が高いタッチ可能エリア
• タッチすると、不透明度が変化するアニメーションが適用される
• 中にカスタムコンポーネント（例えば、TextやImage）を自由に配置可能

Button

• シンプルなプリセットボタン
• プラットフォームごとにネイティブの見た目が適用され、基本的なボタンとしての動作がすぐに利用可能

2. 両者の違い

記法の違いは以下。

<View>
	<TouchableOpacity style={styles.button} onPress={() => alert('Pressed!')}>
         <Icon name="sound" size={24} color="#007bff" />
	</TouchableOpacity>
	
	<TouchableOpacity style={styles.button} onPress={() => alert('Pressed!')}>
         <Text style={styles.text}>Title: Open</Text>
    </TouchableOpacity>
	
	<Button
        title='Open'
		onPress={() => toggle(index)}
		color="#007bff"
	/>
</View>

TouchableOpacityを選ぶべき場合

• ボタンのデザインをカスタマイズしたい（styleの適用）
• テキストだけでなく、アイコンや画像を含めたい（の追加等）
• ボタン以外の要素（例えばカスタムカードやリストアイテム）でタッチ可能な領域を作りたい

Buttonを選ぶべき場合

• シンプルなボタンで十分な時
• ネイティブなプラットフォームのスタイルをそのまま利用したい。
• カスタマイズが不要で、すぐに使えるボタンが欲しい（プロト開発等）

まとめ

TouchableOpacityは柔軟性が高く、ボタン以外の用途にも利用可能です。一方、Buttonは迅速に実装できる標準的なボタンとして便利です。どちらを使うかによって使えるオプションも異なるので、UIデザインの要件と開発効率に応じて選びましょう！！