レッスン 16: モバイルおよびクロスプラットフォーム向けの Vibe コーディング

GitHub Copilot を使用した Vibe コーディング: 基本から高度まで

パート 5: Vibe コーディングの実際 — 実際のプロジェクトの構築

xdev.asia

1. モバイルでの Vibe コーディング — Web とどう違うのですか?

モバイル開発には、Vibe コーディングが適応する必要がある独自の特性があります。

特徴	ウェブ	モバイル
レイアウト	CSS フレックスボックス/グリッド	プラットフォーム固有のレイアウト
ナビゲーション	URLベースのルーティング	スタック/タブのナビゲーション
テスト	ブラウザ → 即時フィードバック	エミュレータ/デバイス → 遅い
ネイティブAPI	制限事項	カメラ、GPS、センサー、プッシュ
パフォーマンス	DOM レンダリング	ネイティブレンダリング
デプロイ	ヴァーセル/Netlify	App Storeの審査プロセス

2. Vibe コーディングでネイティブに反応する

2.1.プロジェクトのセットアップ

// Prompt:
Create a React Native project with Expo for the Task Management app.
Include:
- TypeScript
- React Navigation (stack + bottom tabs)
- React Query for API calls
- AsyncStorage for local state
- Expo secure-store for auth tokens
- NativeWind (TailwindCSS for React Native)

2.2.バックエンドとの共有タイプ

// Prompt:
I have a backend with these API responses (paste TypeScript types).
Generate React Native API client and hooks that match these types exactly.
Reuse the same Zod schemas from the web frontend.

// src/hooks/useTasks.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../lib/api';
import type { Task, CreateTaskInput } from '../types';

export function useTasks(projectId: string) {
  return useQuery({
    queryKey: ['tasks', projectId],
    queryFn: () => api.get<Task[]>(`/tasks?projectId=${projectId}`),
  });
}

export function useCreateTask() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateTaskInput) => api.post('/tasks', data),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({
        queryKey: ['tasks', variables.projectId],
      });
    },
  });
}

2.3.モバイル固有の UI

// Prompt:
Create a task list screen for React Native with:
- Pull to refresh
- Infinite scroll pagination
- Swipe to complete/delete
- FAB (floating action button) to add tasks
- Priority color indicators
- Use NativeWind for styling

// src/screens/TaskListScreen.tsx
import { FlatList, RefreshControl, View, Text, Pressable } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
import { useTasks } from '../hooks/useTasks';

export function TaskListScreen({ route }) {
  const { projectId } = route.params;
  const { data, isLoading, refetch } = useTasks(projectId);

  const priorityColors = {
    LOW: 'bg-green-500',
    MEDIUM: 'bg-yellow-500',
    HIGH: 'bg-orange-500',
    URGENT: 'bg-red-500',
  };

  const renderTask = ({ item: task }) => (
    <Swipeable
      renderRightActions={() => (
        <Pressable className="bg-green-500 justify-center px-6"
          onPress={() => completeTask(task.id)}>
          <Text className="text-white font-bold">Done</Text>
        </Pressable>
      )}>
      <View className="bg-white p-4 border-b border-gray-100 flex-row items-center">
        <View className={`w-3 h-3 rounded-full mr-3 ${priorityColors[task.priority]}`} />
        <View className="flex-1">
          <Text className="font-semibold text-gray-900">{task.title}</Text>
          <Text className="text-gray-500 text-sm">{task.assignee?.name}</Text>
        </View>
      </View>
    </Swipeable>
  );

  return (
    <View className="flex-1 bg-gray-50">
      <FlatList
        data={data}
        renderItem={renderTask}
        refreshControl={
          <RefreshControl refreshing={isLoading} onRefresh={refetch} />
        }
      />
    </View>
  );
}

3. Vibeコーディングによるフラッター

3.1. Flutterプロジェクトのセットアップ

// Prompt:
Create a Flutter app for Task Management with:
- Clean architecture (presentation, domain, data layers)
- Riverpod for state management
- Go Router for navigation
- Dio for API calls
- Freezed for immutable models
- Material 3 design

3.2.ダーツモデルの生成

