SupabaseとRLSで安全なReact Nativeウェアラブルアプリを構築

npx create-expo-app wearable-data-sync
cd wearable-data-sync

npm install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill

-- 1. health_dataテーブルを作成
CREATE TABLE public.health_data (
  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
  heart_rate INT,
  steps INT
);

-- 2. テーブルでRow Level Security（RLS）を有効化
ALTER TABLE public.health_data ENABLE ROW LEVEL SECURITY;

// lib/supabase.js
import 'react-native-url-polyfill/auto';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

// src/components/Auth.js
import React, { useState } from 'react';
import { Alert, StyleSheet, View, TextInput, Button, Text } from 'react-native';
import { supabase } from '../../lib/supabase';

export default function Auth() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  async function signInWithEmail() {
    setLoading(true);
    const { error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });
    if (error) Alert.alert(error.message);
    setLoading(false);
  }

  async function signUpWithEmail() {
    setLoading(true);
    const { error } = await supabase.auth.signUp({
      email: email,
      password: password,
    });
    if (error) Alert.alert(error.message);
    setLoading(false);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Health Sync</Text>
      <TextInput
        style={styles.input}
        onChangeText={(text) => setEmail(text)}
        value={email}
        placeholder="[email protected]"
        autoCapitalize={'none'}
      />
      <TextInput
        style={styles.input}
        onChangeText={(text) => setPassword(text)}
        value={password}
        secureTextEntry={true}
        placeholder="Password"
        autoCapitalize={'none'}
      />
      <View style={styles.buttonContainer}>
        <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
      </View>
    </View>
  );
}
// Add some basic styling
const styles = StyleSheet.create({ /* ... */ });

// App.js
import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { supabase } from './lib/supabase';
import Auth from './src/components/Auth';
import HealthDashboard from './src/components/HealthDashboard'; // 次にこれを作成します

export default function App() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);

  return (
    <View>
      {session && session.user ? <HealthDashboard key={session.user.id} session={session} /> : <Auth />}
    </View>
  );
}

// src/components/HealthDashboard.js
import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet, FlatList, Alert } from 'react-native';
import { supabase } from '../../lib/supabase';

const HealthDashboard = ({ session }) => {
  const [healthData, setHealthData] = useState([]);
  const [loading, setLoading] = useState(false);

  // ** 1. 初期データを取得し、リアルタイムサブスクリプションを設定 **
  useEffect(() => {
    getHealthData();

    const channel = supabase
      .channel('health_data_changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'health_data' }, (payload) => {
        // 新しいデータが到着すると、リストの先頭に追加
        setHealthData((currentData) => [payload.new, ...currentData]);
      })
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, []);

  // ** 2. ウェアラブルをシミュレートしデータを同期 **
  useEffect(() => {
    const interval = setInterval(() => {
      syncNewData();
    }, 5000); // 5秒ごとに新しいデータを同期

    return () => clearInterval(interval);
  }, []);

  const getHealthData = async () => {
    setLoading(true);
    const { data, error } = await supabase
      .from('health_data')
      .select('*')
      .order('created_at', { ascending: false }); // 最も新しい順

    if (error) {
      Alert.alert('データ取得エラー', 'RLSポリシーを設定しましたか？');
      console.error('Fetch error:', error.message);
    } else {
      setHealthData(data);
    }
    setLoading(false);
  };

  const syncNewData = async () => {
    const newHeartRate = Math.floor(Math.random() * (120 - 60 + 1)) + 60; // ランダムな心拍数 60-120
    const newSteps = Math.floor(Math.random() * 50) + 10; // ランダムな歩数 10-50

    const { error } = await supabase
      .from('health_data')
      .insert({
        user_id: session.user.id,
        heart_rate: newHeartRate,
        steps: newSteps,
      });

    if (error) {
      Alert.alert('同期エラー', error.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>ようこそ、{session.user.email}</Text>
      <Text style={styles.subHeader}>リアルタイム健康データ：</Text>
      <FlatList
        data={healthData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.dataRow}>
            <Text>❤️ {item.heart_rate} bpm</Text>
            <Text>👟 {item.steps} 歩</Text>
            <Text style={styles.timestamp}>{new Date(item.created_at).toLocaleTimeString()}</Text>
          </View>
        )}
      />
      <Button title="サインアウト" onPress={() => supabase.auth.signOut()} />
    </View>
  );
};
// Add styles
const styles = StyleSheet.create({ /* ... */ });

