【60日間個人開発チャレンジ】4日目

ゆうじろう|アウトプットの場

2025年7月15日 00:44

こんにちわ！ゆうじろうです。
週末は北海道の道東（知床・屈斜路）に行ってまして、パソコンさわれませんでした。すんません。写真を供養しときます。

4日目は何するのか

4日目はある思いつきから始まります。

「Todoアプリを作ろう」

エンジニア初心者の登竜門ですね。ただ、私はこれでは飽きたりません。

「完了したタスクの実績時間を計測し、その実績をGoogleカレンダーに反映する」というプラスアルファを作れたら、日常の業務でも活かせてHappyだなと思いました。

そんなところで、今回はGoogleカレンダーと連携した、実際に私の業務で作れそうなTodoアプリを作ろう！というものになりました！（多分今後数日はこれに取り掛かることになると思います。）

そしてそして、何を言っているかわからないながらもYoutubeでAI駆動開発関連の動画を色々見てるとよく見かけるんですよね。緑色の稲妻を。設計のフロー図などでよくいます。こいつ

こいつはなんだか「データベースらしい」という知識だけは持ってました。そして、「なんかいろんなところに使われてるからなんか使えるんだろう」というあまりにも浅すぎる理由で今日はこれの使い方を覚えよう！という気持ちになりました。

そこで「🔍Supabase使い方」で検索したところ、あるYoutubeがヒットしました。

なんともおあつらえ向きなサムネでしょうか。そして、中身を見てみるとなんとTodoアプリを作るみたいではありませんか！！今日はこれを見ながら手を動かしていくことになりそうです。

まずは作りたいものの言語化

まずは、作りたいものをもう少し具体的に言語化していくのと、できそうかをClaudeくんと壁打ちします

Next.jsとSupabaseを使ったTodo管理アプリの設計について、以下のような構成を提案します。

## データベース設計（Supabase）

### テーブル構造

**users テーブル**
```sql
- id: uuid (primary key)
- email: text
- google_refresh_token: text (nullable)
- created_at: timestamp
```

**todos テーブル**
```sql
- id: uuid (primary key)
- user_id: uuid (foreign key → users.id)
- title: text
- description: text (nullable)
- status: text ('pending', 'in_progress', 'completed')
- started_at: timestamp (nullable)
- completed_at: timestamp (nullable)
- duration: integer (秒数)
- synced_to_calendar: boolean (default false)
- google_event_id: text (nullable)
- created_at: timestamp
- updated_at: timestamp
```

**time_logs テーブル**
```sql
- id: uuid (primary key)
- todo_id: uuid (foreign key → todos.id)
- started_at: timestamp
- ended_at: timestamp (nullable)
- duration: integer (秒数)
```

## アプリケーション構造

### フロントエンド構成
```
src/
├── app/
│   ├── page.tsx (ダッシュボード)
│   ├── auth/
│   │   └── callback/route.ts
│   └── api/
│       ├── todos/route.ts
│       ├── timer/route.ts
│       └── calendar/sync/route.ts
├── components/
│   ├── TodoList.tsx
│   ├── TodoItem.tsx
│   ├── Timer.tsx
│   └── CalendarSync.tsx
├── lib/
│   ├── supabase/
│   │   ├── client.ts
│   │   └── server.ts
│   └── google/
│       └── calendar.ts
└── hooks/
    ├── useTodos.ts
    └── useTimer.ts
```

## 主要機能の実装方針

### 1. 認証機能
- Supabase Authを使用
- Googleアカウントでのログイン（カレンダー連携のため）
- JWTトークンの管理

### 2. タイマー機能
- ブラウザのローカルストレージで一時的な計測データを保持
- 1秒ごとに更新されるリアルタイムカウンター
- バックグラウンドでも継続する設計（Service Workerの活用も検討）

### 3. Google Calendar連携
- OAuth2.0でGoogle Calendar APIの認証
- 完了したタスクを予定として登録
- タスク名、実施時間、所要時間を含む

## 技術スタック詳細

### フロントエンド
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- React Hook Form（フォーム管理）
- Zustand（状態管理）

### バックエンド
- Supabase (PostgreSQL)
- Supabase Realtime（リアルタイム同期）
- Google Calendar API

### 開発環境
```json
{
  "dependencies": {
    "next": "^14.0.0",
    "@supabase/supabase-js": "^2.0.0",
    "@supabase/auth-helpers-nextjs": "^0.8.0",
    "googleapis": "^128.0.0",
    "zustand": "^4.0.0"
  }
}
```

## セキュリティ考慮事項

1. **Row Level Security (RLS)**
   - Supabaseで各ユーザーが自分のTodoのみアクセス可能に設定

2. **環境変数**
   ```
   NEXT_PUBLIC_SUPABASE_URL
   NEXT_PUBLIC_SUPABASE_ANON_KEY
   SUPABASE_SERVICE_ROLE_KEY
   GOOGLE_CLIENT_ID
   GOOGLE_CLIENT_SECRET
   ```

