はじめに

この記事はフィヨルドブートキャンプ Part 2 Advent Calendar 2024 の10日目の記事です。

フィヨルドブートキャンプのアドベントカレンダー2024には、以下の2つがあります：

昨日(12/9)は beta_chelsea さんのヒトは如何にしてGitの習得に至るのかを考え中でした。チーム開発に参加して git のことを実践的に学びたいと思いました。

成果物

Neomorphism デザインを取り入れた TODO アプリです。

🔖 目次

1. 自己紹介
 2. 環境の準備
 3. Supabase のセットアップ
 4. アプリケーションの構築
 5. 動的ルーティングでのタスク編集
 6. Neomorphism デザインの適用と解説
 7. おわりに

1. 自己紹介

フィヨルドブートキャンプで学習している Kazuma です。
フロントエンドについて学んでいます🖊
この記事では Next.js (14.2.18), React (18.2.0), Supabase (1.223.10) を使った TODO アプリを作成します。

完成するアプリの主な機能：

タスクの追加・削除
タスクの完了状態の切り替え
タスクテーブルのリセット
タスク編集 (動的ルーティング対応)

2. 環境の準備

必要なツール

Node.js (16 以上)
Next.js (14.2.18)
Supabase CLI
- Supabase CLI インストールガイドを参考にしてください。

プロジェクトの作成

npx create-next-app@14.2.18 todo-app
cd todo-app
npm install @supabase/supabase-js

Supabase をローカルで動作させるために CLI を使用してセットアップします。

npx supabase init
npx supabase start

npx supabase status

Supabase の URL と anon キーを .env.local に記載する

.env.local

NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon_key>

3. Supabase のセットアップ

テーブル作成

Supabase の SQL エディタで以下のクエリを実行し、todos テーブルを作成します：

Supabase Studio内の SQL Editor

create table todos (
  id uuid primary key default gen_random_uuid(),
  task text not null,
  is_complete boolean default false,
  created_at timestamp default now()
);

4. アプリケーションの構築

`app/page.tsx` の解説

1. タスクの取得 (`fetchTodos`)

Supabase の todos テーブルからデータを取得してリストに表示します。

const fetchTodos = async () => {
  const { data, error } = await supabase
    .from('todos')
    .select('*')
    .order('created_at', { ascending: true });
  if (!error) setTodos(data || []);
};

2. タスクの追加 (`addTodo`)

入力されたタスクを Supabase に挿入し、リストを更新します。

const addTodo = async () => {
  if (!newTask.trim()) return;
  const { data } = await supabase
    .from('todos')
    .insert([{ task: newTask }])
    .select('*');
  setTodos((prev) => [...prev, ...(data || [])]);
  setNewTask('');
};

3. タスクの完了状態の切り替え (`toggleComplete`)

タスクの完了状態を反転させます。

const toggleComplete = async (id: string, currentState: boolean) => {
  const { error } = await supabase
    .from('todos')
    .update({ is_complete: !currentState })
    .eq('id', id);
  if (!error) {
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, is_complete: !currentState } : todo
      )
    );
  }
};

5. 動的ルーティングでのタスク編集

動的ルーティングの設定

app/pages/edit/[id].tsx を作成して、動的ルーティングを設定します。
この仕組みにより、URL の id を元に特定のタスクを編集できます。

`[id].tsx` の解説

1. タスクの取得

URL パラメータから id を取得し、Supabase を使用して該当タスクを取得します。

const fetchTask = useCallback(async () => {
  const { data } = await supabase
    .from('todos')
    .select('task')
    .eq('id', id)
    .single();
  setTask(data?.task || '');
}, [id]);

2. タスクの更新

入力した新しいタスク名で該当タスクを更新します。

const updateTask = async () => {
  await supabase.from('todos').update({ task }).eq('id', id);
  router.push('/');
};

3. タスクの削除

削除ボタンをクリックすると、タスクが削除されてホームに戻ります。

const deleteTask = async () => {
  if (confirm('Are you sure you want to delete this task?')) {
    await supabase.from('todos').delete().eq('id', id);
    router.push('/');
  }
};

6. Neomorphism デザインの適用と解説

ここでは、アプリの UI に Neomorphism デザイン を取り入れる方法を詳しく解説します。

Neomorphism デザインの要点

Neomorphism デザインの基本原則は以下の通りです：

光と影:
- 背景色に近い要素の色を選択。
- 明るい影と暗い影を box-shadow で表現。
エッジの柔らかさ:
- border-radius を使用して要素に丸みを持たせます。
トランジション効果:
- インタラクティブな操作時にアニメーションを加えます。

プレビュー

See the Pen Untitled by Kazuma Naka (@Kazuma-Naka) on CodePen.

7. おわりに

この記事では、Next.js と Supabase を使用して作成した TODO アプリを作成する方法を解説しました。Next.js を使うと、動的ルーティングを簡単に設定でき、編集ページを実装したい際に活用できます。