Supabaseはリアルタイムデータベースとオープンソースツールを提供するプラットフォームであり、Firebaseの代替として人気があります。この記事ではSupabaseを利用したTodoアプリの作成方法を、具体的な手順とともに解説していきます。

# Supabaseを使ってTodoアプリを作ってみた

## 目次
1. はじめに
2. Supabaseのセットアップ
    1. アカウントの作成とプロジェクト立ち上げ
    2. データベーステーブルの作成
3. フロントエンドアプリケーションの構築
    1. Reactアプリの初期設定
    2. Supabaseとの接続設定
4. Todo機能の実装
    1. タスクの追加機能
    2. タスクの表示機能
    3. タスクの更新機能
    4. タスクの削除機能
5. デプロイメントと運用
6. まとめ

---

## 1. はじめに
Supabaseは、オープンソースのFirebase代替プラットフォームとして注目を集めています。リアルタイムデータベースや認証のほか、アプリケーションのバックエンド構築を迅速に行える機能を備えています。本記事では、Supabaseの基本的な使い方を学ぶために、シンプルなTodoアプリを作成していきます。

---

## 2. Supabaseのセットアップ

### 2-1. アカウントの作成とプロジェクト立ち上げ
Supabaseの公式サイトにアクセスし、アカウントを作成します。ログイン後、新しいプロジェクトを作成します。プロジェクトの作成時には以下の情報が必要になります。
- プロジェクト名
- パスワード
- データベースリージョンの選択

この一連のセットアップが完了すると、Supabaseダッシュボードにプロジェクトが表示され、管理画面から様々な機能を使用できるようになります。

### 2-2. データベーステーブルの作成
次に、Todoアプリのデータを保存するためのテーブルを作成します。Supabaseのダッシュボードの「Table Editor」から、次のフィールドを持つ`tasks`テーブルを作成します。

- **id:** UUID (Primary Key)
- **task:** TEXT
- **is_complete:** BOOLEAN (default: false)

このテーブルがアプリケーションのデータベースとして機能します。

---

## 3. フロントエンドアプリケーションの構築

### 3-1. Reactアプリの初期設定
この例では、Reactを使用してフロントエンドを開発します。以下のコマンドを使ってReactアプリケーションを初期化します。

![img](/mosaic-code.jpg)

### 3-2. Supabaseとの接続設定
Reactアプリケーション内にSupabaseを設定するために、`src`ディレクトリに`supabaseClient.js`ファイルを作成します。SupabaseのURLと匿名キーは、Supabaseダッシュボードの「Settings」から取得できます。

![img](/mosaic-code.jpg)

---

## 4. Todo機能の実装

### 4-1. タスクの追加機能
タスクを追加するためのフォームと、Supabaseにタスクを保存する関数を実装します。

![img](/mosaic-code.jpg)

### 4-2. タスクの表示機能
データベースからタスクリストを取得し、表示する機能を実装します。

![img](/mosaic-code.jpg)

### 4-3. タスクの更新機能
タスクの完了状態を更新するための機能を追加します。

![img](/mosaic-code.jpg)

### 4-4. タスクの削除機能
タスクを削除する機能を実装します。

![img](/mosaic-code.jpg)

---

## 5. デプロイメントと運用
アプリケーションの構築が完了したら、ネット上で公開できるようにデプロイを行います。VercelやNetlifyを使用することで、簡単にアプリケーションをホスティングすることができます。

## まとめ
このプロジェクトを通して、Supabaseを使ったシンプルなTodoアプリの作成方法を学習しました。Supabaseのリアルタイムデータベース機能を利用することで、効率的にアプリケーションを開発することができます。今後は、認証機能やリアルタイム更新機能の実装により、さらに高度なアプリケーションを目指していくことができます。

[cv:issue_marketplace_engineer]

Supabaseはリアルタイムデータベースとオープンソースツールを提供するプラットフォームであり、Firebaseの代替として人気があります。この記事ではSupabaseを利用したTodoアプリの作成方法を、具体的な手順とともに解説していきます。

# Supabaseを使ってTodoアプリを作ってみた

## 目次
1. はじめに
2. Supabaseのセットアップ
    1. アカウントの作成とプロジェクト立ち上げ
    2. データベーステーブルの作成
