【React/Firebase】TodoistCloneアプリに挑戦してみました #JavaScript

はじめに

ReactとFirebaseを使って、TodoistのCloneアプリケーションに挑戦してみました。

今回の記事では、リポジトリの紹介も兼ねて、やろうと思った経緯や反省等をまとめた活動記録となっております。
（量も膨れるので細部への技術紹介は省いています。気が向けば別記事出します。）

完成イメージ

筆者について

ちょっとだけ紹介させてください。
普段は、Symfonyをベースとしたシステム開発を行っています（主にDrupal）。
パソコン触りだして1.5年ちょい。アクイア認定DrupalExpertの資格を保有しています。
興味があれば覗いてね→ Certifications

経緯

ここ最近「NetflixCloneアプリ」「DiscordCloneアプリ」といった、既存のサービスを題材にしたリポジトリを見かけることが多くなりましたよね。
そこで私は自身のフロントエンドの技術強化を図って「TodoistCloneアプリ」を実装してみました。

いつもはPHPを書くことが多いのですが、今回息抜きを兼ねてフロントエンドのフレームワークを触ってみようかなと...。

技術スタック

フロントエンド

React(TS)

データベース

Firestore(Firebase)

ビルドツール

Vite

デプロイ & ホスティング（予定）

Vercel

実装について

ほんの少しですが実装の解説をします。

テーブル設計

こんな感じでテーブルを構築しました。

Project

Field	Type
docId	string
name	string
userId	string

Task

Field	Type
docId	string
name	string
projectId	string
date	Timestamp
archived	boolean
userId	string

User

Field	Type
docId	string
firstName	string
lastName	string

ディレクトリ構成

src
├── assets/
├── components/
│   ├── Layout/
│   ├── Sidebar/
│   ├── Task/
│   └── UI/
│       ├── Button.tsx
│       ├── Input.tsx
│       ├── Link.tsx
│       ├── Modal.tsx
│       ├── Select.tsx
│       └── index.ts
├── firebase/
├── hook/
├── model/
│   ├── index.ts
│   ├── project.model.ts
│   ├── task.model.ts
│   └── user.model.ts
├── routes/
├── styles/
├── views/
├── App.tsx
└── main.tsx

components

UIコンポーネントや、機能別のコンポーネントを実装しています。
参考にしたリポジトリでは、細かいところまでコンポーネント化していませんでしたが、
今回再利用性を考慮して機能量のわりに、冗長にコンポーネント化を行いました。

firebase

Firebaseの接続設定やデータ同期の関数を実装しています。

hooks

カスタムフック（タスクの使用、API呼び出しの管理など）を実装しています。

model

型定義ファイルを実装しています。

routes

Routing設定を記載しています。

styles

GlobalCSSファイルを実装しています。

views

Routing単位でページを実装しています。

機能紹介

Task操作: タスクの追加、削除、アーカイブが可能です。
Project操作: プロジェクトの追加、削除が可能です。
クイックフィルター機能: 以下の項目でタスクの絞り込みが可能です。
- インボックス、今日、近日予定
- プロジェクト
リアルタイム同期: Firestoreを使用したデータのリアルタイム同期が可能です。

未実装（今後やりたいこと）

サブタスク
ログイン
1. ユーザー管理
2. アカウント切り替え
3. アバター等、プロファイル設定
アーカイブ一覧
Update機能（Task, Project）
操作の取り消し

限られた個人学習の範囲内で進めているため、エラーハンドリングが不十分な箇所や、細かいユーザビリティに十分対応できていない部分が多々あります。
今後のモチベーション等と相談して、よりよりリポジトリにしていければいいなと考えています。

まとめ

今まで、Firebaseを扱う経験があまりなかったので、こんな簡単にデータベースを作成できるというのは少し意外でした。
普段はSSR実装が多いので、SPAとFirestoreのリアルタイム性にもびっくり。

どの程度、再利用性を持たせるのか、あえて局所的な実装にするのか等の判断はまだまだ不足しているなと感じしているところ。

さくっと終わらせるつもりが、実装を進めるほどにやりたい機能やこだわりたい箇所が増えてだらだらと開発を続けていたのは少し反省かもしれません。
あくまで、経験値向上目的であったため区切りをつけることを覚えたいと思います。
（ちょっとだけ真面目に反省）

最後に

リポジトリのREADMEを読めば、恐らく環境構築ができるように手順を記載しています。
なんかあればコメント下さい。

気が向けば、技術紹介記事も書こうかなと思っています。

参考

今回参考にした、リポジトリをこちらでご紹介させていただきます。

１つ目のリポジトリでは、開発者がYoutubeにて解説動画を挙げられています。
筆者も動画を参考にさせていただきました。

【React/Firebase】TodoistCloneアプリに挑戦してみました

目次