バニラJavaScriptとFirestoreによるフルスタックToDoリスト

Web
バニラJavaScriptとFirestoreによるフルスタックToDoリスト

バニラJavaScriptとFirestoreによるフルスタックToDoリスト

Firebase（Authentication と Cloud Firestore）をバックエンドに使ったシンプルなToDoアプリのサンプルリポジトリ。HTML/CSS/Vanilla JS（ESモジュール）で実装され、Email/Googleによる認証、Cloud Firestore のリアルタイム同期（onSnapshot）、およびユーザー単位のアクセス制御（セキュリティルール）を備えています。学習目的でFirebaseの基本的な使い方・認証フロー・CRUD操作・リアルタイム更新を理解するのに最適です。

https://github.com/juanHerediaPro/Lista-de-Tareas-Full-Stack-con-JavaScript-Puro-y-Firestore

概要

このリポジトリは、HTML/CSSとバニラ（生）JavaScriptのみで実装されたシンプルなToDoリストアプリのサンプルです。バックエンドは Firebase の BaaS（Authentication と Cloud Firestore）を利用しており、Email/Password と Google Sign-In による認証、Cloud Firestore によるデータ永続化、onSnapshot を使ったリアルタイムなタスクリスト表示を備えます。Firebase のセキュリティルールにより、各ユーザーは自分のタスクだけを読み書きできるように制限されており、学習用サンプルとして Firebase の基本概念（認証、リアルタイムDB、セキュリティルール、フロントでの CRUD 処理）を把握するのに適しています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 2
  • ファイル数: 4
  • メインの言語: JavaScript

主な特徴

  • Email/Password と Google Sign-In による認証機能
  • Cloud Firestore を用いたリアルタイムなタスクリスト（onSnapshot）
  • タスクの追加、完了マーク、削除といった基本 CRUD 操作
  • バニラJS（ESモジュール）で構成され、外部フレームワーク不要

技術的なポイント

このプロジェクトは Firebase の主要サービスをフロントエンド側だけで使う典型例です。認証は Firebase Authentication を通じて実装され、Email/Password と Google OAuth をサポートするために firebase/auth モジュールを用います。認証状態の監視は onAuthStateChanged（または auth.onAuthStateChanged）で行い、ユーザーがログインしているかどうかで表示を切り替えます。

データ保存は Cloud Firestore に集約され、各ユーザーのタスクはユーザーID（uid）で紐づけられたドキュメント／コレクションに格納されます。リアルタイム更新は onSnapshot を使って実現され、Firestore 側で変更があれば自動的にクライアントのタスクリストが再描画されます。クエリではユーザーの uid を条件に絞ることで、各ユーザーが自分のタスクのみを取得する実装が推奨されます。

セキュリティ面では、Cloud Firestore のセキュリティルールにより、request.auth.uid とドキュメントの owner フィールド（あるいはドキュメント ID）を照らし合わせて読み書きを制限する設計です。これによりクライアント側の実装ミスがあっても不正アクセスを防げます。フロント側ファイル構成はシンプルで、firebase-config.js にプロジェクト固有の設定を貼り付けることで環境を切り替えられます。ESモジュールを使った分割により、認証処理・Firestore 操作・UI 更新が分離され、学習や拡張がしやすくなっています。

その他の実装的なポイントとしては、DOM 操作とイベントリスナーでフォーム送信やボタンクリックをハンドルし、Firestore の addDoc・updateDoc・deleteDoc を用いて CRUD を行います。エラーハンドリングや入力バリデーションは最小限で、教材／サンプルとして Firebase の基本パターンを学ぶことに集中した構成です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: file
  • css: dir
  • index.html: file
  • js: dir

README の抜粋にある通り、主に以下の役割分担が想定されます：

  • index.html — エントリと各ビュー（ログイン、タスク一覧）
  • css/style.css — 見た目のスタイル
  • js/firebase-config.js — Firebase 設定（APIキー等を貼り付け）
  • js/… — 認証や Firestore 操作、UI ロジックを含むモジュール

使い方（補足）

  1. Firebase コンソールでプロジェクトを作成し、Authentication（Email と Google）と Cloud Firestore を有効化する。
  2. firebase-config.js に自分の構成を貼り付ける。
  3. Firestore のセキュリティルールを設定して、ユーザーごとにデータアクセスを制限する（例: request.auth.uid == resource.data.uid）。
  4. index.html をローカルサーバーで開き、動作確認する（静的ファイルは http サーバー経由が推奨）。

まとめ

Firebase とバニラJSで学ぶには最適な、実践的で拡張しやすいサンプルリポジトリです（約50字）。

リポジトリ情報：