Monacaを使ったアプリ開発テクニック

Monacaでアプリを開発するにあたって知っておいて欲しいテクニックを、厳選して紹介します。今すぐ役立つものもあれば、徐々に使い込んでいく中で使えるテクニックもあることでしょう。

1. プラグインをインストールしたらカスタムデバッグビルドを使おう

Monacaアプリ開発において、プラグインはまず間違いなく利用するものです。プラグインを使った場合、Web IDEのプレビュー画面では、その動作は確認できません。ダミーのデータを返すようにしないと、プラグイン利用部分のコードでエラーが出てしまうでしょう。

実機での確認時も注意が必要です。Monacaデバッガーを使うと、ソースコードを保存するだけですぐに実機上でアプリの動作を確認できますが、あなたが使いたい独自のプラグインは組み込まれていない可能性があります。その部分のコードはMonacaデバッガーでは利用できません。解決するためにデバッグビルドを使うこともできますが、デバッグビルドではコードの編集やデバッグログの確認に難点があります。

そんなときには、「カスタムデバッガービルド」を使ってください。

カスタムデバッガービルドは独自に指定したプラグインを含みつつ、Monacaデバッガーの機能を提供します。コードの変更もリアルタイムに確認でき、デバッグログも確認できます。

注意点として、カスタムデバッガービルドには、あなたが指定したプラグインしか入りません（デバッグビルドも同様です）。

対して、アプリストアのMonacaデバッガーには、他にもいくつかのプラグインが組み込まれています。Monacaデバッガーでは動いたのに、カスタムデバッガービルドでは動かない…といった状態になった時には、ちゃんとプラグインが入っているか確認してみてください。

2. Promiseではなくasync/awaitを使おう

JavaScriptを使う際に非同期処理は欠かせないものになります。ネットワークやファイル操作などはすべて非同期処理です。この部分を正しく理解し、実装できれば、効率的な開発が行えるようになるでしょう。

非同期処理はPromiseと呼ばれる仕組みを使います。 then で繋いでいく方法が一般的です。以下はURLの内容を受け取るまでの処理です。このようにインデントが深くなってしまうので、コードの見通しが悪くなりがちです。

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    // 結果のJSONを処理する
  })

これをasync/awaitで書き直すと次のようになります。

(async function() {
  const response = await fetch(url);
  const json = await response.json();
  // 結果のJSONを処理する
})();

awaitはthenで受け取る結果を返します。awaitは、asyncが定義されている関数内でしか使えないという制約があるため、処理全体を async の関数で囲んで、その関数をその場で実行する（関数全体を括弧で囲んで、それを最後の括弧で実行しています）形になっています。こうすると非同期処理が見通しいいものになります。thenを使った方式ではなく、async/awaitを使いこなしてください。

3. console.logとdebuggerを使おう

console.logはデバッグメッセージが流れる機能です。Monacaデバッガー上で実行すれば、アプリやWeb IDEのコンソールにメッセージが流れます。これを使ってデバッグしている人は多いのではないでしょうか。

もう一つ覚えて欲しいのがdebuggerです。これを書いておくと、コードがそこに着いた時に処理が停止します。Web IDEで記述しておいて、開発者ツールを開いておけば、処理を停止してくれます。

処理が停止したら、その周囲にある変数の値を調べたり、一つずつ処理を実行するステップ実行もできます。どこで動作が止まってしまっているのか、調べるのも容易です。ぜひ使いこなしてください。

4. 画像の高さを固定する

アプリとWebの違いで大きいのは、WebではHTMLのレンダリングが徐々に行われるために画面のデザインがガクガクと動くところです。これがないだけでずいぶんアプリっぽくなります。そして、そのガクツキを起こすのは画像の表示です。画像の高さを指定しておかないと、表示されるタイミングでHTMLの高さが変わってデザインがずれることになります。

防ぐためには画像の高さをあらかじめ指定しておくことです。指定はCSSやimgタグのheight要素でできます。同時にプレースホルダーになる画像をローカルに用意しておき、本当に表示したい画像を読み込めるまではプレースホルダーを表示しておくと、よりアプリっぽくなります。

5. ローディング表示を考える

