mBaaSを使ってWebアプリケーションを作ろう - ニフクラ mobile backend（mBaaS）お役立ちブログ

数年前、Node.jsやExpressに注目が集まった際によく言われてたのがMEANスタックです。それまでのLAMPスタックに対抗するもので、M（MongoDB）E（Express）A（Angular）N（Node.js）でWebアプリケーションを構築します。

今回の新しいmBaaSの使い方として、mBaaSをMongoDBの代わりに使う方法について紹介します。mBaaSの中にある機能を使うことでコード量を大幅に減らせるようになります。

JavaScript SDKを使う

ベースとして最適なのはJavaScript SDKになります。特にDOM操作は行っていませんので、npmで配布されている（Bowerでも可）を使ってそのままNode.js内で利用できます。

今回はNode.js系のアプリケーションサーバとして一般的なExpressを使います。ベースになるコードはexpress-generatorを使うと便利です。インストールはnpmを使って行います。

npm install express-generator -g

インストールされたらベースを生成します。

$ express ncmb-app

   create : ncmb-app
   create : ncmb-app/package.json
    :
   create : ncmb-app/bin/www

   install dependencies:
     $ cd ncmb-app && npm install

   run the app:
     $ DEBUG=ncmb-app:* npm start

まずnmcbをインストールします。

cd ncmb-app
npm i
npm i ncmb --save

データを保存してみる

express-generatorのコードはシンプルで、ルーティングはroutes以下に配置されます。例えばPOST / にアクセスした時にデータを登録するようにしてみます。まず index.jade を編集します。

extends layout

block content
  h1= title
  p Welcome to #{title}
  form(method="POST",action="/")
    input(type="text",name="message")
    button 保存

この処理を受け取るのは routes/index.js です。以下のように処理を追加します。

router.post('/', function(req, res, next) {
  var message = new Message;
  message.set('message', req.body.message)
    .save()
    .then((obj) => {
      res.redirect('/');
    })
    .catch((err) => {
      res.redirect('/');
    });
});

ここはそのままNCMBの処理になります。index.jsの上の方でNCMBを読み込みます。

var NCMB   = require('ncmb');
var application_key = "YOUR_APPLICATION_KEY";
var client_key = "YOUR_CLIENT_KEY";
var ncmb = new NCMB(application_key, client_key);
var Message = ncmb.DataStore("Message");

これでデータの保存ができるようになりました。

保存したデータを表示する

次に保存したデータを表示してみます。これは GET / にアクセスした際に処理します。ここもJavaScript SDKを使うだけです。

router.get('/', function(req, res, next) {
  Message
    .fetchAll()
    .then(function(ary) {
      res.render('index', { title: 'Express', messages: ary });
    })
    .catch(function(err) {
      
    })
});

後は index.jade の中で表示を行います。

ul.list
  for msg, i in messages
    li= msg.message

これでデータを保存し、さらに表示を行う処理までが完了しました。

mBaaSをバックエンドにするメリット

今回はまだ実装していませんが、会員管理やファイルストアを使い際にも込み入ったコーディングをすることなく実装できます。データ検索もよくある処理ですが元々実装されています。こうしたWebアプリケーションを構築する上でよく使われるコードを組むことなく、自分が作るサービスの大事な部分だけに集中できるのがメリットです。

さらにJavaScript SDKによってデータの通信処理部分を一切気にすることなく、JavaScriptオブジェクトのまま操作できます。URLを書いて、認証をして…といったWeb APIを操作する上での手間になる部分を気にする必要がありません。

また、Webアプリケーションだけでなくスマートフォンへの展開を考えた際にもメリットがあります。iOS/Android/Unity向けにもSDKがありますので、同じデータを使ってすぐにスマートフォンアプリとWebアプリケーションの連携が可能です。Monacaを使えばJavaScriptのコードを流用できるでしょう。プッシュ通知も実装を殆どすることなくすぐに利用できます。

Node.jsとJavaScript SDKを使ってWebアプリケーションを素早く作りましょう！