Rork でマッチングアプリを作る：スワイプUIとチャット機能の実装チュートリアル

-- プロフィールテーブル
create table profiles (
  id uuid references auth.users primary key,
  name text not null,
  age integer,
  bio text,
  avatar_url text,
  created_at timestamptz default now()
);
 
-- スワイプ記録テーブル
create table swipes (
  id uuid default gen_random_uuid() primary key,
  swiper_id uuid references profiles(id),
  swiped_id uuid references profiles(id),
  direction text check (direction in ('like', 'pass')),
  created_at timestamptz default now(),
  unique(swiper_id, swiped_id)
);
 
-- マッチテーブル
create table matches (
  id uuid default gen_random_uuid() primary key,
  user1_id uuid references profiles(id),
  user2_id uuid references profiles(id),
  created_at timestamptz default now()
);
 
-- メッセージテーブル
create table messages (
  id uuid default gen_random_uuid() primary key,
  match_id uuid references matches(id),
  sender_id uuid references profiles(id),
  body text not null,
  created_at timestamptz default now()
);
 
-- Realtime を有効にする
alter publication supabase_realtime add table messages;

// screens/SwipeScreen.tsx（Rork 生成コードの例）
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  runOnJS,
} from 'react-native-reanimated';
 
export function SwipeScreen() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
 
  const gestureHandler = useAnimatedGestureHandler({
    onActive: (event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    },
    onEnd: (event) => {
      if (event.translationX > 100) {
        // 右スワイプ：いいね
        runOnJS(handleLike)();
      } else if (event.translationX < -100) {
        // 左スワイプ：スキップ
        runOnJS(handlePass)();
      }
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    },
  });
 
  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={[styles.card, animatedStyle]}>
        {/* プロフィールカードの内容 */}
      </Animated.View>
    </PanGestureHandler>
  );
}

// utils/swipe.ts
import { supabase } from './supabase';
 
export async function handleSwipe(
  swiperId: string,
  swipedId: string,
  direction: 'like' | 'pass'
) {
  // スワイプを記録
  await supabase.from('swipes').insert({
    swiper_id: swiperId,
    swiped_id: swipedId,
    direction,
  });
 
  if (direction === 'like') {
    // 相手からのいいねが既にあるか確認
    const { data } = await supabase
      .from('swipes')
      .select('id')
      .eq('swiper_id', swipedId)
      .eq('swiped_id', swiperId)
      .eq('direction', 'like')
      .single();
 
    if (data) {
      // 相互いいね → マッチング成立
      await supabase.from('matches').insert({
        user1_id: swiperId,
        user2_id: swipedId,
      });
      return { matched: true };
    }
  }
 
  return { matched: false };
}

// screens/ChatScreen.tsx
import { useEffect, useState } from 'react';
import { supabase } from '../utils/supabase';
 
export function ChatScreen({ matchId }: { matchId: string }) {
  const [messages, setMessages] = useState([]);
 
  useEffect(() => {
    // 既存メッセージを取得
    fetchMessages();
 
    // Realtime サブスクリプション
    const channel = supabase
      .channel(`match:${matchId}`)
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'messages',
          filter: `match_id=eq.${matchId}`,
        },
        (payload) => {
          // 新メッセージをリアルタイム反映
          setMessages((prev) => [...prev, payload.new]);
        }
      )
      .subscribe();
 
    return () => supabase.removeChannel(channel);
  }, [matchId]);
 
  const sendMessage = async (body: string) => {
    await supabase.from('messages').insert({
      match_id: matchId,
      sender_id: currentUserId,
      body,
    });
    // Realtime で自動的に相手側に届く
  };
 
  return (
    // チャット UI
  );
}

// utils/uploadAvatar.ts
import * as ImagePicker from 'expo-image-picker';
import { supabase } from './supabase';
import { decode } from 'base64-arraybuffer';
 
export async function uploadAvatar(userId: string): Promise<string | null> {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [1, 1], // 正方形にトリミング
    quality: 0.8,
    base64: true,
  });
 
  if (result.canceled || !result.assets[0].base64) return null;
 
  const fileName = `avatars/${userId}-${Date.now()}.jpg`;
 
  const { error } = await supabase.storage
    .from('profiles')
    .upload(fileName, decode(result.assets[0].base64), {
      contentType: 'image/jpeg',
      upsert: true,
    });
 
  if (error) throw error;
 
  const { data } = supabase.storage.from('profiles').getPublicUrl(fileName);
  return data.publicUrl;
}