【ToDoアプリを作る】データベースを作ってデータを保存する。

前回に引き続きToDoアプリの作成を進めます。

前回までの記事でアプリの機能としては完成になりますが、ローカルホストにアクセスすると毎回タスクは空になっており、登録したタスクを保存することができません。

そこで今回からはデータベースを用意して、タスクを保存できるようにします。

【ToDoアプリを作る】条件分岐によるバリデーション機能

前回の記事はこちらです。

Firebaseを使う

データベースは種類がたくさんあり、作成するサービスの規模やデータ保存のルールなどに応じで選定する必要があります。

今回作成しているToDoアプリは開発の学習として作成しているため、導入コストを抑えて簡単に使えるデータベースとして、Googleが提供しているFirebaseを使用することにします。

Firebaseを使用することでバックエンドの操作をフロントエンド側から行うことができて、バックエンド側の作成をすることなくデータベースを使用することができます。

また、大きなデータを扱うのこともできるので、実際にシステムを開発した場合でも十分使用することができるデータベースになっています。

Firebaseには、いくつかの機能が用意されておりますが、今回はデータベースの機能としてFirebaseのFirestoreの使い方について解説します。

FireStoreの導入

それではFirestoreの導入について解説します。

Firestoreを使用するためには事前にGoogleアカウントを作成しておく必要がありますので、以下の作業を開始する前にご準備をお願いします。

アカウント作成が完了しましたら、Webブラウザを開いてGoogle Firebaseのページにアクセスします。

Google Firebase

Googleアカウントにログインした状態でFirebaseのページにアクスすると「使ってみる」というボタンがあるのでクリックして、プロジェクト追加をクリックします。

次にプロジェクト名を決定します。今回は「ToDoApp」という名前で作業を進めます。

自身の取引、ビジネス、仕事、または職業のみを目的として Firebase を利用することを正式に認めます。　にチェックを入れて「続行」をクリックします。

今回は練習用で作成するのでGoogleアナリティクスの設定な無しで構いません。

実際にウェブサービスを公開してアクセス数をチェックしたい場合はアナリティクの設定を有効にして「プロジェクトを作成」をクリックします。

新しいプロジェクトの準備ができました　と表示されたらプロジェクトの作成完了です。
「続行」をクリックします。

ToDoAppのプロジェクト画面が表示されたら左上にある歯車マーク（設定）をクリックして、プロジェクトの設定をクリックをい開きます。

「全般」タブのプロジェクトの中のデフォルトに GCP リソース ロケーション　という項目があるので編集します。

日本の場合はリソースロケーションをasia-northeast1を選択します。

続いて、プロジェクトの画面に戻り、プランの変更を行います。

初期状態では無料プランが選択されているので従量プラン(Blaze)に変更してください。

Firebaseの設定を進める中で無料プランのまま進めるとエラーが発生してしまうので、必ず変更しましょう。

続いてプロジェクトの画面から、ウェブアイコン</> をクリックします。

アプリのニックネームを入力します。今回はToDoというニックネームにしました。

Firebase Hostingのチェックは無しで アプリを登録をクリックします。

ウェブ上での作業はここで一旦ストップして、設定用ファイルを作成します。

コマンドプロンプトもしくはターミナルを開いて、開発環境のディレクトリに移動します。

そのディレクトリで以下のコマンドを入力して、Firebaseのインストールを行います。

npm install firebase

続いて、開発環境のルートディレクトリに.env.productionというファイルを作成し、以下のコードをコピーしてください。

VITE_API_KEY=apiKeyの値
VITE_AUTH_DOMAIN=authDomainの値
VITE_PROJECT_ID=projectIdの値
VITE_STORAGE_BUCKET=storageBucketの値
VITE_MESSAGING_SENDER_ID=messagingSenderIdの値
VITE_APP_ID=appIdの値

上記の各値は、Webページのconst firebaseConfigの中に書かれていますので全ての値を書き換えます。

const firebaseConfig内の値は他者に公開しないようにご注意ください。

以下、記述例です。適当な値を入れておりますが、設定にはWebページに表示されているConfigの値を正しく入力してください。

VITE_API_KEY="AAAbbbCCCddddEEEEfffffGGGGG"
VITE_AUTH_DOMAIN="appname-num.firebaseapp.com
VITE_PROJECT_ID="appname-num"
VITE_STORAGE_BUCKET="appname-num.appspot.com"
VITE_MESSAGING_SENDER_ID="0123456789"
VITE_APP_ID="AAAbbbCCCddddEEEEfffffGGGGG"

