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, { NCMBQuery } 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);

NCMBQueryの初期化

検索を行うのは NCMBQuery になります。 CLASS_NAME は検索対象のクラス名です。

const query = new NCMBQuery('CLASS_NAME');

検索条件の指定

検索条件は JavaScript SDKに似せています。メソッドは次の通りです。

  • equalTo(name: string, value: any): NCMBQuery
  • notEqualTo(name: string, value: any): NCMBQuery
  • greaterThan(name: string, value: any): NCMBQuery
  • greaterThanOrEqualTo(name: string, value: any): NCMBQuery
  • lessThan(name: string, value: any): NCMBQuery
  • lessThanOrEqualTo(name: string, value: any): NCMBQuery
  • in(name: string, value: any): NCMBQuery
  • notIn(name: string, value: any): NCMBQuery
  • exists(name: string): NCMBQuery
  • notExists(name: string): NCMBQuery
  • inArray(name: string, value: any): NCMBQuery
  • notInArray(name: string, value: any): NCMBQuery
  • allInArray(name: string, value: any): NCMBQuery
  • regularExpressionTo(name: string, value: RegExp): NCMBQuery
  • near(name: string, geo: NCMBGeoPoint): NCMBQuery
  • withinKilometers(name: string, geo: NCMBGeoPoint, distance: number): NCMBQuery
  • withinMiles(name: string, geo: NCMBGeoPoint, distance: number): NCMBQuery
  • withinRadians(name: string, geo: NCMBGeoPoint, distance: number): NCMBQuery
  • withinSquare(name: string, southWestGeo: NCMBGeoPoint, northEastGeo: NCMBGeoPoint): NCMBQuery
query
  .equalTo('message', 'Hello')
  .greaterThan('num', 5);

検索の実行

検索実行は fetchAll メソッドを使います。

const ary: NCMBObject[] = await query.fetchAll();

1件だけ欲しい場合には fetch メソッドを使います。

const obj: NCMBObject = await query.fetchAll();

さらに結果と総数(カウント)を取得するには fetchWithCount メソッドを使います。

const {count, results} = await query.fetchWithCount();

その他の条件

検索結果の取得件数などを指定する場合には下記を利用します。

  • limit(value: number): NCMBQuery
  • skip(value: number): NCMBQuery
  • order(name: string, desc: boolean = false): NCMBQuery
  • include(name: string): NCMBQuery

OR検索

メソッドをキーチェーンでつなぐ場合にはAND検索になります。ORを使う場合には次のように指定してください。

const query = new NCMBQuery('Test');

const query1 = new NCMBQuery('Test');
const query2 = new NCMBQuery('Test');
query1.equalTo('number', 0);
query2.equalTo('number', 2);

const ary = await query.or([query1, query2]).fetchAll();

サブクエリー

別な検索結果を使って絞り込むサブクエリーは次のようにします。こちらは値の場合で select メソッドを使います。

const queryTest = new NCMBQuery('Test');
const queryTest2 = new NCMBQuery('Test2');
queryTest2.in('num', [1,4]);
const ary = await queryTest
  .select('number', 'num', queryTest2)
  .fetchAll();

ポインターの場合は inQuery メソッドです。

const queryTest = new NCMBQuery('Test');
const queryTest2 = new NCMBQuery('Test2');
queryTest.in('number', [1,4]);
const ary3 = await queryTest2
  .inQuery('num', queryTest)
  .include('num')
  .fetchAll();

位置情報検索

位置情報検索は3つあります。

ある地点から近い情報を取得する

const tokyoTower = new NCMBGeoPoint(35.6585805, 139.7454329);
const query = new NCMBQuery('Station');
const ary = await query
  .near('geo', tokyoTower)
  .fetchAll();

ある地点から指定した距離内にあるデータを近い順に取得する

const tokyoTower = new NCMBGeoPoint(35.6585805, 139.7454329);
const query = new NCMBQuery('Station');
const ary = await query
  .withinKilometers('geo', tokyoTower, 2)
  .fetchAll();

withinKilometers のほかに withinMileswithinRadians があります。単位がそれぞれ異なります。

ある2点間にあるデータを取得する

const geo1 = new NCMBGeoPoint(35.6622568, 139.7148997);
const geo2 = new NCMBGeoPoint(35.6206607, 139.7049691);
const query = new NCMBQuery('Station');
const ary = await query
  .withinSquare('geo', geo1, geo2)
  .fetchAll();

デモ

React Native for Webに対応したことで、Expo Snackでデモが動かせるようになりました。データを検索して表示するだけのデモですが、こちらで試せます。

NCMB Query - Snack

まとめ

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

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

中津川 篤司

中津川 篤司

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