Firebase のデータベースで Markdown のメタデータを保存する

Firebase のデータベースで Markdown のメタデータを保存する

Markdown のメタデータを利用すると、ファイルの情報を簡単に取得できます。この情報を Firebase のデータベースに保存すると、一覧の表示を効率よく行う事が出来ます。この記事では、Firebase のデータベースである Firestore に Markdown のメタデータを保存する方法を紹介します。

Firebase version 9

同じような記事を以前にも投稿していますが、Firebase の API はVersion 8からVersion 9で大きく変更されています。 以前のVersion 8では、名前空間（ネームスペース）をベースにしたインターフェースが利用されていました。これがVersion 9からは、モジュール（modular）ベースに変更されています。

現時点では、Version 8も利用可能ですが、新規の開発ではVersion 9を利用する事をお勧めします。

従いまして、この記事では、Firebase のVersion 9ベースのインターフェースで紹介していきます。

Firestore の基本構成

Firebase のデータベースには、リアルタイムデータベース（Realtime database）と Firestore がありますが、この記事では、Firestore を利用する例を紹介しています。 Firestore のデータベースは、コレクション（collection）とドキュメント（document）で構成されています。コレクションはドキュメントを入れる箱の様なイメージで、ドキュメントは基本的に、JSON（JavaScript Object Nortation）形式のデータです。

Firestore を利用するには、Firebase のプロジェクトを作成した後に、Firebase コーンソールから Firestore を有効にします。 有効にする際には、セキュリティルールの設定が必要になります。

開発中で、インターネット上に公開しないで利用する場合には、開発モードで利用可能です。開発モードは、制限なしにデータベースの読み書きが可能なルールになっています。一方で、プロダクションモード（公開モード）は、標準設定のルールでは、アクセスが禁止状態になっているので、必要なアクセスの権限を別途設定する必要があります。

Firestore を利用する利点は？

次に、Firestore のデータベースを利用する利点について紹介します。 以前の記事で紹介した通り、Markdown 形式のファイルには、ファイルの追加情報（メタデータ）を本文とは別に保存することが可能です。 この情報を利用すると、ブログの記事の一覧などを表示する際に、利用者が閲覧する記事を選びやすいように表示をする事が可能になります。 この際に、問題になるのが、この Markdown のメタデータを取得する際には、Firebase のストレージのファイルの URL を取得して、その URL からファイルの中身を読み込んで処理する必要がある点です。一覧の表示には一部のデータだけで良いのですが、結果的にファイルの中身全部を読み込むことになるからです。

当然、この処理には時間がかかることに加えて、一覧を表示する度に表示する全てのファイルにアクセスする必要があります。

そこで、この問題を解決する一つの方法として、ファイルをアップロードする際にメタデータをデータベースに保存してしまおうというのがこの記事で紹介している趣旨です。 こうすることで、データベースから必要な情報のみを取得すればよくなるので、全てのファイルにアクセスするよりは、表示に必要な情報を高速で取得できるようになります。

実装例

この記事ではまず、Firestore に JSON 形式のデータを追加する方法を紹介します。

やることは、

＊　Firestore のデータベースへのリファレンスの取得：　「getFirestore()」

＊　Firestore のコレクションの指定：「collection(db, target_collection（）」

＊　Firestore にデータの追加：「await addDoc(collection(db, target_collection), metadata)」

です。

Firestore へのデータの追加処理は非同期で行われるので、この例では、awaitを使って、処理が終了してから結果を返すようにしています。

import {

  addDoc,

  collection,

  getFirestore,

} from "firebase/firestore";

....

export const db = getFirestore();

....

export async function addMetaData(target_collection, metadata) {

    try {

      const docRef = await addDoc(collection(db, target_collection), metadata);

      return docRef;

    } catch (error) {

      // Error to add document

      return undefined;

    }

  });

}

以上が Firestore にデータを追加する基本です。

まとめ

この記事では、Firebase のデータベースである Firestore に JSON 形式のデータを追加する部分を紹介しました。 この処理自体は、シンプルで簡単ですが、実際のアプリで利用する場合には、もう少し工夫が必要になります。その辺りは、次回以降の投稿で紹介していく予定です。

実際の実装で考える必要があるのは、

＊　同じフォルダ内に同じファイルが既に存在する場合には、既存のデータを更新する（新たなデータは追加しない）

＊　同じフォルダ内に同じファイルがない場合にあ新規に、データを追加する

という処理が必要になります。これを行わない場合、同じファイルを複数回アップロードした場合、データベースに毎回新しいエントリ（Firebase のドキュメント）が作られてしまうので、ファイルが重複して表示されてしまいます。次回はその辺りをもう少し詳しく解説します。