export default HealthDashboard;

auth.uid() = user_id

auth.uid() = user_id
*   「レビュー」をクリックして「ポリシーを保存」をクリックします。

### 動作の仕組み
*   `auth.uid()`：これは現在のリクエストを行っている認証済みユーザーの一意のIDを返す特別なSupabase関数です。
*   **SELECTポリシー**：`USING (auth.uid() = user_id)`句は、すべての`SELECT`クエリに mandatory な`WHERE`フィルターのように機能します。PostgreSQLに「リクエストしているユーザーのIDと`user_id`列が一致する行のみを返す」と指示します。
*   **INSERTポリシー**：`WITH CHECK (auth.uid() = user_id)`句は検証ルールのように機能します。PostgreSQLに「この新しい行を受け入れる前に、挿入されている`user_id`が挿入を実行しているユーザーのIDと同じであることを確認する」と指示します。これにより、ユーザーが악의的に他のユーザーに代わってデータを挿入することを防ぎます。

React Nativeアプリを再起動します。新規ユーザーとしてサインアップ（またはサインイン）します。ダッシュボードが表示され、5秒ごとに新しいデータポイントが表示されます！2番目のユーザーアカウントを作成してログインすると、完全分开の空のデータリストが表示され、セキュリティポリシーが正常に機能していることが証明されます。

## 結論
安全なフルスタックのデータパイプラインを正常に構築しました。ユーザー認証を处理し、Supabaseバックエンドにリアルタイムでデータを同期できるReact Nativeアプリが手に入りました。最も重要的是、行レベルセキュリティでデータをロックダウンし、直接データベースアクセスがあっても、ユーザーの機密健康情報が分離され保護されていることを確認しました。

このパターンは、堅牢でスケーラブル、かつ安全なアプリケーションを構築するための基盤です。ここから、プロジェクトを多くの方向发展させることができます。

**読者向けの次のステップ：**
*   **実際のウェアラブル統合**：シミュレーターを`react-native-health`や`react-native-wearables`などのライブラリに置き換えて、Apple HealthやGoogle Fitから実際のデータを取得します。
*   **データ可視化**：チャートライブラリを使用して、時間の経過に伴うユーザーの健康データのグラフを作成します。
*   **オフラインサポート**：SQLiteなどのローカルデータベースと同期エンジンを使用したオフラインファースト戦略を実装して、ユーザーがインターネット接続を持っていない場合に対応します。

## リソース
*   **Supabase公式ドキュメント**：[supabase.com/docs](https://supabase.com/docs)
*   **Supabase RLSドキュメント**：[Supabase Row Level Security Docs](https://supabase.com/docs/guides/auth/row-level-security)
*   **Expoドキュメント**：[docs.expo.dev](https://docs.expo.dev/)
*   **React Native Health**：[GitHub Repository](https://github.com/agencyenterprise/react-native-health)

---

## クイックリファレンス

| 側面 | 主要情報 |
|--------|----------------|
| **トピック** | 開発 |
| **関連性** | 患者教育と認識 |
| **アクション** | 医療提供者と話し合う |
| **頻度** | ケアチームが推奨するごと |
| **証拠** | 現在の臨床ガイドラインに基づく |

## よくある質問

**Q: これが自分に該当する怎么看才知道か？**
A: 個人的な既往歴と家族歴について医疗提供者と話し合いただき、個人のリスク因子を評価し、適切な次のステップを決定してください。

**Q: 医師に何と聞けばいいのか？**
A: 良い質問には次のようなものあります：「私の結果はどういう意味ですか？」「私のオプションは何ですか？」「どのような生活習慣改变有帮助ですか？」「いつフォローアップすべきですか？」

**Q: 帮助になれる生活習慣改变はありますか？**
A: ほとんどの健康状態は、基本的な対策から好处を得られます：バランスの取れた栄養、定期的な運動（週150分以上）、質の良い睡眠（7〜9時間）、ストレス管理、タバコの回避。

## 医療に関する免責事項

この記事は教育的目的是のみで、医学的アドバイスを提供ものではありません。健康、治療、またはケアに関する決定を下す前には、必ず資格のある医療提供者とご相談ください。個人の状況は異なり、一个人に適切なことが別の人に適切とは限りません。

救急車を要する医療上の緊急事態が発生した場合は、直ちに119（またはお住まいの地域の緊急番号）に電話してください。