先ほどの画像と同様に、Web APIなどを使って外部データを表示する際には、実際に表示が完了するまではローディングアイコンを出すようにしましょう。順番に表示したりすると、文字の行数が変わったりしてデザインがガクガクと動くようになってしまいます。ローディングアイコンを出して、データを読み込み終わってから表示を切り替えるといいでしょう。例えばOnsen UIではローディング用のコンポーネントを用意しています。

これはデザイン上の問題もさることながら、ユーザビリティを高めることにも繋がります。何も表示されていない状態だとユーザは不安になります。ローディングアイコンが出ると、処理が行われていると安心できるでしょう。

6. MonacaアプリはローカルHTMLで動いていることを知ろう

Monacaアプリは file:// というプロトコルで動作しています。私たちがよく使う、http:// や https:// ではありません。この点を理解しておかないと、Web IDEでは動くのに、Monacaアプリでは動かないという問題になります。Web IDEのプレビューは https:// で動作しています。

例えばCORS（Cross-Origin Resource Sharing）の制約が異なります。WebAssemblyやWeb Worker、moduleは file:// では mimeype の問題があり、読み込めません（外部に置いたりして解決もできます）。file:// と https:// は殆ど同じなので、普段は困らないでしょう。時々、こだわったことにチャレンジしようとすると、ハマることがありますので注意してください。

7. 開発スタイルを覚えよう

MonacaアプリはWeb IDE以外でも開発を行えます。まずMonaca Localkitがあります。Localkitはその名の通り、あなたのコンピュータ（ローカル）でMonacaアプリを開発できるようにします（有料プランの利用が必要です）。この場合のメリットは好きなエディタが使えるということです。もちろんデバッグもできます。

もう一つはMonaca CLIを使う方法です。こちらもローカルで開発できるようになります。Localkitと違うのは、LocalkitはGUIアプリ、Monaca CLIはコマンドだということです。Monaca CLIの方が、より上級者向けかも知れません。Monaca CLIの場合、インターネット接続がなくても開発を行えます。

8. データを保存する方法について学ぼう

アプリを作り始めて悩むのが、データをどこにどう保存するかです。データを表示するだけのアプリであればいいですが、多くの場合はユーザ操作によって作られたデータをどこかに保存しなければなりません。

HTML5標準で用意されているデータ保存は、次のようになります。

• IndexedDb
• localStorage

また、Monacaではファイル操作 プラグインを使うことで、HTML5 File API互換のファイル保存が可能になります。作成したデータをアプリ内部のストレージをはじめ、SDカードなどの外部ストレージにも保存できます。

そしてもう一つはクラウドサービスを使う方法です。例えば以下が挙げられます。

• ニフクラ mobile backend
• AWS S3
• Firebase
• Dropbox

こうしたサービスのWeb APIを使うことで、データを恒久的に保存したり、逆に取り出したりできます。

9. 分からないことがあったらTeratail/Monaca UGで聞こう

アプリを作っていると、常に悩みが出てくるものです。これは初級者に限らず、上級者であっても同様です。何の悩みもなく、迷いなく開発できる人は存在しないはずです。Monacaでは、プログラミング中の課題であれば公式のコミュニティフォーラムとしてTeratailを用意しています。こちらで聞いてみることで、Monacaをよく知る開発者に答えてもらえるかも知れません（回答はベストエフォートなので、必ず答えがもらえる保証はありません）。

また、Monacaの有料プランの方であれば、Monacaではテクニカルサポートも提供しています。

開発に限らずMonaca全般に関する悩み事があれば、Monaca UGに参加してみることをお勧めします。Monaca UGはMonacaユーザが集まっているコミュニティで、いわゆる中の人たちによる運営ではありません。その意味で中立的な意見を聞けるはずです。

まとめ

Monacaアプリ開発は、Web技術とネイティブ技術、さらにクラウドサービスの使い方など様々な技術が組み合わさって構成されます。その意味において、悩みどころや躓きポイントが数多く存在することでしょう。それらを一つずつ乗り越えた先に、アプリリリースという華々しい瞬間がやってくるのです。ぜひ諦めずにトライし続けてください。

今回紹介したテクニックは、アプリ開発を効率的に、高速化するために覚えておいて欲しいものの一部でしかありません。作りたいアプリ、技術力によって必要となるテクニックは様々です。ぜひ自分にあった手法、自分にあったテクニックを身に着けていってください。