Zenn
🪸

Svelteを使ってFirebaseのFirestoreにデータを登録する方法

2023/03/26に公開
Firebase
Firestore
JavaScript
Svelte
tech

Webアプリケーションを作るためのJavaScriptフレームワークであるSvelteを使って開発やっていきたいのでFirebase, Firestoreと連携するための初期設定についてまとめてみます。

今回はSvelteで作ったフォームから文字列をFirestoreに登録するところまで確認しました。

ちなみにFirebaseとはGoogleのクラウドサービスで、ユーザー認証、データベース、ストレージ等のWebアプリケーションの構築に必要な機能を提供しています。

FirestoreはFirebaseの一部でありドキュメント指向のNoSQLデータベースです。

Svelte雛形作成

まず Vite を使って Svelte の雛形を作ります。

Svelte Kitを使って作る方法もありますが今回は最小構成で十分だったのでViteを利用しました。

npm init vite@latest
↓
framework Svelte を選択

cd <app name>
npm install
npm run dev

ローカルサーバーが起動するのでブラウザで開くとサンプル画面が表示されます。

やっぱり Vite はビルドが早くて最高ですね！

Firebaseと連携

Firebaseコンソールからプロジェクトの作成とFirestore Databaseの作成をしておきます。

Firebase SDK を利用するために firebase.js を適当な場所に作成し firestore を外部から利用できるように変数化して export しています。

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore();

この際にapi key等はリモートに上げたくないので .env で管理しており、Viteで環境変数を利用する際は先頭に VITE_ をつければ参照できます。

フォームからデータ登録

App.svelteでテキストフォームとボタンを設置し送信できるようにします。

<script>
  import { addItem } from "./lib/api";

  let text = "";

  const submit = async () => {
    const result = await addItem(text);
    if (result) {
      alert("登録成功");
    } else {
      alert("登録失敗");
    }
  };
</script>

<main>
  <input bind:value={text} />
  <button on:click={submit}>submit</button>
</main>

addItem の処理を api.js というファイルに書きます。このファイルでは Firebase, Firestore との連携情報を取得してデータの登録処理を行なっています。

import { addDoc, collection } from "firebase/firestore";
import { db } from "./firebase";

export const addItem = async (text) => {
  const docRef = await addDoc(collection(db, "items"), { text });
  return docRef.id ? true : false;
};

フォームに適当な文字列を入力してボタンを押すと Firestore にデータ追加されるはずです。

まとめ

SvelteはReact, Vueよりも簡単にコードを書けるという点で小規模なWebアプリを開発するには良い選択だと感じました。

最近人気の高まってきているフレームワークでもあるので個人的に沢山触れていこうと思います。

同様にSvelteで開発を始めてみようとされている方の参考になれば幸いです。

参考

Discussion