次に、アプリケーションのディレクトリ内にfirebaseという名前のディレクトリを作成します。

今回はtodoappというディレクトリの中にfirebaseディレクトリを作成します。

firebaseディレクトリの中にconfig.jsという名前のファイルを作成して以下のコードをペーストしてください。

export const firebaseConfig = {
   apiKey: import.meta.env.VITE_API_KEY,
   authDomain: import.meta.env.VITE_AUTH_DOMAIN,
   projectId: import.meta.env.VITE_PROJECT_ID,
   storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
   messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
   appId: import.meta.env.VITE_APP_ID,
 };

先ほど作成した.env.productionファイルから各値をimportしてconfigファイルに反映しております。

外部に伏せておきたいパラメータなどは今回のようにenvファイルを用意してそこから参照するようにしましょう。

次にfirebaseディレクトリ内にindex.jsを作成して以下のコードをペーストします。

import { appendFile } from "fs";
import firebase from firebase/appendFile;
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/functions'
import {firebaseConfig} from './config';

const firebaseApp = firebase.initializeApp(firebaseConfig);

export const db = firebaseApp.firestore();
export const auth = firebaseApp.auth();
export const strage = firebaseApp.storage();
export const functions = firebaseApp.functions();
export const FirebaseTimestamp = firebaseApp.firestore.Timestamp();

export default firebase;

上記はFirebaseを使用するための設定を一通りまとめた内容となっております。

まず先ほどインストールしたFirebaseのパッケージから必要なものを一式importしています。

次にconst firebaseApp = firebase.initializeApp(firebaseConfig)にてFirebaseの初期設定をしております。

初期設定以下の記述は、各機能を使用するための初期設定をしております。

この初期設定した関数を呼び出すことで各機能を使用することができます。

次にコマンドでfirebase-toolsをインストールします。以下のコマンドを実行してインストールします。

npm install -g firebase-tools

もし上記コマンドを入力して、administrator権限で再度コマンドを実行するようにエラーが出た場合は、いこあのコマンドを再度実行してみてください。

sudo npm install -g firebase-tools

インストールが完了したら、firebase loginをコマンド入力します。

Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?　と表示されますので「Y」を入力してください。

Webブラウザが自動的に立ち上がってログインの確認画面が表示されるので、指示に従ってログインを済ませましょう。

次にnpm run buildコマンドを実行してfirebase用のファイルを他の設定ファイルたちとまとめて統合します。

次にfirebase initを実行してfirebaseの初期化をします。

コマンドを実行するとターミナル上でFirebaseの初期設定がスタートしますのでメッセージを確認して設定を進めます。

まずは使用する機能を選択します。

十字キーとスペースキーを使って使用する機能にチェックを入れてエンターを押します。

今回は以下の4つを選択しました。

• Firestore
• Functions
• Hosting
• Storage

次にUse an existing projectを選択してエンターを押します。

すると先ほど作成したプロジェクト名が表示されますので、選択してエンターを押します。

次にindexに関する設定のメッセージが表示されますのでエンターを押します。

続いて、使用するプログラミング言語を聞かれますので、今回はTypeScriptを選択します。

次にESlintを導入するか聞かれますのでエンターを押します。
ESlintは構文エラーなどを検知して通知してくれるツールです。

続いてfirebaseを使用するにあたって必要となるファイルなどをインストールするか聞かれますのでエンターを押します。

次にfirebaseのデプロイ用ディレクトリを聞かれます。
ここでdistと入力してエンターをします。distはnpm run buildを実行した際に作られるディレクトリです。

続いて、シングルページのアプリケーションとして構成するかを聞かれるので”Y”を入力してエンターを押します。

次にGithubの設定について聞かれますのでエンターを押します。

続いて、firebaseのルールを設定するファイルについて聞かれますのでエンターを押します。

次に使用するエミュレータを聞かれますので以下の六つを選択してエンターを押します。

• Authentication Emulator
• Functions Emulator
• Firestore Emulator
• Hosting Emulator
• Pub/Sub Emulator
• Storage Emulator

エミュレータのダウンロードをするか聞かれますのでエンターを押します。

以上でターミナルでの設定は完了になります。

最後にターミナルでfirebase deployと入力します。

ターミナル上でメッセージが流れて、最後にDeploy complete!と表示されたらデプロイ作業が完了します。

デプロイが完了することによって、firebaseのウェブサーバー上に開発した環境がウェブサーバー上に構築されます。

ここまで作業が完了したら、Firebaseの導入は完了となります。

次回からFirebaseのCloud Firestoreでデータベースの操作をするための記述を書いていきます。