FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

配列のカラムを扱う場合の注意点(JavaScript編)

f:id:mbaasdevrel:20171212211252p:plain

mBaaSのデータストアでは数字や文字列、日付、位置情報などの他に配列やオブジェクトを保存することができます。その際、特に注意して欲しいのが配列のカラムです。今回はJavaScript SDKを使った際の注意点を紹介します。

データを作成する

まずは通常のコードの書き方でデータを作成します。

const Data = ncmb.DataStore('Data');
let d = new Data;
await d
  .set('name', 'Test')
  .save();

配列のカラムを追加

次にこのデータに対して配列のカラムを追加し、更新します。

await d.addUnique('ary', 'test').update();

そしてこのデータの配列になっているプロパティを見ますが、これは undefined になってしまいます。

console.log(d.ary);
-> undefined

データを更新する

データを確認するためには、再取得しなければなりません。

d = await Data.fetchById(d.objectId);

そうするとデータが取れるようになります。

console.log(d.ary);
-> [ 'test' ]

さらにデータを追加する

例えば配列のカラムに対して、さらにデータを追加します。保存はまだ行っていません。

d
  .addUnique('ary', 'test')
  .addUnique('ary', 'test2')
  .addUnique('ary', 'test3')
  .addUnique('ary', 'test4');

そうするとデータは次のようになってしまいます。

console.log(d.ary);
-> {
    __op: 'AddUnique',
    objects: [ 'test', 'test2', 'test3', 'test4' ]
  }

このため、先ほどのように d.ary でアクセスできるものではなくなってしまいます。この場合も一度アップデータを行い、データを再取得する必要があります。

await d.update();
d = await Data.fetchById(d.objectId);
console.log(d.ary);
-> [ 'test', 'test2', 'test3', 'test4' ]

再取得しなければいけない理由

この原因はaddUniqueなどのメソッドがサーバ側で処理をしないと正しい値が分からないためです。そして、addUniqueを実行した時点で値が書き換わってしまい、使いづらいものになってしまいます。配列に対してaddUniqueなどを実行する場合には、保存する直前に(他ではもう使わない)状態で行うのが良いでしょう。

まとめ

他にもログインユーザ情報はlocalStorageでキャッシュされているため、クラウド側で書き換わっていると反映されないという問題もあります。必要に応じてクラウド側のデータで上書きし、最新の状態に更新しましょう。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。