3. フロントエンドアプリケーションの構築
    1. Reactアプリの初期設定
    2. Supabaseとの接続設定
4. Todo機能の実装
    1. タスクの追加機能
    2. タスクの表示機能
    3. タスクの更新機能
    4. タスクの削除機能
5. デプロイメントと運用
6. まとめ

---

## 1. はじめに
Supabaseは、オープンソースのFirebase代替プラットフォームとして注目を集めています。リアルタイムデータベースや認証のほか、アプリケーションのバックエンド構築を迅速に行える機能を備えています。本記事では、Supabaseの基本的な使い方を学ぶために、シンプルなTodoアプリを作成していきます。

---

## 2. Supabaseのセットアップ

### 2-1. アカウントの作成とプロジェクト立ち上げ
Supabaseの公式サイトにアクセスし、アカウントを作成します。ログイン後、新しいプロジェクトを作成します。プロジェクトの作成時には以下の情報が必要になります。
- プロジェクト名
- パスワード
- データベースリージョンの選択

この一連のセットアップが完了すると、Supabaseダッシュボードにプロジェクトが表示され、管理画面から様々な機能を使用できるようになります。

### 2-2. データベーステーブルの作成
次に、Todoアプリのデータを保存するためのテーブルを作成します。Supabaseのダッシュボードの「Table Editor」から、次のフィールドを持つ`tasks`テーブルを作成します。

- **id:** UUID (Primary Key)
- **task:** TEXT
- **is_complete:** BOOLEAN (default: false)

このテーブルがアプリケーションのデータベースとして機能します。

---

## 3. フロントエンドアプリケーションの構築

### 3-1. Reactアプリの初期設定
この例では、Reactを使用してフロントエンドを開発します。以下のコマンドを使ってReactアプリケーションを初期化します。

```bash
npx create-react-app todo-app
cd todo-app
npm install @supabase/supabase-js
```

### 3-2. Supabaseとの接続設定
Reactアプリケーション内にSupabaseを設定するために、`src`ディレクトリに`supabaseClient.js`ファイルを作成します。SupabaseのURLと匿名キーは、Supabaseダッシュボードの「Settings」から取得できます。

```javascript
// supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = '<Your-Supabase-URL>';
const supabaseAnonKey = '<Your-Supabase-Anon-Key>';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);
```

---

## 4. Todo機能の実装

### 4-1. タスクの追加機能
タスクを追加するためのフォームと、Supabaseにタスクを保存する関数を実装します。

```javascript
const addTask = async (task) => {
  const { data, error } = await supabase
    .from('tasks')
    .insert([{ task, is_complete: false }]);
  if (error) console.error(error);
};
```

### 4-2. タスクの表示機能
データベースからタスクリストを取得し、表示する機能を実装します。

```javascript
const fetchTasks = async () => {
  const { data: tasks, error } = await supabase
    .from('tasks')
    .select('*');
  if (error) console.error(error);
  else setTasks(tasks);
};
```

### 4-3. タスクの更新機能
タスクの完了状態を更新するための機能を追加します。

```javascript
const toggleComplete = async (id, isComplete) => {
  const { data, error } = await supabase
    .from('tasks')
    .update({ is_complete: !isComplete })
    .eq('id', id);
  if (error) console.error(error);
};
```

### 4-4. タスクの削除機能
タスクを削除する機能を実装します。

```javascript
const deleteTask = async (id) => {
  const { data, error } = await supabase
    .from('tasks')
    .delete()
    .eq('id', id);
  if (error) console.error(error);
};
```

---

## 5. デプロイメントと運用
アプリケーションの構築が完了したら、ネット上で公開できるようにデプロイを行います。VercelやNetlifyを使用することで、簡単にアプリケーションをホスティングすることができます。

## まとめ
このプロジェクトを通して、Supabaseを使ったシンプルなTodoアプリの作成方法を学習しました。Supabaseのリアルタイムデータベース機能を利用することで、効率的にアプリケーションを開発することができます。今後は、認証機能やリアルタイム更新機能の実装により、さらに高度なアプリケーションを目指していくことができます。



Supabaseを使ってTodoアプリを作ってみた

目次

続きを読むには単価診断を受けてください（30秒）