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
のほかに withinMiles
と withinRadians
があります。単位がそれぞれ異なります。
ある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でデモが動かせるようになりました。データを検索して表示するだけのデモですが、こちらで試せます。
まとめ
React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。