【Angular15】FireStoreのデータの一部分を編集しようとしたところ、データ構造が配列へと変化してしまう。

Question

AnuglarのwebアプリにてFireStoreのデータを一部分だけ編集したい

データの編集自体は実現できております。
しかし、指定したフィールドが配列へと変化してしまいます。
他の技術者様のサイトでは指定されたフィールドは配列にはならず、フィールドの文字列のみが編集できています。

環境

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.4
@angular-devkit/build-angular   15.2.4
@angular-devkit/core            15.2.4
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@angular/fire                   7.5.0
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                      4.9.5

上記の環境でanuglarを使用してFireBaseのFirestore内にあるデータを編集するwebアプリを作成しています。

発生している問題

https://qiita.com/Yamamoto0525/items/c1ec1b7ce2350b294aeb#%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C-1
上のサイトでは指定したフィールドの文字列のみがうまく編集されていますが、
私の場合は以下のように配列になってしまいます。(以下はperiod6を"オープン"に編集した場合)

該当のソースコード

上にも書きましたが、編集自体は可能です。

  editData(col: string, doc: string, room string, class: string){
    let docRef = this.afs.collection(col).doc(doc);
    docRef.update({
      [room]: [class]
    });
  }

試したこと

update()ではなくset()を使用して編集をしてみましたが、同じように配列へと変化してしまいます。
どなたか解決方法を知っている方が居ましたら教えていただきたく思います。

Comments

[hoshi-takanori]

[room]: [class] じゃなくて [room]: class では？

[2001]

迅速なコメントありがとうございます。
ご指摘いただいた通り[class] => classに変更したところ解決しました。
[]で囲んだ場合、配列の要素の扱いとなってしまうためFireStoreの方も配列を生成したという理解でよろしいでしょうか。
立て続けに質問をしてしまい申し訳ありません。

[hoshi-takanori]

docRef.update の引数に { [room]: class } というオブジェクトリテラルを渡してますよね。
room に [] がついてるのは、{ room: class } のように [] がないとキーが "room" という文字列になってしまうからです。
一方、class という値の方は [] をつけなくても class という変数の値になりますし、[] をつけると配列になります。
https://qiita.com/kmagai/items/95481a3b9fd97e4616c9
https://jsprimer.net/basic/object/

[2001]

丁寧なご解説ありがとうございます。
添付されているURL先の記事もわかりやすかったです！
コメントの方を回答として投稿して頂ければ、ベストアンサーにしたいと思います。

Answer 1

hoshi-takanoriさんからのコメントにて解決しましたのでコピペします。

docRef.update の引数に { [room]: class } というオブジェクトリテラルを渡してますよね。
room に [] がついてるのは、{ room: class } のように [] がないとキーが "room" という文字列になってしまうからです。
一方、class という値の方は [] をつけなくても class という変数の値になりますし、[] をつけると配列になります。
https://qiita.com/kmagai/items/95481a3b9fd97e4616c9
https://jsprimer.net/basic/object/