【monaca】開発を効率化するために実践している4つのこと【Tips】
こんにちは、Stacaの中の人です。
今回はmonacaでソースコーディングやテストを効率的に行うために、僕が実践していることを紹介します。
ちょっとしたことで作業時間を短縮することができるので参考にしてみてください。
目次
1. ソースのインデントは後で揃える
2. 長くなったソースコードを折りたたむ方法
3. メソッドの開始時と終了時にログを出しておく
4. 画面の表示がおかしい場合はDevtoolsを使う
まとめ
1. ソースのインデントは後で揃える
ソースコードを書くときには通常、読みやすいようにインデントを揃えて書きますが、monacaは簡単にインデントを揃えることができます。
こんなグチャグチャなインデントでも、ソースを右クリック⇒「コードフォーマット」で一瞬でインデントを揃えることができます。
手打ちでコーディングしていると、改行するタイミングで自動でインデントを揃えてくれるのですが、サンプルソースをコピペしたりすると、コピー元のインデントが引き継がれるので、ガタガタになったりします。
そんなときでも手打ちでわざわざインデントを揃えなくてよいので、とても便利です。
2. 長くなったソースコードを折りたたむ方法
monacaでは「Ctrl+K+1」でソースコードを折りたたむことができます。
最後の数字はインデント数です。2インデント目で折りたたみたい場合は「2」を指定します。
ソースコードが長くなってくると、どこに何のメソッドがあるか分からなくなってきますが、この折りたたみ機能で簡単に見つけることができるので便利です。
こんな感じで、メソッドにコメントは書いておいたほうがよいです。
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」アイコンをクリックします
プレビュー画面が別画面で表示されます。
「F12」を押すとChromeのDevtoolsが立ち上がります。
「コンソール」タブでコンソールログを見ることができます。
こんな感じでログが表示されるので、どのメソッドが動いたかをひと目で確認することができます。
4. 画面の表示がおかしい場合もDevtoolsを使う
Devtoolsの「Elements」タブを選択することで、HTMLソースを表示することもできます。
プレビュー画面と連動しているので、こんな感じで、「HTMLソース」と「画面のエレメント」との対応を見ることができます。
画面が想定通りに表示されないときは、このようにHTMLソースを見ると、原因が特定しやすくなります。
Devtoolsは他にも、ネットワークのパフォーマンスを見ることができたり、ローカルストレージの情報を見ることもできるので、とても便利です。
まとめ
このように、monacaの便利な機能や、Devtoolsを使うことで、効率的に開発を進めることができます。
アプリを公開した後にバグが見つかった場合でも、短時間で調査や修正ができるので、ぜひ参考にしてください!
プログラミング未経験からアプリ開発の近道!
プログラミングスクール【無料/有料】の選び方&おすすめスクールを3つずつ紹介
【monaca】開発を効率化するために実践している4つのこと【Tips】 関連ページ
- 【個人スマホアプリ開発】公開しているアプリ<Staca>の紹介
- スマホアプリ開発で【monaca】を選んだ理由と実際に使ってみた感想
- 【アプリで稼ぎたい】個人開発のスマホアプリってどれくらい儲かるの?【無理ゲー】
- 【monaca】アプリ公開前にこれだけはやっておこう!【あとで困ります】
- 【悲報】初めてアプリ課金が発生!喜んだのもつかの間【現実は厳しかった】
- 【障害】ローカルストレージの会員認証データが消えた【ごめんなさい】
- 【初心者向け】スマホアプリ開発の始め方【最短ルートでアプリ公開】
- 【祝】Stacaの会員数が5000人を突破しました【スマホアプリ開発】
- 【20代限定】未経験から3年で年収1000万の安定収入(+α)を得る方法【IT業界】
- 【monaca】AppTrackingTransparencyの実装方法【IDFA対応】
- 【障害】すべてのリアルタイム通信がエラーになってしまった【アプリ保守は面倒っす】
PR