Vue3 + TypeScript プロジェクト から Firestore に接続する サンプル
Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。 vue: 3.2.33 firebase: 9.6.11 firebase-admin: 10.1.0 準備 Firestore に作成済みの データ Firestore には 以下のようなデータを作成してあります。 この データ を Vue プロジェクト で読み出して 画面に表示する アプリケーション を作っていきます。 プロジェクト作成 (Vue3 + TypeScript) まずは、Vue3 + Typescript でプロジェクトを作成します。 Vue3 プロジェクト に Firebase SDK を インストール 以下の コマンド で Firebase SDK を インストール していきます。 Firebase 接続設定情報 を Vite 環境変数に登録 Firebase に接続するためには API Key などの接続設定情報が必要になります。 これらの取得方法については 公式サイト を参照してください。この 接続設定情報 を Firebase SDK に渡すことで、Vue プロジェクト から Firebase に アクセス することができるようになります。 このように Firebase への アクセス は簡単に実現できるのですが、 逆に言うと、これらの接続設定情報 を悪用されてしまうと、第三者が簡単にあなたの課金設定済みアカウントを用いることもできてしまいます。そういった事態を避けるためにも、 Firebase 接続設定情報 は git に登録しないことが望ましいケースが多いと思います。 ここでは … Read more