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

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

React Native用JavaScript SDKにてfetchAll、検索条件が指定できるようになりました

f:id:mbaasdevrel:20180306160753p:plain

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

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

今回はデータストアの検索条件について紹介します。

利用できるメソッド

下記のメソッドを用意しました。これらはJavaScript SDKと共通の名前です。

  • equalTo
  • notEqualTo
  • greaterThan
  • greaterThanOrEqualTo
  • lessThan
  • lessThanOrEqualTo
  • in
  • notIn
  • exists
  • notExists
  • inArray
  • notInArray
  • allInArray

利用法

セットアップ

インストールは 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);

検索

例えば200以上、または300以下の数値(カラムは number)を検索する場合です。

const ary: [DataStore] = await Hello
  .greaterThanOrEqualTo('number', 200)
  .lessThanOrEqualTo('number', 300)
  .fetchAll();
for (let obj of ary) {
  console.log(obj.get('objectId'));
}

fetchAllを使えば条件にマッチするデータをまとめて取得できます。

その他の指定

絞り込み条件として、下記を追加しています。

  • limit
  • skip
  • offset
  • order

これらもJavaScript SDKと同じく、組み合わせて使えます。

const ary: [DataStore] = await Hello
  .greaterThanOrEqualTo('number', 200)
  .limit(10)
  .order('updateDate')
  .lessThanOrEqualTo('number', 300)
  .fetchAll();
for (let obj of ary) {
  console.log(obj.get('objectId'));
}

https://blog.mbaas.nifcloud.com/archive/category/ReactNativeSDK

コード

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

まとめ

検索条件を組み合わせることで、必要なデータを素早く取得できます。データストアをうまく使ってReact Native開発を高速化してください。

中津川 篤司

中津川 篤司

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