スマホアプリ開発のブログ

【monaca】開発を効率化するために実践している4つのこと【Tips】

こんにちは、オサムです。

 

今回はmonacaでソースコーディングやテストを効率的に行うために、僕が実践していることを紹介します。
ちょっとしたことで作業時間を短縮することができるので参考にしてみてください。

 


 

1. ソースのインデントは後で揃える


ソースコードを書くときには通常、読みやすいようにインデントを揃えて書きますが、monacaは簡単にインデントを揃えることができます。

 

こんなグチャグチャなインデントでも、ソースを右クリック⇒「コードフォーマット」で一瞬でインデントを揃えることができます。

 

monaca インデントを揃える1

 

monaca インデントを揃える2

 

手打ちでコーディングしていると、改行するタイミングで自動でインデントを揃えてくれるのですが、サンプルソースをコピペしたりすると、コピー元のインデントが引き継がれるので、ガタガタになったりします。

 

そんなときでも手打ちでわざわざインデントを揃えなくてよいので、とても便利です。

 

2. 長くなったソースコードを折りたたむ方法


monacaでは「Ctrl+K+1」でソースコードを折りたたむことができます。
最後の数字はインデント数です。2インデント目で折りたたみたい場合は「2」を指定します。

 

ソースコードが長くなってくると、どこに何のメソッドがあるか分からなくなってきますが、この折りたたみ機能で簡単に見つけることができるので便利です。

 

monaca ソース折りたたみ

 

こんな感じで、メソッドにコメントは書いておいたほうがよいです。

 

3. メソッドの開始時と終了時にログを出しておく


メソッドの開始時、終了時はこんな感じでコンソールログを出しています。

 

function hogehoge() {
// 開始ログ
console.log("function " + arguments.callee.name + " start");

 

// 処理

 

// 終了ログ
console.log("function " + arguments.callee.name + " end");
}

 

「arguments.callee.name」はメソッド名を出してくれます。全てのメソッドでも同じように書いておけば、「呼ばれてるはずのメソッドが呼ばれてない」とか「メソッドの途中で処理が止まっている」などのバグがあったときの調査に役立ちます。

 

コンソールログはChromeのDevtoolsで見ることができます。

 

コンソールログの参照方法

ブラウザ上のmonacaクラウドIDEのプレビュー画面右上の「Detach」アイコンをクリックします
monaca Detach

 

プレビュー画面が別画面で表示されます。
【monaca】開発を効率化するために実践している4つのこと【Tips】

 

「F12」を押すとChromeのDevtoolsが立ち上がります。
「コンソール」タブでコンソールログを見ることができます。
【monaca】開発を効率化するために実践している4つのこと【Tips】

 

こんな感じでログが表示されるので、どのメソッドが動いたかをひと目で確認することができます。

 

4. 画面の表示がおかしい場合もDevtoolsを使う


Devtoolsの「Elements」タブを選択することで、HTMLソースを表示することもできます。

 

【monaca】開発を効率化するために実践している4つのこと【Tips】

 

プレビュー画面と連動しているので、こんな感じで、「HTMLソース」と「画面のエレメント」との対応を見ることができます。

 

画面が想定通りに表示されないときは、このようにHTMLソースを見ると、原因が特定しやすくなります。

 

Devtoolsは他にも、ネットワークのパフォーマンスを見ることができたり、ローカルストレージの情報を見ることもできるので、とても便利です。

 

まとめ


このように、monacaの便利な機能や、Devtoolsを使うことで、効率的に開発を進めることができます。
アプリを公開した後にバグが見つかった場合でも、短時間で調査や修正ができるので、ぜひ参考にしてください!

 

 

 

PR




PR


HOME スマホアプリ開発ブログ SE入門講座 無料スクールまとめ フリーSE案件サイト SEおすすめ書籍