// Prompt:
Generate Freezed models for these API responses:
- Task (id, title, description, status, priority, dueDate, assignee)
- Project (id, name, description, owner)
- User (id, email, name, avatar)
Include fromJson/toJson serialization.

// lib/models/task.dart
import 'package:freezed_annotation/freezed_annotation.dart';

part 'task.freezed.dart';
part 'task.g.dart';

@freezed
class Task with _$Task {
  const factory Task({
    required String id,
    required String title,
    String? description,
    @Default(TaskStatus.todo) TaskStatus status,
    @Default(Priority.medium) Priority priority,
    DateTime? dueDate,
    User? assignee,
  }) = _Task;

  factory Task.fromJson(Map<String, dynamic> json) => _$TaskFromJson(json);
}

enum TaskStatus {
  @JsonValue('TODO') todo,
  @JsonValue('IN_PROGRESS') inProgress,
  @JsonValue('IN_REVIEW') inReview,
  @JsonValue('DONE') done,
}

enum Priority {
  @JsonValue('LOW') low,
  @JsonValue('MEDIUM') medium,
  @JsonValue('HIGH') high,
  @JsonValue('URGENT') urgent,
}

3.3. Copilot を使用した Flutter UI

// Prompt:
Create a Flutter task board widget with:
- Horizontal scrollable columns (Todo, In Progress, Done)
- Draggable task cards between columns
- Material 3 card design
- Pull to refresh
- Hero animation when opening task detail

4. プラットフォーム固有のコード

// Prompt:
Add push notifications to the mobile app:
- Firebase Cloud Messaging setup
- Handle foreground/background/terminated states  
- Deep link to specific task when notification tapped
- Platform-specific code for iOS (APNs) and Android (FCM)

副操縦士は理解しています プラットフォームの違い 各プラットフォームに適切なコードを生成します。

5. 比較: Vibe コーディングの React Native と Flutter

基準	ネイティブに反応する	フラッター
AIコードの品質	良い (トレーニング データが豊富)	良好（エコシステムの成長）
ウェブとのコード共有	高 (共有 TypeScript)	ロー（プライベートダーツ）
副操縦士の提案	非常に正確 (JS/TS)	アキュレート（ダーツ）
コンポーネントの生成	高速 (JSX に馴染みのある)	高速 (ウィジェット ツリー)
AIによるテスト	Jest + RTL (おなじみ)	ウィジェットのテスト (学習曲線)
ホットリロード	高速リフレッシュ ✅	ホットリロード ✅

おすすめ: チームが Web 用 React → React Native を使用している場合。高パフォーマンスとカスタム UI が必要な場合 → Flutter。

6. モバイルアプリのテスト

// Prompt cho React Native:
Write tests for TaskListScreen:
- Renders task list from API
- Pull to refresh calls refetch
- Swipe right completes task
- Shows loading indicator
- Shows empty state when no tasks
Use @testing-library/react-native

// Prompt cho Flutter:
Write widget tests for TaskBoard:
- Renders columns with correct titles
- Shows tasks in correct columns
- Drag and drop changes task status
- Pull to refresh triggers reload

7. モバイルアプリの導入

// Prompt:
Create a CI/CD pipeline for the React Native app:
- GitHub Actions workflow
- Build for iOS (using Expo EAS)
- Build for Android (using Expo EAS)
- Auto-submit to TestFlight and Google Play Internal Testing
- Run tests before build

8. まとめ

モバイルタスク	バイブコーディングの効果
UI画面	⭐⭐⭐⭐⭐ 非常に効果的です
API統合	⭐⭐⭐⭐⭐ タイプセーフで高速
ナビゲーション	⭐⭐⭐⭐ 馴染みのある柄と相性が良いです
ネイティブAPI	⭐⭐⭐ プラットフォームの詳細を確認する必要があります
パフォーマンスのチューニング	⭐⭐人間の専門知識が必要
App Storeへの申請	⭐⭐⭐ CI/CD セットアップは良好ですが、手動でのレビューが必要です

第 6 部では次の点に焦点を当てます。 品質とプロ意識 — コードの品質、セキュリティ、技術的負債、および Vibecoding とのチームでの作業。