Help us understand the problem. What is going on with this article?

コピペで使うFirebase【Cloud Firestore編】

概要

firestoreを使う際にコピペで動かしたいのでそのまとめです。

公式ドキュメント

Cloud Firestore
初期設定
データの追加
データの取得
クエリー

FireStoreのメソッド一覧
メソッド 動作 備考
add 追加 ドキュメント名はランダムな文字列になる
set 追加 ドキュメント名を指定できる
set 更新 ドキュメントを更新(上書き)、フィールド追加
update 更新 ドキュメントのフィールドを更新
get 取得 ドキュメントを取得
delete 削除 ドキュメントを削除

初期設定

インストール

$ npm install firebase --save

firestore初期化

import firebase from "firebase/app"
import "firebase/firestore"

const firebaseConfig = {
    /* firebase config */
}

// 初期化は一度だけ
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

firestore参照

const db = firebase.firestore();

ドキュメント追加

add

add() はドキュメント名にランダムなid(文字列)が入る。

db.collection("user").add({ name: "taro" }).then(docRef => {
    // success
}).catch(error => {
    // error
})

保存されたデータ

user: {
    <ランダムなid>: {
        name: taro
    }
}

set

set() はドキュメント名を指定できる。

※ doc() を引数なしで使うとadd()と同じくドキュメント名にランダムなid(文字列)が入る。

db.collection("user").doc("1").set({ name: "taro" }).then(docRef => {
    // success
}).catch(error => {
    // error
})

保存されたデータ

user: {
    1: {
        name: taro
    }
}

ドキュメントの更新

update

update() はdoc()に指定したドキュメントのフィールドを更新する

※更新するフィールドがない場合はエラーとなる

db.collection("user").doc("1").update({ name: "taro san" }).then(() => {
    // success
}).catch(error => {
    // error
})

更新前

user: {
    1: {
        name: taro
    }
}

更新後

user: {
    1: {
        name: taro san
    }
}

set

set() を使うと対象のドキュメント自体を更新します

db.collection("user").doc("1").set({ firstName: "taro", lastName: "aso" }).then(() => {
    // success
}).catch(error => {
    // error
})

更新前

user: {
    1: {
        name: "taro"
    }
}

更新後

user: {
    1: {
        firstName: "taro",
        lastName: "aso"
    }
}

mergeオプション

set() ではmergeオプションをつけるとフィールドの追加もできます

db.collection("user").doc("1").set({ firstName: "taro", lastName: "aso" }, {merge: true}).then(() => {
    // success
}).catch(error => {
    // error
})

更新前

user: {
    1: {
        name: "taro"
    }
}

更新後

user: {
    1: {
        name: "taro",
        firstName: "taro",
        lastName: "aso"
    }
}

ドキュメントの取得

get

get() はドキュメントを取得します。

Firestoreには以下のデータが保存されているとします

user: {
    1: {
        name: "taro"
    },
    2: {
        name: "ken"
    }
}

コレクション内の全てのドキュメントを取得する場合

/* 全てのドキュメントを配列に代入 */
const users = [];
db.collection("user").get().then((docs) => {
    // success
    if (docs.exists) {
        docs.fotEach(doc => {
            users.push(doc.data())
        })
    }
    console.log(users)
}).catch(error => {
    // error
})

取得データ

[{ name: "taro" }, { name: "ken" }] // type Array(2)

指定のドキュメントを取得する場合

db.collection("user").get("2").then((docs) => {
    // success
    console.log(doc.data())
}).catch(error => {
    // error
})

取得データ

{ name: "ken" }

where

指定のフィールドでフィルタリングしドキュメントを取得する場合

db.collection("user").where('name', '==' 'taro').then((docs) => {
    // success
    console.log(doc.data())
}).catch(error => {
    // error
})

取得データ

{ name: "taro" }

ドキュメントの削除

delete

delete() は対象のドキュメントを削除します。

db.collection("user").doc("1").delete().then(() => {
    // success
}).catch(error => {
    // error
})

応用

ランダムなドキュメント名をidというフィールドにももたせる場合

db.collection("user").add({ id: "", name: "taro" }).then(docRef => {
    db.collection("user").doc(docRef.id).update({
        id: docRef.id
    }).then(() => {
        // success
    }).catch(error => {
    // error
    })
}).catch(error => {
    // error
})

保存されたデータ

user: {
    <ランダムなid>: {
        id: <ランダムなid>
        name: taro
    }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした