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

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

React Native SDK ver.2系の使い方【データストアの保存・更新・削除】

f:id:mbaasdevrel:20180306160753p:plain

React NativeでmBaaSを使いやすくするReact Native SDKを非公式に開発しています。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

これまでJavaScript SDKに似せる形で開発してきましたが、TypeScriptに沿った形で書くのに限界があったこと、React Native for Webでも使える形にしたかったので、バージョンアップすることにしました。これまでとは互換性はありませんが、より使いやすくなったはずです。

今回はデータストアの保存・更新・削除方法について解説します。

インストール

SDKのインストールはnpmで行います。

npm i ncmb-react-native

読み込み

import NCMB, { NCMBObject } from 'ncmb-react-native';

読み込めるライブラリはほかにも下記があります。

  • NCMBUser(会員管理)
  • NCMBObject(データストア。保存、更新、削除)
  • NCMBQuery(データストア。検索、取得)
  • NCMBFile(ファイルストア)
  • NCMBAcl(権限管理)
  • NCMBRole(ロール、ユーザやロールのグルーピング)
  • NCMBRequest(NCMBへのリクエスト用。通常は利用しません)
  • NCMBRelation(データストアのリレーション)
  • NCMBGeoPoint(位置情報�)
  • NCMBInstallation(デバイストークン)
  • NCMBPush(プッシュ通知)

初期化

SDKの初期化はアプリケーションキーとクライアントキーで行います。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
new NCMB(applicationKey, clientKey);

インスタンスの作成

新しいデータを保存する際には、まずインスタンスを作成します。

const obj = new NCMBObject('Test');

値のセット

値のセットは set メソッドで行います。

await obj
  .set('message', 'Hello, world')
  .set('number', 500)
  .set('date', new Date)
  .set('object', {a: 'b', c: 'd'})
  .set('array', [1, 2, 3, 'test'])
  .save();

ACLのセット

ACLはNCMBAclを使います。

const acl = new NCMBAcl;
acl
  .setPublicReadAccess(false)
  .setPublicWriteAccess(true);
obj
  .set('acl', acl);

保存

保存は save メソッドで行います。

await obj.save();

データの更新

データの更新も save メソッドで行います。

await obj
  .set('newData', '新しい値')
  .save();

データの削除

データの削除は delete メソッドで行います。

await obj.delete();

データ1件の取得

特定のデータを取得したり、値をmBaaSから取得し直す場合には fetch メソッドを使ってください。

await obj.fetch();

便利な機能

インクリメンタル

値をインクリメンタルに更新する際には setIncrement を使います。

const obj = new NCMBObject('Test');
await obj
  .set('num', 1)
  .save();
await obj.setIncrement('num', 1).save();
await obj.fetch();
obj.get('num') // -> 2

配列に値を追加

配列のカラムに値を追加する場合は add メソッドを使います。

const obj = new NCMBObject('Test');
await obj
  .set('ary', ['first'])
  .save();
await obj
  .add('ary', 'second')
  .save();
await obj.fetch();
obj.get('ary')) // -> ['first', 'second']

配列から値を削除

逆に削除する場合は remove メソッドを使います。

const obj = new NCMBObject('Test');
await obj
  .set('ary', ['first', 'second'])
  .save();
await obj
  .remove('ary', 'second')
  .save();
await obj.fetch();
obj.get('ary') // -> ['first']

ユニークな値を配列に追加

重複した値を追加したくない場合には addUnique メソッドを使ってください。

const obj = new NCMBObject('Test');
await obj
  .set('ary', ['first', 'second'])
  .save();
await obj
  .addUnique('ary', ['second', 'third'])
  .save();
await obj.fetch();
obj.get('ary') // => ['first', 'second', 'third']

位置情報

位置情報は NCMBGeoPoint オブジェクトを使います。

const obj = new NCMBObject('Test');
const geo = new NCMBGeoPoint(30.0, 130.0);
await obj
  .set('geo', geo)
  .save();

デモ

React Native for Webに対応したことで、Expo Snackでデモが動かせるようになりました。データストアにデータを保存するだけの簡単なデモですが、試してみてください。

NCMBObject - Snack

まとめ

React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

中津川 篤司

中津川 篤司

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