🦾

初学者が１からゲーム閲覧サイトを作ってみた(Nuxt3 × Firebase)RealtimeDatabaseやりとり例

2024/04/11に公開

Firebase

内容

Nuxt×Firebaseで個人開発していて、

実際のDBとのやりとりをまとめました。何かの参考になると幸いです。

DBとのやり取り例

各処理ごとの例をまとめておきます。

データ取得

const getGames = async() => {
  const gameData = firebaseRef(db, 'games/');
  onValue(gameData, (snapshot) => {
    const response = snapshot.val();
    games.value = response;
  });
}

取得したデータをgamesオブジェクト配列に入れています。

データ絞り込み

const fetchDevice = async(device: string) => {
  const db = getDatabase();
  const que = query(firebaseRef(db, `games`), orderByChild("device"), equalTo(device), limitToFirst(10));
  const response = await get(que);
  
  if(device == "PS5"){
    playStations.value = Object.values(response.val()); 
    await changeImgToUrl(playStations.value);
  } else {
    switches.value = Object.values(response.val());
    await changeImgToUrl(switches.value);
  }
}

上記はdeviceで絞り込みをかける例になります。
DBのgamesのdeviceを軸に引数で受け取ったデバイス名で絞り込み、queに入れています。
今回１０件分しか表示しないためlimitToFirst(10)を記述してあります。

データ登録

const addGame = async() => {
  const db = getDatabase();
  game.value.date = new Date().toString();
  const key = push(firebaseRef(db, 'games/'), {
    title: game.value.title,
    price: game.value.price,
    device: game.value.device,
    category: game.value.category,
    description: game.value.description,
    image: game.value.image,
    date: game.value.date
  }).key;
  set((firebaseRef(db,`games/${key}`)),{
    title: game.value.title,
    price: game.value.price,
    device: game.value.device,
    category: game.value.category,
    description: game.value.description,
    id: key,
    image: game.value.image,
    date: game.value.date
  })
}

プッシュしたノードのユニークキーを取得して、更新する作業をしています。

データ更新

const updateGame = async() => {
  const db = getDatabase();
  if(gameFile.value){
    await deleteImage();
    await uploadImage();
  } 
  set((firebaseRef(db,`games/${id.value}`)),{
    title: game.value.title,
    price: game.value.price,
    device: game.value.device,
    category: game.value.category,
    description: game.value.description,
    id: id.value,
    image: game.value.image
  })
}

更新をする際、今回の私のケースだとStorageも更新しなければならないので、消してまた更新する作業を前半にしています。あとは先ほども登場したset()を使い、DBを更新しています。
id.valueにはparamsが入っており、ゲームユニークキーとなっています。

データ削除

const deleteGame = async() => {
  const db = getDatabase();
  await deleteImage();
  await deleteReview();
  await remove(firebaseRef(db,`games/${id.value}`))
}

前半はStorageの対応画像を消し、DBの対応するreviewsを絞り込み、消しています。
後の一行がデータ削除でremove()を使うだけです。

内容