これまで学んできた内容の復習を兼ねて、TODOアプリを作成していきます。TODOアプリはやるべきことを登録でき、登録した内容が一覧となって表示されるようなアプリです。登録したTODOとチェックボックスがセットになっているアプリが多く、完了したらチェックを入れるような使い方をします。

この教材で作成するアプリは以下の画像に表示するアプリになります。

サインイン画面

TODO登録・編集画面

TODO一覧画面

TODO一覧画面（チェックボックスをクリックした例）

アプリの各画面の機能は以下のようになります。

画面名	URL(ドメイン以降)	役割
サインイン画面	signin	ユーザにサインインさせる。
TODO登録・編集画面	to_do/edit	TODOを登録あるいは更新させる。
TODO一覧画面	to_do	登録済みのTODO一覧を表示する。TODOに対して完了のチェックや削除を行える。

アプリの画面遷移図は以下のようになります。

画面遷移図

アプリの詳細を説明します。アプリを実行すると、サインイン画面が表示されます。サインイン画面のサインインボタンをクリックすると、グーグルアカウント認証用のポップアップが表示され、サインインに使用するアカウントを選択できます。アカウントを選択するとサインインでき、TODO一覧画面が表示されます。TODO一覧画面では登録したTODOに対してチェックや削除ができます。TODO一覧画面の左上にある編集ボタンをクリックすると、TODO登録・編集画面が表示されます。TODO登録・編集画面ではTODOの新規登録や登録済みのTODOを編集することができます。TODO登録・編集画面の左上にある表示ボタンをクリックすると、TODO一覧画面が表示されます。また、TODO一覧画面およびTODO登録・編集画面の右上にあるサインアウトボタンをクリックすることでサインアウトできます。サインアウトすると、サインイン画面に戻ります。これらのアプリで登録したTODOはデータベースに保存します。アプリのサインイン機能とデータベースにはFirebaseを使用します。以降ではFirebaseの詳細について説明します。

Firebaseとは

Firebaseはアプリ開発のために必要なバックエンドの機能をクラウド上で提供するサービスです。お馴染みのGoogle社が提供するサービスです。Firebaseを利用してアプリ開発することには、以下のようなメリットがあります。

• アプリの管理が容易にできる
• 豊富な機能が利用できる
• データの同期を簡単に行える
• アプリケーションのデプロイが高速に行える
• Vue.JS、Nuxt.JS、ReactなどWebアプリケーションを構築するためのモダンなフレームワークとの相性が良い

プロジェクトの作成

それではFirebaseのプロジェクトを作成していきましょう。以下の手順に従ってプロジェクトを作成します。

1. Firebase公式HPにアクセスします。
2. 以下のページで“使ってみる”をクリックします。

Firebaseプロジェクトの作成方法（手順２）

3. グーグルアカウントにログインしていない場合、手順２の操作の後、Googleアカウントのログインページが表示されるので、お使いのアカウントにログインします。もしアカウントを持っていなければ、このタイミングでアカウントを作成しましょう。
4. 以下のページで“プロジェクトを作成”をクリックします。

Firebaseプロジェクトの作成方法（手順４）

5. 以下のページが表示されるので、プロジェクト名の入力欄に好きなプロジェクト名を入力します。特にこだわりがなければ、この例のように“my-project”としましょう。プロジェクト名を入力したら、チェックボックスにチェックして続行をクリックします。

Firebaseプロジェクトの作成方法（手順５）

6. 特に必要ないので、以下のページの“このプロジェクトでGoogleアナリティクスを有効にする”のスイッチは無効化し、プロジェクトを作成をクリックしましょう。

Firebaseプロジェクトの作成方法（手順６）

7. しばらく待つと、以下の画面が表示されるので続行をクリックしましょう。以上でプロジェクトの作成は完了です。

Firebaseプロジェクトの作成方法（手順７）

AuthenticationとGoogle ログインを有効にする

以下の手順でAuthenticationとGoogle ログインを有効にします。

1. プロジェクトのページ左のサイドバーにある“プロダクトのカテゴリ”から“構築”→“Authentication”をクリックします。

AuthenticationとGoogle ログインの有効化（手順１）

2. Authenticationのダッシュボードが表示されるので、始めるをクリックします。

AuthenticationとGoogle ログインの有効化（手順２）

3. “Sign-in method”のタブにあるログインプロバイダから、Googleを選択します。

AuthenticationとGoogle ログインの有効化（手順３）

4. 以下の写真で左上にあるトグルスイッチを有効にします。その後、プロジェクトのサポートメールの入力欄にログインしているグーグルアカウントのメールアドレスを設定し、保存をクリックして設定を完了します。

AuthenticationとGoogle ログインの有効化（手順４）

データベース作成

アプリのTODOを保存するデータベースであるCloud Firestoreを以下の手順で設定します。

1. ページ左のサイドバーの“プロダクトのカテゴリ”から“構築”→"Firestore Database"をクリックします。

データベースの作成（手順１）

2. ダッシュボードの“データベースの作成”をクリックします。

データベースの作成（手順２）

3. “テストモードで開始する”のラジオボタンを選択し、次へをクリックします。

データベースの作成（手順３）

4. “Cloud Firestoreのロケーション”を“asia-northeast1 (Tokyo)”に設定し、“有効にする”をクリックして設定完了です。

データベースの作成（手順４）

Cloud Firestoreの設定

続いて、Cloud Firestoreのデータベースの特徴とこのアプリでデータベースの構造をどのようにするかを説明した後、Cloud Firestoreへのアクセスについてのルールを設定したいと思います。

