npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ncmb-react-native

v2.0.14

Published

ニフクラ mobile backendをReact Nativeから操作するためのSDKです。詳細な使い方は[ブログ](https://blog.mbaas.nifcloud.com/archive/category/ReactNativeSDK)でもご覧いただけます。

Downloads

44

Readme

React Native SDK for NCMB(ニフクラ mobile backend)

ニフクラ mobile backendをReact Nativeから操作するためのSDKです。詳細な使い方はブログでもご覧いただけます。

v2から大幅に利用法が変わっています。v1のREADMEはこちら

インストール

npm i ncmb-react-native -S

使い方

読み込み

必要なものを取得してください。

import NCMB, { NCMBUser, NCMBObject, NCMBQuery, 
  NCMBFile, NCMBAcl, NCMBRole, 
  NCMBRequest, NCMBRelation, NCMBGeoPoint, 
  NCMBInstallation, NCMBPush } from 'ncmb-react-native';
  • NCMBUser(会員管理)
  • NCMBObject(データストア。保存、更新、削除)
  • NCMBQuery(データストア。検索、取得)
  • NCMBFile(ファイルストア)
  • NCMBAcl(権限管理)
  • NCMBRole(ロール、ユーザやロールのグルーピング)
  • NCMBRequest(NCMBへのリクエスト用。通常は利用しません)
  • NCMBRelation(データストアのリレーション)
  • NCMBGeoPoint(位置情報)
  • NCMBInstallation(デバイストークン)
  • NCMBPush(プッシュ通知)

初期化

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
new NCMB(applicationKey, clientKey);

データストア

データ保存

const obj = new NCMBObject('Test');
await obj
  .set('message', 'Hello, world')
  .save();
データ型
const obj = new NCMBObject('Test');
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();

データ更新

const obj = new NCMBObject('Test');
await obj
  .set('message', 'Hello, world')
  .save();
await obj
  .set('message', 'Hello, again')
  .save();

データ取得

obj2.set('objectId', 'OBJECT_ID');
await obj2.fetch();

インクリメント

const obj = new NCMBObject('Test');
await obj
  .set('num', 1)
  .save();
await obj.setIncrement('num', 1).save();
await obj.fetch();
obj.get('num') // -> 2

配列操作

追加
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']
削除
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']
追加(ユニーク)
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']

データ削除

await obj.delete();

位置情報

const obj = new NCMBObject('Test');
const geo = new NCMBGeoPoint(30.0, 130.0);
await obj
  .set('geo', geo)
  .save();

クエリー

通常

const query = new NCMBQuery('Test');
const ary = await query.fetchAll();

利用できるオペランド

  • 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

そのほかのパラメータ

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

件数取得

const query = new NCMBQuery('Test');
const {count, results} = await query.count().fetchWithCount();

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();

サブクエリー

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

サブクエリー(オブジェクト)

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();

位置情報

付近検索
const tokyoTower = new NCMBGeoPoint(35.6585805, 139.7454329);
const query = new NCMBQuery('Station');
const ary = await query
  .withinKilometers('geo', tokyoTower, 2)
  .fetchAll();
ボックス検索
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();

リレーション

作成

const item1 = new NCMBObject('Test');
await item1.set('message', 'Hello, world from item1').save();
const item2 = new NCMBObject('Test');
await item2.set('message', 'Hello, world from item2').save();

const relation = new NCMBRelation('Test');
relation.add(item1).add(item2);

const mainObj = new NCMBObject('Main');
await mainObj.set('relation', relation).save();

取得

const query = new NCMBQuery('Test');
const ary = await query
  .relatedTo(mainObj, 'relation')
  .fetchAll();

削除

const relation = new NCMBRelation('Test');
relation.remove(item1);
await mainObj
  .set('relation', relation)
  .save();

ロール

作成

const role = new NCMBRole;
role
  .set('roleName', 'admin');
await role.save();

削除

await role.delete();

ユーザ追加

await role.addUser(user).save();

所属ユーザ取得

const query = NCMBRole.query();
const role2 = await (query
  .equalTo('roleName', roleName)
  .fetch()) as NCMBRole;
const users = await role2.fetchUser();

検索

const query = NCMBRole.query();
const role2 = await (query
  .equalTo('roleName', roleName)
  .fetch()) as NCMBRole;

子ロール追加

await role
  .addRole(role2)
  .save();

子ロール取得

const query = NCMBRole.query();
const role = await (query
  .equalTo('roleName', roleName)
  .fetch()) as NCMBRole;
const roles = await role
  .fetchRole();

会員管理

ユーザ登録(ID、パスワード)

const user = new NCMBUser;
user
  .set('userName', 'tester')
  .set('password', 'tester');
await user.signUpByAccount();

ユーザ削除

await user.delete();

ログアウト

NCMBUser.logout();

ユーザ登録メール送信

await NCMBUser
  .requestSignUpEmail(`[email protected]`);

ログイン

const user = await NCMBUser
  .login('tester', 'tester');

ログイン(メールアドレス)

const user = await NCMBUser
  .loginWithMailAddress(config.test.emailAddress, config.test.password);

永続化

LocalStrage系のインタフェースを持ったライブラリ、オブジェクトが利用できます。

ncmb.storage = LocalStorage;

想定

  • LocalStorage (for web)
  • @react-native-async-storage/async-storage

復元する場合

const user = await NCMBUser.currentUser();

匿名ログイン

const user = await NCMBUser.loginAsAnonymous();

ソーシャルログイン

NCMBUser.signUpWith(provider: string, authData: authData)

が公式対応しています。必要なパラメータ authData は公式ドキュメント(リンク先)を参照してください。

ファイルストア

アップロード(テキストファイル)

const fileName = 'test.csv';
const file = await NCMBFile.upload(fileName, '1,2,3');

アップロード(バイナリファイル)

const fileName = 'test.jpg';
const blob = await promisify(fs.readFile)(`./test/${fileName}`);
const file = await NCMBFile.upload(fileName, blob);

ファイル削除

await file.delete();

ファイルダウンロード(テキストファイル)

const download = await file.download();

ファイルダウンロード(バイナリファイル)

const download = await file.download('binary');
download.type // -> eg. image/jpeg

ファイルダウンロード(DataURI)

const download = await file.download('datauri');

ファイル取得

const query = NCMBFile.query();
const files = await query.fetchAll();
// 検索
const files2 = await query.regularExpressionTo('fileName', /^.*?\.txt/).fetchAll();
const files3 = await query.greaterThan('fileSize', 8).fetchAll();

ファイルアップロード(ACL付き)

const acl = new NCMBAcl;
acl
  .setPublicReadAccess(false)
  .setUserWriteAccess(loginUser, true)
  .setUserReadAccess(loginUser, true);
const text = '1,2,3';
const fileName = 'acl2.csv';
const file = await NCMBFile.upload(fileName, text, acl);

デバイストークン

登録

const installation = new NCMBInstallation;
await installation
  .set('deviceToken', 'aaa')
  .set('deviceType', 'ios')
  .save();

更新

const installation = new NCMBInstallation;
await installation
  .set('deviceToken', 'aaa')
  .set('deviceType', 'ios')
  .set('message', 'Hi!')
  .save();
await installation
  .set('message', 'Hello')
  .save();

取得

await installation.fetch();

削除

await installation.delete();

検索

const query = NCMBInstallation.query();
const ary = await query
  .fetchAll();

プッシュ通知

登録

const push = new NCMBPush;
await push
  .set('immediateDeliveryFlag', true)
  .set('target', ['ios'])
  .save();

取得

await push.fetch();

更新

const push = new NCMBPush;
await push
  .set('immediateDeliveryFlag', true)
  .set('message', 'Hello')
  .set('target', ['ios'])
  .save();
await push
  .set('message', 'Hello, again')
  .save();

配信条件の設定

const query = NCMBPush.query();
query
  .equalTo('objectId', 'aaa');
const push = new NCMBPush;
await push
  .set('immediateDeliveryFlag', true)
  .set('message', 'Hello')
  .set('searchCondition', query)
  .set('target', ['ios'])
  .save();

削除

await push.delete());

License

MIT.