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でデモが動かせるようになりました。データストアにデータを保存するだけの簡単なデモですが、試してみてください。
まとめ
React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。