Cloud FirestoreはNoSQLドキュメント指向データベースという種類のデータベースになります。全てのデータはフィールドと値のペアで作成し、「ドキュメント」に格納されます。「ドキュメント」は複数作成でき、必ず「コレクション」にまとめられます。「ドキュメント」の中に「サブコレクション」と呼ばれる「コレクション」を作成し、その配下に「ドキュメント」作成するといった階層構造にすることも可能です。ここでは概略の説明にとどめますが、詳細は公式サイトのCloud Firestore データモデルの説明をご覧ください。

Cloud Firestoreの特徴が説明できたところで、本アプリのデータベースの構造を定義したいと思います。色々な方法が考えられますがこの教材では以下の構造にします。

コレクション	ドキュメント
	ドキュメント名	データ
users	uid1	TODO（サブコレクション）
	uid2	TODO（サブコレクション）
	・ ・ ・	・ ・ ・

サブコレクション	ドキュメント
	ドキュメント名	データ（フィールド名）
TODO	自動生成	created_date finished task
	自動生成	created_date finished task
	・ ・ ・	・ ・ ・

コレクション－ドキュメント－サブコレクション－ドキュメントという階層構造にしています。上の表がコレクション－ドキュメントの部分になります。ドキュメント名の"uid1"や"uid2"等はアプリを利用するユーザの認証情報に含まれるIDになります。これにより、サインインしているユーザーごとに参照するデータを変更できるようにします。各ドキュメントはデータとして、サブコレクション"TODO"を保有します。下の表がサブコレクション－ドキュメントの部分になります。サブコレクション"TODO"は登録されたTODOと同数のドキュメントを保有します。ドキュメント名はTODO登録時に自動で生成されるようにします。一つのドキュメントは一つのTODOの情報を保有します。ドキュメントのフィールド"created_date"、"finished"、"task"はそれぞれTODOの作成日時、TODOの完了の状態、TODOの内容になります。以上がCloud Firestoreのデータベースの特徴とアプリでのデータベースの構造の設定についての説明となります。最後に、セキュリティに関わるCloud Firestoreへのアクセスについてのルールを以下の手順で設定します。

1. ページ左のサイドバーの“プロダクトのカテゴリ”から“構築”→"Firestore Database"をクリックします。
2. ダッシュボードの“ルール”のタブをクリックし、以下のページを表示します。

Cloud Firestoreのルール設定（手順２）

3. 上の画像で赤枠で囲った部分を以下のように書き換えます。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {     
      match /TODO/{document=**} {
        allow read, update, delete: if request.auth != null && request.auth.uid == userId;
        allow create: if request.auth != null;
      }
    }
  }
}

上記は、サインインしていない場合にデータベースへの新規の書き込みを出来なくし、またアクセスしたデータに該当するユーザでない場合にデータの読み込み、更新、削除をできないように設定しています。上記の構文について理解を深めたい方は、こちらとこちらに加えてこちらをご確認ください。

4. 書き換えると以下の画像の状態になるので、"公開をクリックし、設定完了になります。

Cloud Firestoreのルール設定（手順４）

プロジェクトの作成

Firebaseのプロジェクトへのアプリの追加を以下の手順で実施します。

1. 以下の画像の赤丸で囲ったアイコンをクリックします。

プロジェクトへのアプリの追加（手順１）

2. アプリのニックネームを設定し、アプリを登録します。以下の画像では"todo-app"としていますが、別の名前でも構いません。

プロジェクトへのアプリの追加（手順２）

3. "npmを使用する"のラジオボタンを選択し、コンソールに進むをクリックして、設定完了です。

プロジェクトへのアプリの追加（手順３）

Firebaseの残りの設定に進む前に、ReactでTODOアプリ用のプロジェクトを作成します。このプロジェクト用にフォルダを作成したら、ターミナル上でそのフォルダに移動し、以下のコマンドでプロジェクトを作成しましょう。

npx create-react-app to-do-app

ここではプロジェクト名を"to-do-app"としていますが任意の名前で構いません。プロジェクトの作成が完了したら、以下のフォルダ構成になるようにしましょう。

.
└── to-do-app
    ├── public
    │   ├── index.html
    │   └── （その他）
    ├── src
    │   ├── App.jsx
    │   ├── index.jsx
    │   ├── comnponents ← 新規作成
    │   ├── context ← 新規作成
    │   ├── hooks ← 新規作成
    │   ├── pages ← 新規作成
    │   └── （その他）
    └── （その他）

環境変数の設定

プロジェクトにFirebaseをインストールします。プロジェクトフォルダで以下のコマンドを実行します。

npm install firebase

次に、Firebaseとの連携が可能となるよう環境変数を設定します。以下の手順で設定します。

1. Firebaseのサイトのサイドバーにあるプロジェクトの概要の右の歯車→プロジェクトの設定の順にクリックします。

環境変数の設定（手順１）

2. ダッシュボードの全般のタブをクリックし、下の方にあるマイアプリの中にある以下の画像に示すコードをコピーします。

環境変数の設定（手順２）

3. srcフォルダにファイルを新規作成し、コピーした内容を貼り付けてfirebase.jsという名前で保存します。

Firebaseとの連携

firebase.jsのコピーした内容の下に以下の内容を追加します。

firebase.js

（省略）

const db = getFirestore(app);       //データベースの取得
const auth = getAuth(app);          //認証情報を取得
const provider = new GoogleAuthProvider();  //Google プロバイダ オブジェクトのインスタンスを作成
                      
export { db, auth, provider };

以上でFirebaseとの連携の準備は完了となります。