Zenn
👀

Supabase VS Firebase

2022/04/11に公開
Firebase
JavaScript
TypeScript
Supabase
tech

初めに

業務システムの開発でSupabaseを採用することになったので, 以前使用していたこともあるFirebaseとの比較を簡単に行ってみようと思います。比較項目はAuth, Database(FirebaseはFirestore)です。
※ Supabaseの紹介が主旨なので若干Supabase贔屓な内容になっておりますのでご了承ください。

※ライブラリバージョン

・ @supabase/supabase-js 1.33.3
・ firebase 9.6.6

Auth

ここでは簡単にメール&パスワード認証におけるサインアップ, サインイン, サインアウト処理について公式のドキュメントのコードから両者の比較をしてみます。

・ Supabase

// サインアップ
const { data, session, error } = await supabase.auth.signUp({ email, password });

// サインイン
const { data, session, error } = await supabase.auth.signIn({ email, password });

// サインアウト
const { error } = await supabase.auth.signOut();

・ Firebase

const auth = getAuth();
// サインアップ
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    //　...
  })
  .catch((error) => {
    // ...
  });
  
// サインイン
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // ...
  })
  .catch((error) => {
     // ...
  });
  
// サインアウト
signOut(auth).then(() => {
  // ...
}).catch((error) => {
  // ...
});

さて, どうでしょうか。Firebaseの方はもっと工夫したり, ライブラリを使えばスッキリすると思いますが, 素のコードではSupabaseの方がスッキリした印象を受けます。(好みは個人によりますが)

Database(Firestore)

FirestoreはNoSQLデータベースとして有名ですが, Supabaseは, PostgreSQLデータベースであるためPostgreSQLの知識を持っている人はそのまま活かすことができるようです。

まずは簡単に以下のテーブル ・ コレクションから全データを取得, データの挿入, データの削除を行うコードを見てみます。

usersテーブル(Supabase)

id name
1 田中
2 佐藤
3 石川

usersコレクション(Firebase) 

usersコレクション
  |----- ドキュメントID : 1 
  |         |--- name : 田中
  |
  |----- ドキュメントID : 2 
  |         |--- name : 佐藤
  |
  |----- ドキュメントID : 3 
  |         |--- name : 石川

・ Supabase

// 取得
const { data, error } = await supabase.from('users').select('空白 or *');
// data (3)[{ id : 1, name : '田中'}, { id : 2, name : '佐藤'}, { id : 3, name : '石川'}]

// 挿入
const { data, error } = await supabase.from('users').insert([{ name: '鈴木' }]);
// data (4)[{ id : 1, name : '田中'}, { id : 2, name : '佐藤'}, { id : 3, name : '石川'}, { id : 4, name : '鈴木'}]

// 削除
const { data, error } = await supabase.from('users').delete().match({ id : 1 });
// data (3)[{ id : 2, name : '佐藤'}, { id : 3, name : '石川'}, { id : 4, name : '鈴木'}]

・ Firebase

const ref = collection(db, 'users');
// 取得
const querySnapshot = await getDocs(ref);
const data = querySnapshot.map((doc) => {
  return Object.assign({ id : doc.id }, doc.data());
});
// data (3)[{ id : 1, name : '田中'}, { id : 2, name : '佐藤'}, { id : 3, name : '石川'}]

// 挿入
await setDoc(doc(ref, '4'), {
  name: '鈴木',
});
// data (4)[{ id : 1, name : '田中'}, { id : 2, name : '佐藤'}, { id : 3, name : '石川'}, { id : 4, name : '鈴木'}]

// 削除
await deleteDoc(doc(db, 'users', '1'));
// data (3)[{ id : 2, name : '佐藤'}, { id : 3, name : '石川'}, { id : 4, name : '鈴木'}]

両者異なる分類のデータベースですのでどちらが秀でていると簡単に断言することはできませんが, 今までSQLをメインに扱ってきた人にとっては前者のコードの方がしっくりくるのではないかと思います。

終わりに

個人的にはSupabaseの方が, コードの可読性やデータアクセスのしやすさが秀でているのではないかと感じました。今回紹介した内容の他にもSupabaseには多くの機能が備わっているのでSupabaseに興味のある方は一度ドキュメントを見てみることをお勧めします。

参考

https://supabase.com/docs

Discussion