JavaScriptでFirebase（V9）を使う備忘録

npm install firebase

// 必要な機能をインポート
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "・・・",
  authDomain: "・・・",
  projectId: "・・・",
  storageBucket: "・・・",
  messagingSenderId: "・・・",
  appId: "・・・"
};

// Firebaseを初期化
initializeApp(firebaseConfig);

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
          request.time < timestamp.date(2022, 8, 14);
    }
  }
}

  match /{document=**} {
            allow read, write: if request.auth != null;
        }

match /users/{userId} {
　　　allow read, write: if request.auth != null && userId == request.auth.uid 
  }

match /hoge/{id}{
     allow read, write: if request.auth != null && resource.data.userId == request.auth.uid
 }

import { getFirestore } from "firebase/firestore";
//Firestore Liteの場合
import { getFirestore } from '@firebase/firestore/lite';

import { getFirestore, collection, addDoc } from "firebase/firestore";
//Cloud Firestoreを初期化し、サービスへの参照を取得
const db = getFirestore();
try {
  const docRef = await addDoc(collection(db, "users"), {
    name: "花子",
    age: 20
  });
  console.log(docRef.id);
} catch (e) {
  console.error(e);
}

import { collection, getDocs } from "firebase/firestore";

getDocs(collection(db, "users"))
  .then(snapshot => {
    let users = []
    snapshot.docs.forEach(doc => {
      users.push({ ...doc.data(), id: doc.id })
    })
    console.log(users)
  })
  .catch(err => {
    console.log(err.message)
})

import { collection, getDocs, query, where } from "firebase/firestore";

//usersコレクションからageが20のusersを返します
const q = query(collection(db, "users"), where("age", "==", 20));
//結果を取得
await getDocs(q)
  .then(snapshot => {
    let users = []
    snapshot.docs.forEach(doc => {
      users.push({ ...doc.data(), id: doc.id })
    })
    console.log(users)
  })
  .catch(err => {
    console.log(err.message)
})

import { collection, onSnapshot } from "firebase/firestore";

const unsubscribe = onSnapshot(collection(db, "users"),  (snapshot) => {
  let users = []
  snapshot.docs.forEach(doc => {
    users.push({ ...doc.data(), id: doc.id })
  })
  console.log(users)
});

// Stop
unsubscribe();

import { doc, setDoc, Timestamp } from "firebase/firestore";

const data = {
    name: "太郎",
    age:30,
    date: Timestamp.fromDate(new Date()),
};
//usersコレクションに、ドキュメントIDはnew-users-id
await setDoc(doc(db, "users", "new-users-id"), data);

import { doc, getDoc } from "firebase/firestore";

getDoc(doc(db, 'users', 'new-users-id'))
.then((doc)=>{
 console.log(doc.data(), doc.id)
})

import { doc, updateDoc } from "firebase/firestore";

await updateDoc(doc(db, "users", "new-users-id"), {
  "age": 25
});

import { doc, deleteDoc } from "firebase/firestore";

//dataコレクションのoneドキュメントを削除
await deleteDoc(doc(db, "users", "new-users-id"));

import { getAuth } from "firebase/auth";

const auth = getAuth();

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth()

const email = 'hogehoge@gmail.com'
const password = 'test1234'

createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
   　console.log(userCredential.user)
  })
  .catch((err) => {
   console.log(err.message)
  });

import { getAuth, createUserWithEmailAndPassword, updateProfile} from "firebase/auth";
const auth = getAuth()

const email = 'hogehoge@gmail.com'
const password = 'test1234'
const displayName = '花子'

createUserWithEmailAndPassword(auth, email, password)
 .then((userCredential) => {
  console.log(userCredential.user), 
  updateProfile(userCredential.user, {displayName: displayName})
  })
 .catch((err) => {console.log(err.message) })

import { getAuth, signOut } from "firebase/auth";
const auth = getAuth() 

signOut(auth)
   .then(() => {
     console.log('ログアウトしました')
   })
   .catch(err => {
    console.log(err.message)
 })

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();

const email = 'hogehoge@gmail.com'
const password = 'test1234'

signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
   console.log(userCredential.user)
  })
  .catch((err) => {
    console.log(err.message)
  });

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log(user.uid)
  } else {
    console.log('ログアウトしました')
  }
});

import { getStorage, ref } from "firebase/storage";
//ストレージサービスへの参照
const storage = getStorage();

//ファイル（images/hoge.jpg）への参照を作成
const hogeRef = ref(storage, 'images/space.jpg');

<input type="file" id="file">

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
//inputタグに、onchangeでファイルが選択された際の処理を指定しています
let fileInput = document.getElementById('file');
fileInput.onchange = (e) => {
 const file = e.target.files[0]

 //ランダム文字列をプラス（おまけ）
 const S ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 const N = 16;
 const randomChar = Array.from(crypto.getRandomValues(new Uint32Array(N)))
 .map((n) => S[n % S.length]).join("");
 const fileName = randomChar + "_" + file.name;

 const storage = getStorage();
 //ファイルへの参照
 const storageRef = ref(storage, fileName);

 uploadBytes(storageRef, file)
 .then(() => {
  return getDownloadURL(storageRef)
 })
 .then((res) => {
  console.log(res)
 })
 .catch((err) => {
  console.log(err.message)
  });
};

import { getStorage, ref, deleteObject } from "firebase/storage";

const storage = getStorage();
const desertRef = ref(storage, '削除するファイルのパス');

deleteObject(desertRef)
.then(() => {
  console.log('削除されました')
}).catch((err) => {
  console.log(err)
});