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

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

MonacaのVueプロジェクトでNCMBを利用する際の注意点

f:id:mbaasdevrel:20190128101220p:plain

MonacaとNCMBは簡単に組み合わせて使えるのがメリットですが、最新のMonacaプロジェクトではWebPack4系が使われており、ビルド環境において問題が発生します。今回はVue + Onsen UI2でNCMBを利用するための手順を紹介します。

デフォルトではエラーが出ます

デフォルトのまま使おうとすると Module not found: Error: Can't resolve 'json' というエラーが頻発します。様々な設定を変更したのですが、解決するのに時間がかかりました。

結果から言えば、 webpack.config.js のJSON設定を削除すればエラーが消えます。以下の設定が不要です。

{
  test: /\.json$/,
  loader: 'json'
}

fsモジュールの読み込みでエラーが出る

さらに Module not found: Error: Can't resolve 'fs' というエラーも出ます。これはビルド環境はNode.jsながら、対象がWebブラウザであるために発生するエラーです。このエラーを回避するために、Vue向けのNCMBを読み込みます。

$ npm install github:NCMBMania/ncmb_js#master --save

こちらではNode.js用のlocalStorageライブラリ読み込みをコメントアウトしてあります。

使い方

後は通常のNCMBライブラリと変わらず利用できます。

const NCMB = require('ncmb');
const config = require('./config');
const ncmb = new NCMB(config.applicationKey, config.clientKey);

JavaScriptはビルド環境が複雑になっており、様々な技術の組み合わせによって成り立っています。そのためエラーが出ると、どの部分で引っかかったのか、追いかけるのが難しくなります。Vue + Onsen UI2の環境(というよりもWebpack4環境かも知れません)のでNCMBを利用する際には上記の点に注意してください。

中津川 篤司

中津川 篤司

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