Rork でアンケートアプリを作る入門ガイド — フォーム設計・回答収集・集計グラフの実装

-- surveys テーブルの作成
CREATE TABLE surveys (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  title text NOT NULL,
  description text,
  created_at timestamp DEFAULT now()
);
 
-- responses テーブルの作成
CREATE TABLE responses (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  survey_id uuid REFERENCES surveys(id) ON DELETE CASCADE,
  question_id text NOT NULL,
  answer text NOT NULL,
  respondent_id text, -- デバイス固有IDで重複回答を防ぐ
  created_at timestamp DEFAULT now()
);
 
-- 誰でも回答を挿入・読み取りできる RLS ポリシー（公開アンケート用）
ALTER TABLE surveys ENABLE ROW LEVEL SECURITY;
ALTER TABLE responses ENABLE ROW LEVEL SECURITY;
 
CREATE POLICY "Public surveys are viewable by everyone" ON surveys
  FOR SELECT USING (true);
 
CREATE POLICY "Anyone can submit a response" ON responses
  FOR INSERT WITH CHECK (true);
 
CREATE POLICY "Responses are viewable by everyone" ON responses
  FOR SELECT USING (true);

// questions.ts — アンケートの質問データ定義
export const SURVEY_QUESTIONS = [
  {
    id: "q1",
    type: "single", // 単一選択
    text: "現在のアプリ開発経験を教えてください",
    options: ["未経験", "独学で学習中", "個人アプリを公開済み", "プロとして開発"],
  },
  {
    id: "q2",
    type: "multiple", // 複数選択
    text: "使用したことがある開発ツールを選んでください（複数可）",
    options: ["Rork", "FlutterFlow", "Adalo", "Bubble", "Bolt", "なし"],
  },
  {
    id: "q3",
    type: "text", // 自由記述
    text: "アプリ開発で困っていることを自由にお書きください",
  },
];

// supabase.ts — Supabase クライアントの初期化
import { createClient } from "@supabase/supabase-js";
 
const SUPABASE_URL = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const SUPABASE_ANON_KEY = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;
 
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
// 回答を一括保存する関数
export async function submitSurveyResponses(
  surveyId: string,
  answers: Record<string, string | string[]>,
  respondentId: string
) {
  const rows = Object.entries(answers).map(([questionId, answer]) => ({
    survey_id: surveyId,
    question_id: questionId,
    // 複数選択の場合は配列をカンマ区切り文字列に変換
    answer: Array.isArray(answer) ? answer.join(",") : answer,
    respondent_id: respondentId,
  }));
 
  const { error } = await supabase.from("responses").insert(rows);
 
  if (error) {
    console.error("回答の保存に失敗しました:", error.message);
    throw error;
  }
 
  return { success: true };
}

// useResponseStats.ts — 集計データを取得するカスタムフック
import { useEffect, useState } from "react";
import { supabase } from "./supabase";
 
interface AnswerCount {
  option: string;
  count: number;
  percentage: number;
}
 
export function useResponseStats(surveyId: string, questionId: string) {
  const [stats, setStats] = useState<AnswerCount[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    async function fetchStats() {
      const { data, error } = await supabase
        .from("responses")
        .select("answer")
        .eq("survey_id", surveyId)
        .eq("question_id", questionId);
 
      if (error || !data) return;
 
      // 回答の集計処理
      const countMap: Record<string, number> = {};
      data.forEach(({ answer }) => {
        // カンマ区切り（複数選択）にも対応
        answer.split(",").forEach((opt: string) => {
          countMap[opt.trim()] = (countMap[opt.trim()] || 0) + 1;
        });
      });
 
      const totalCount = data.length;
      const statsArray = Object.entries(countMap).map(([option, count]) => ({
        option,
        count,
        percentage: Math.round((count / totalCount) * 100),
      }));
 
      setStats(statsArray);
      setTotal(totalCount);
      setLoading(false);
    }
 
    fetchStats();
  }, [surveyId, questionId]);
 
  return { stats, total, loading };
}