3. **APIルートの保護**
   - Supabaseのセッション確認
   - CSRFトークンの実装

## 実装の優先順位

1. Supabaseのセットアップとテーブル作成
2. 基本的なTodo CRUD機能
3. タイマー機能の実装
4. Google OAuth認証の設定
5. カレンダー連携機能
6. UI/UXの改善

この設計で進めていく際、特に詳しく聞きたい部分や、変更したい箇所はありますか？

出てきたアウトプットがわけわかめだったので、

Todo管理アプリの設計を、プログラミング初心者向けに分かりやすく説明しますね！

## 🏠 アプリの全体像

このアプリは「やることリスト」に「ストップウォッチ」機能がついたものです。タスクを終えたら、その記録をGoogleカレンダーに自動で保存できます。

## 📚 使う技術の説明

### Next.js（ネクストジェイエス）
ウェブサイトを作るための道具です。例えるなら、家を建てるときの「建築キット」のようなもの。すでに基本的な部品が用意されているので、早く作れます。

### Supabase（スパベース）
データを保存する場所です。例えるなら「クラウド上の収納ボックス」。Todoリストの内容や、かかった時間などを保管します。

### Google Calendar API
Googleカレンダーと会話するための「通訳」のような仕組みです。

## 🗂️ データの保存方法

アプリで使うデータは3つの「引き出し」に分けて整理します：

### 1. ユーザー情報の引き出し（users）
- あなたのメールアドレス
- Googleアカウントの接続情報
- アカウントを作った日時

### 2. Todoリストの引き出し（todos）
- タスクの名前（例：「レポートを書く」）
- タスクの説明
- 状態（未着手・作業中・完了）
- かかった時間
- カレンダーに転送済みかどうか

### 3. 時間記録の引き出し（time_logs）
- いつ始めたか
- いつ終わったか
- 合計時間

## 🎯 主な機能

### 1. ログイン機能
Googleアカウントでログインします。これにより：
- 自分だけのTodoリストが使える
- Googleカレンダーとの連携が可能になる

### 2. タイマー機能
ストップウォッチのように：
- 「開始」ボタンで計測スタート
- 「停止」ボタンで一時停止
- ブラウザを閉じても時間は継続

### 3. カレンダー転送機能
完了したタスクを、ボタン一つでGoogleカレンダーに記録：
- タスク名
- 実際に作業した時間帯
- かかった時間

## 📁 ファイルの整理方法

アプリのファイルは、部屋の整理整頓のように分類します：

```
アプリのフォルダ/
├── 画面表示用/（ユーザーが見る画面）
├── 部品置き場/（ボタンやリストなどの部品）
├── 道具箱/（データベースやGoogleとの接続用）
└── 便利機能/（よく使う処理をまとめたもの）
```

## 🔒 セキュリティ対策

### 他人のデータは見えない仕組み
- 自分のTodoリストだけが表示される
- 他の人のデータにはアクセスできない

### パスワードの管理
- 重要なパスワード（APIキーと呼ばれる）は、金庫（環境変数）に保管
- 誰にも見せないように管理

## 🚀 作る順番

1. **データを保存する場所を準備**
   - Supabaseにアカウントを作る
   - データの引き出し（テーブル）を作成

2. **基本的なTodo機能**
   - タスクを追加・編集・削除できるように

3. **時間計測機能**
   - ストップウォッチ機能を追加

4. **Googleアカウント連携**
   - ログイン機能を実装

5. **カレンダー転送機能**
   - 完了タスクをカレンダーに送る

6. **見た目を整える**
   - 使いやすいデザインに仕上げる

## 💡 プログラミングのコツ

- 一度に全部作ろうとしない
- 小さな機能から順番に作る
- エラーが出ても焦らない（誰でも最初はエラーだらけ）
- 分からないことは検索やAIに聞く

この説明で、アプリの全体像は掴めましたか？特定の部分についてもっと詳しく知りたい場合は、遠慮なく聞いてくださいね！

幾分かわかりやすい内容が出てきました！よし、なんかいけそう！
というところで早速動画を見ながら手を進めていいきます。

手を動かしていくぅ

とりあえずSupabaseでの登録（github連携）完了しました。

次に、動画はNext.jsの環境構築に入っていきます。これがなかなか進まないのなんの。動画自体が2年前のものだからですかね？Next.js自体のDLはすぐできるのですが

動画内の進み方と私のVScode上で起きる現象がちょくちょく違くて、その先をかなりClaudeにスクショで聞きまくってました。

Next.jsを入れたらTailwind CSSを追加するみたいなのですがこれもよくわからず。グルグルグルグルでした。

Claudeに聞いては直してを繰り返して、そしたらどんどん悪化してわけわからなくなりました。なので再度Next.jsをインストールし直して、基本Claudeくんとの対話で進めることにしましたとさ。

おしまいおしまい。
格闘の時間が長くあまり進められませんでした。
そもそも今日は一回もバイブコーディングしてねぇ

ではまた明日