Vue + Supabase で作る超簡易ToDoアプリ

Vue.jsとSupabaseを組み合わせて、シンプルなToDoアプリを作成する方法を解説します。このアプリでは、タスクの表示・追加・削除が可能です。

---

1. Supabaseプロジェクトの作成

1. Supabase公式サイトにアクセスし、アカウントを作成またはログイン
2. 新しいプロジェクトを作成（DB名、パスワード、リージョンを設定）
3. プロジェクト作成後、「Settings」→「API」からProject URLとanonキーを取得

※ SupabaseはFirebaseのようなBaaS（Backend as a Service）で、認証・DB・ストレージなどが簡単に使えるクラウドサービスです。

---

2. データベーステーブルの作成

SupabaseのSQLエディタで以下を実行、もしくはGUIの「Table Editor」から手動でカラムを追加してもOKです

create table todos (
  id serial primary key,
  title text not null,
  created_at timestamp with time zone default now()
);

• id：自動で連番が振られる主キー
• title：タスクの名前（必須）
• created_at：登録日時（自動で現在時刻が入る）

---

3. Vueプロジェクトのセットアップ

npm create vite@latest supabase-todo --template vue
cd supabase-todo
npm install
npm install @supabase/supabase-js

.env ファイルをプロジェクト直下に作成

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

• Viteでは環境変数を使うとき、必ず VITE_ プレフィックスを付ける必要があります。

src/supabase.js を作成

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

• createClient関数でSupabaseと通信するためのクライアントを作成します。

---

4. アプリケーションの実装

App.vue を以下のように編集

<template>
  <div>
    <h1>📋 My ToDo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        - {{ todo.title }}
        <button @click="deleteTodo(todo.id)">削除</button>
      </li>
    </ul>
    <input v-model="newTask" placeholder="新しいタスクを入力する" />
    <button @click="addTodo">追加</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { supabase } from './supabase';

const todos = ref([]);
const newTask = ref('');

// DBからタスクを取得
const fetchTodos = async () => {
  const { data, error } = await supabase
    .from('todos')
    .select('*')
    .order('created_at', { ascending: false });
  if (!error) {
    todos.value = data;
  }
};

// タスクを追加
const addTodo = async () => {
  if (newTask.value.trim() === '') return;
  const { error } = await supabase
    .from('todos')
    .insert([{ title: newTask.value }]);
  if (!error) {
    newTask.value = '';
    fetchTodos();
  }
};

// タスクを削除
const deleteTodo = async (id) => {
  const { error } = await supabase
    .from('todos')
    .delete()
    .eq('id', id);
  if (!error) {
    fetchTodos();
  }
};

onMounted(fetchTodos); // 初期表示でタスクを読み込み
</script>

• refを使ってリアクティブな変数（todos, newTask）を定義
• onMountedで初回マウント時にデータを取得
• Supabaseの.from('todos')でDBアクセス
• delete()でIDに一致するタスクを削除可能に

---

5. アプリケーションの起動

npm run dev

ブラウザで http://localhost:5173 にアクセスすると、ToDoアプリが表示されます。