はじめに
PiyocoTodoは「タスク」「カレンダー」「通知」を一画面に統合したPWA対応のフルスタックTodoアプリです。本記事では、React 18 × Prisma × Google Calendar API で構築した実装のポイントと、今後のロードマップを共有します。
🔗 アプリケーションURL: https://piyocotodo.com
概要
PiyocoTodoは、単なるTodoリストアプリを超えた、包括的なタスク管理システムです。個人の生産性向上からチームのコラボレーションまで、幅広いニーズに対応する機能を、モダンな技術スタックで実現しました。
技術スタック
アプリケーションを構成する主要な技術は以下の通りです。
| レイヤ | 主要技術・ライブラリ | バージョン | 役割 |
|---|---|---|---|
| フロントエンド | React / TypeScript | 18.3 / 4.9 | UI構築、アプリケーション全体の型安全性の確保 |
| Material-UI (MUI) | 7.2 | UIコンポーネントライブラリ | |
| 状態管理 | React Query | 5.8 | サーバー状態管理、APIキャッシュによるUX向上 |
| ルーティング | React Router | 7.1 | SPAの画面遷移制御 |
| バックエンド | Node.js / Express / TypeScript | - / - / 5.6 | サーバーサイドロジック、APIサーバー構築 |
| データベース | Prisma / SQLite | 6.11 / - | ORMによる型安全なDB操作、ローカルDB |
| 認証 | Passport.js | - | Google OAuthを含む認証処理 |
| 外部連携 | googleapis | - | Google Calendar APIとの連携 |
| PWA | Service Worker / web-push | - | オフライン対応、プッシュ通知 |
| インフラ | Vercel / Render | - | フロントエンドとバックエンドのデプロイ |
主要機能
PiyocoTodoは、基本的なCRUD操作に加えて、現代的なアプリケーションに求められる多くの機能を搭載しています。
▼ 基本機能とUX
- 直感的なタスク管理: ドラッグ＆ドロップによる並び替えや、複数リストの管理が可能です。
- 豊富なタスク情報: 優先度、タグ、期日、画像などをタスクに紐付けられます。
▼ チームでの利用
- 共同編集: メンバーを招待し、リアルタイムでリストを共有・編集できます。
- 権限管理: 「オーナー」「編集者」「閲覧者」の3段階で権限を設定できます。
▼ 自動化と連携
- Googleカレンダー双方向同期: タスクの期日をGoogleカレンダーと自動で同期します。
- アラームとWebプッシュ通知: 設定した時間にアラームを鳴らしたり、ブラウザへ通知を送ることができます。
▼ PWA (Progressive Web App)
- オフライン動作: Service Workerにより、ネットワークがない環境でも基本的な操作が可能です。
- ホーム画面に追加: スマートフォンのホーム画面にアイコンを設置し、ネイティブアプリのように素早く起動できます。
技術選定の背景（トレードオフ）
今回の開発では、特に以下の技術選定について理由を明確にしました。
-
状態管理: なぜContext APIでなくReact Queryか？
- API通信に起因する「サーバー状態」に特化しており、キャッシュ、再取得、ローディング/エラー管理といった定型処理を宣言的に記述できるためです。Context APIでこれらを自前実装するのに比べ、コード量が削減でき、パフォーマンスチューニングも容易になると判断しました。
-
データベース: なぜSQLite + Prismaか？
- 個人開発の初期フェーズにおいて、環境構築が容易なSQLiteはスピード感と非常に相性が良いです。そこにPrismaを組み合わせることで、スキーマ定義から型安全なクライアントコードまでを自動生成でき、バックエンドとフロントエンドの型を一貫させる開発体験を最優先しました。
技術的なハイライト
開発で特に工夫した点を3つ紹介します。
1. React Queryによるパフォーマンス改善
APIから取得したデータはReact Queryによってキャッシュされます。これにより、2回目以降のデータ表示が高速化し、体感速度が大幅に向上しました。
【改善ベンチマーク（例）】
| 指標 | 改善前（API直接呼び出し） | 改善後（React Query + Cache） | 改善率 |
|---|---|---|---|
| タスク一覧表示 (TTFB) | 620 ms | 220 ms | -65% |
// API呼び出しを抽象化するカスタムフック
// staleTimeを設定するだけでキャッシュ戦略を組み込める
const useTodos = (listId: string) => {
return useQuery({
queryKey: ['todos', listId],
queryFn: () => api.getTodos(listId),
staleTime: 5 * 60 * 1000, // 5分間キャッシュ
});
};
2. Google Calendar APIとの連携フロー
バックエンドを介してGoogle Calendar APIと連携し、タスクをカレンダーイベントと双方向で同期する仕組みを構築しました。
【連携フロー図】
[クライアント] <---- React Query ----> [バックエンドAPI (Node.js/Express)]
(ブラウザ) │
│ │ (googleapis)
Service Worker (PWA) │
│ ▼
(通知/オフライン) [Google Calendar API]
3. 型安全なデータベース操作
Prismaのスキーマ駆動開発により、データベースの定義(schema.prisma)を変更すると、それを利用するTypeScriptの型も自動で更新されます。これにより、APIの実装ミスや型の不整合をコンパイル時点で検知できました。
// Prismaのスキーマ定義（抜粋）
model Task {
id String @id @default(cuid())
title String
dueDate DateTime?
googleCalendarEventId String? // Google Calendar連携用のID
list List @relation(fields: [listId], references: [id])
listId String
}
今後の展開
PiyocoTodoは、ユーザーの皆様からのフィードバックを元に、継続的なアップデートを計画しています。直近で対応を検討しているタスクは以下の通りです。
▼ 機能拡張
- ガントチャート機能: タスクの期間を視覚的に管理できるよう、開始日と終了日を元にしたガントチャート機能の実装を検討しています。
- 一括エクスポート機能: 作成したTodoリストを外部データとして一括で書き出せる機能を追加します。
- 共同編集機能の強化: 招待した相手の承認を経てから共同編集が開始される、承認フローを導入します。
▼ 品質・ユーザビリティ向上
- ブラウザ固有のスクロール問題の解消: 特定のブラウザで発生しているスクロール時の表示不具合（レンダリングのタイミング問題と推測）を修正します。
- 複数アカウント対応: 同一ブラウザで複数のアカウントを切り替えて利用できるように改善します。
- SEO対策: より多くの方にPiyocoTodoを知っていただけるよう、検索エンジン最適化を進めます。
まとめ
PiyocoTodoは「自前でフルスタックを書き切る」を徹底したことで、仕様変更に強い型基盤と、ネイティブアプリ級のUXを両立できました。
開発の過程で得られた知見が、同様のプロジェクトに取り組む方々の参考になれば幸いです。次はガントチャート × 共同編集で“チーム全体の可視化”へ踏み出します。