はじめに

Firebaseの機能の1つである、Firestoreを使用して、WebアプリにCRUD機能を実装する機会があったので、その手順を記録しておきたいと思います。
FirestoreはNoSQLのため、SQLなしでDBと通信をすることができます。

事前準備

index.html

<body>
    <h1>Firestore-test</h1>
    Document名<input type="text" id="document">
    内容<input type="text" id="content">
    <button onclick="add()">追加</button>
    <button onclick="getData()">読み取り</button>
    <button onclick="add()">更新</button>
    <button onclick="deleteData()">削除</button><br>
</body>

事前準備として、上記の内容のファイルを作成しておきます。

Firebaseプロジェクトの作成

通常通りFirebaseのプロジェクトを作成します。
初めての方はこちらの記事の、プロジェクト作成部分を参考にしてみてください。

Firebaseの設定

1. プロジェクトにWebアプリを追加

プロジェクト作成後、Webアプリを追加します。
初めての方は、こちらの記事を参考にしてください。
今回は、index.htmlに全て記述します。

index.html

<body>
    <h1>Firestore-test</h1>
    Document名<input type="text" id="document">
    内容<input type="text" id="content">
    <button onclick="add()">追加</button>
    <button onclick="getData()">読み取り</button>
    <button onclick="add()">更新</button>
    <button onclick="deleteData()">削除</button><br>

    <!-- ここからfirebaseの設定 -->
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>

    <script>
    var firebaseConfig = {
        apiKey: "Your_apiKey",
        authDomain: "Your_authDomein",
        projectId: "Your_projectId",
        storageBucket: "Your_storageBucket",
        messagingSenderId: "Your_messagingSenderId",
        appId: "Your_appId",
        measurementId: "Your_measurementId"
    };
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
    </script>
    <!-- ここまでfirebaseの設定 -->
</body>

上記のようになります。

2. Firestoreの設定

設定 → プロジェクトの設定を選択
デフォルトのGCPリソースロケーションを「asia-northeast1」に設定します。
※asia-northeast1は東京を示しています。海外等に指定する場合は、任意のものとしてください。

Firestore Database → データベースの作成

テストモードを選択 → 次へ → 有効にする
※本番で使用する場合は、本番環境を選択してください

上記画面が出れば、設定完了です。この画面にDBの内容が表示されます

3. CRUD機能の追加

Firestoreを使用するため、事前に以下のコードを追記します

<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>

index.html

<!-- ここからfirebaseの設定 -->
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>

index.htmlファイルが上記のようになります。

const db = firebase.firestore();

全機能に共通している、上記コードも忘れずに記述してください。

追加、更新機能

// 追加、更新用のメソッド
    const add = async () => {
        const contentData = document.getElementById('content').value;
        const documentData = document.getElementById('document').value;
        const docRef = db.collection('PostList').doc(documentData);
            await docRef.set({
                content: contentData
            });
    }

documentと内容を記述し、Firestoreに追加します。
更新の場合は、documentoを指定すれば良いので、同じ動作で問題ないです。

読み取り機能

    // 読み取り用メソッド
    const getData = async () => {
        const snapshot = await db.collection('PostList').get();
        snapshot.forEach((doc) => {
            console.log(doc.id, '=>', doc.data());
        });
    }

コレクション名「PostList」の全データを取得し、コンソールに表示させます。

削除機能

    // 削除用のメソッド
    const deleteData = async () => {
        const documentData = document.getElementById('document').value;
        await db.collection('PostList').doc(documentData).delete();
    }

document名を入力することで、そのdocumentを削除できます。

完成したHTMLファイル

index.html


<body>
    <h1>Firestore-test</h1>
    Document名<input type="text" id="document">
    内容<input type="text" id="content">
    <button onclick="add()">追加</button>
    <button onclick="getData()">読み取り</button>
    <button onclick="add()">更新</button>
    <button onclick="deleteData()">削除</button><br>

    <!-- ここからfirebaseの設定 -->

    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>

    <script>
    var firebaseConfig = {
        apiKey: "Your_apiKey",
        authDomain: "Your_authDomein",
        projectId: "Your_projectId",
        storageBucket: "Your_storageBucket",
        messagingSenderId: "Your_messagingSenderId",
        appId: "Your_appId",
        measurementId: "Your_measurementId"
    };
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
    // ここまでfirebaseの設定

    const db = firebase.firestore();

    // 追加、更新用のメソッド
    const add = async () => {
        const contentData = document.getElementById('content').value;
        const documentData = document.getElementById('document').value;
        const docRef = db.collection('PostList').doc(documentData);
            await docRef.set({
                content: contentData
            });
    }

    // 読み取り用メソッド
    const getData = async () => {
        const snapshot = await db.collection('PostList').get();
        snapshot.forEach((doc) => {
            console.log(doc.id, '=>', doc.data());
        });
    }

    // 削除用のメソッド
    const deleteData = async () => {
        const documentData = document.getElementById('document').value;
        await db.collection('PostList').doc(documentData).delete();
    }
    </script>
</body>

4. Firebaseの初期化

おなじみの初期化処理を行います。
初めての方はこちらの記事のFirebase機能の設定 → firebase initの部分からやってみてください。
今回はFirestoreも使用するため、FirestoreとHostingを選択してください。
Firestore関連の選択肢は、全てエンターでOKです。

機能の検証

firebase serve

を実行し、ローカルサーバーを立ち上げます。

document名、内容を入力し追加、更新
読み取りボタンでコンソールに表示
document名を入力し削除

上記3つが機能すれば成功です。

あとがき

今回は、FirestoreでCRUD機能を実装する手順を記述しました。
Firebaseはとても便利なので、これからも色々なアプリを作っていきたいと思います。

FirebaseでCRUD機能を実装する

はじめに

事前準備

Firebaseプロジェクトの作成

Firebaseの設定

1. プロジェクトにWebアプリを追加

2. Firestoreの設定

3. CRUD機能の追加

追加、更新機能

読み取り機能

削除機能

完成したHTMLファイル

4. Firebaseの初期化

機能の検証

あとがき