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

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

React Native用JavaScript SDKにてfetch/deleteができるようになりました

f:id:mbaasdevrel:20180306160753p:plain

スマートフォンアプリはSwiftやJavaのように特定のプラットフォームで利用できるもの、そしてUnityやMonacaのように複数のプラットフォームで動作するものがあります。React Nativeは後者に属する技術です。

以前React Native用SDKを開発していたのですが、バージョンアップなどに伴って利用できなくなっていました。そこでTypeScriptに沿う形で改めてReact Native SDKを開発しはじめました。なお、これは非公式のSDKになりますので、サポート外になります。

今回はデータストアの保存に加えて、データを取得するfetchと削除のdeleteを行う方法を紹介します。

利用法

セットアップ

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

npm i ncmb-react-native -S

まずライブラリを読み込みます。

import NCMB from 'ncmb-react-native';

そして初期化します。

import config from './config.json';
const ncmb = new NCMB(config.applicationKey, config.clientKey);

データストアへの保存

まずはHello Worldの保存処理です。ここまでは以前からできました。

await hello
  .set('message', 'Hello world')
  .save();

データストアからの取得

次にデータの取得です。検索条件としてequalToを使います。

const objectId: string = hello.get('objectId');
const obj: DataStore = await Hello
  .equalTo('objectId', objectId)
  .fetch();
console.log(obj.get('objectId'));

データの削除

取得したデータに対して delete メソッドを実行すれば削除が行われます。

await obj.delete();
console.log('Deleted.');

エラー処理について

エラーはすべて例外処理が実行されます。データが存在しない場合の削除処理については例外が発生します。

コード

SDKはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。

まとめ

データの保存と取得、そして削除ができるようになったのでテストで実行してもデータが増えるようなことがなくなります。機能的にはまだ最低限ですが、今後検索条件の追加や認証処理などに対応していきます。

React Native用SDKはexpoでの動作を前提としています。React Nativeへの組み込みはもちろんですが、Expoを使った高速なクラウド開発でも利用できます。ぜひお試しください。

中津川 篤司

中津川 篤司

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