Closed1

Firestoreでネストされたオブジェクトを使う場合に動的なkeyを設定する方法

serinuntiusserinuntius

これは別にFirestoreに限った話ではなく、 Objectの Computed Property Names を知らなかったという話です。

Firestoreでドキュメントの中にオブジェクトを入れたくなる時がたまにあります。個人的にそんなに使ってなかったのですが、今回要件的にどうしてもこれを使う必要ができたので使います。

公式のexampleでこんな感じで書かれています。

// https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja#update_fields_in_nested_objects

// Create an initial document to update.
var frankDocRef = db.collection("users").doc("frank");
frankDocRef.set({
    name: "Frank",
    favorites: { food: "Pizza", color: "Blue", subject: "recess" },
    age: 12
});

// To update age and favorite color:
db.collection("users").doc("frank").update({
    "age": 13,
    "favorites.color": "Red"
})
.then(() => {
    console.log("Document successfully updated!");
});

favorites.colorが固定値の場合はこれでいいのですが、keyを動的な値にしたい場合どうすればいいのでしょう?

GPT4に聞いてみると教えてくれました。 Computed Property Names というらしいです。(ググりにくいコードとかコンテキストでもちゃんと教えてくれるのでマジで助かる)
ちゃんとMDNも記載がありました。

[key] ってやればいいんですね。

const color: "red" | "blue" | "green" = "red";
const key = `favorites.${color}`
db.collection("users").doc("frank").update({
    "age": 13,
    [key]: 31
})
.then(() => {
    console.log("Document successfully updated!");
});

こんな感じで動的に設定できますね。確かに言われてみればそんなコードを読んだことがあるような気がするけど、自分ではパッと出てこなかった。。。

参考文献

https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja#update_fields_in_nested_objects
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names

このスクラップは2023/10/29にクローズされました