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

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

Nuxt.jsを使ってVue × NCMBでサーバサイドレンダリングを実現する

f:id:mbaasdevrel:20180323175835p:plain

最近、ReactやVue、AngularといったVirtualDOMを使ったフレームワークが人気です。そして、元々Webブラウザ上だけで動作していたのが、サーバサイドでも同じ仕組みで使えるようになっています。サーバサイドレンダリングによって、サーバサイド/クライアントサイドの両方で同じように開発できるようになっています。

Vueでサーバサイドレンダリングを使う際に便利なフレームワークがNuxt.jsになります。そしてmBaaSはネットワークを用いた処理になるので非同期処理になるのがデータ表示時のネックになります。そこで今回はNuxt.jsとmBaaSを組み合わせて使う方法について紹介します。

Nuxt.jsのインストール

Node.jsはすでにインストールされていることとします。まず、Vueを簡単に使うためのCLIツールをインストールします。

$ npm install -g vue-cli

そしてNuxt.jsが組み込まれたテンプレートをインストールします。 <project-name> は皆さんのものに置き換えてください。

$ vue init nuxt-community/starter-template <project-name>

後は必要なライブラリをインストールします。

$ cd <project-name>
$ npm i

JavaScript SDKのインストール

次にNCMBのJavaScript SDKをインストールします。

$ npm i ncmb -S

書き方

初期化

今回はシンプルにデータを取る処理を記述します。 pages/index.vue<script> 直下でJavaScript SDKを初期化します。 YOUR_APPLICATION_KEYYOUR_CLIENT_KEY はそれぞれ読み替えてください。

const NCMB = require('ncmb');
const application_key = 'YOUR_APPLICATION_KEY';
const client_key = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(application_key, client_key);

非同期処理のデータ取得

ここからがポイントです。例えばcreatedメソッドなどでデータ取得を記述しても、データの取得が終わる前にレンダリングしてしまいます。そこでNuxt.jsでは asyncData というメソッドを用意しています。ここではasync/await、Promise、コールバックなどを使って非同期データを取得し、画面に反映できます。

例えば以下のようになります。今回はasync/awaitを使っています。

export default {
  async asyncData ({ params }) {
    const Hello = ncmb.DataStore('Hello');
    const messages = await Hello.fetchAll();
    return {messages};
  },
  data() {
    return {
    }
  },
  components: {
    AppLogo
  }
}

asyncDataで取得したデータは画面に反映されます。

f:id:mbaasdevrel:20180410184159p:plain

まとめ

データ取得ができれば、追加や更新、削除といった処理もできるでしょう。NCMBをVue/Nuxtと組み合わせる際には、この方法を使ってみてください。

中津川 篤司

中津川 篤司

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