Ionic 2でハイブリッドなアプリ開発:デバッグのサクサク感・monacaとの比較

Posted on Posted in 趣味的なIT・ネットの話題

ハイブリッドアプリでシステム開発:JSでボタンへのイベント登録はloadの後じゃ無いとだめ | 法務ネット:弁護士 川内康雄

先日Monacaも軽く触っていたのですが、感想はデバッガが良くできているなというところでした。そこでIonicとMonacaの開発の私的なサクサク感を比較してみたいと思います。ちなみに比較対象のMonacaはフリー版です。CLIが使えるGold以上だとまた印象が変わってくるのかも知れません。

ionicもMonacaも、「HTML5+JavaScriptハイブリッドアプリ」という点では同じですので、ブラウザで開発中のアプリの実行結果を確認できます。

Monacaの場合はクラウドIDEですのでクラウド環境での実行、ionicはionic serveコマンドでサーバーを作ってローカルで実行という違いはあります。が、レスポンスに特段の差は無く、デバッグのサクサク感はそれほど変わらないと思いました。ChromeのJavaScriptコンソールによるデバッグ情報の表示も、どちらの環境も同じように行えます。強いて言うとバグやconsole.logの実行行の特定が、ionicの方が若干楽という程度でしょうか。app.bundle.jsがエディタ上で簡単に見えるので、対象行の発見が楽です。が、Monacaにしてもchromeからソースを追えば発見可能です。

一方、実機上でデバッグを行うを行う場合には、両者の使用感には差があります。 Monacaの場合は、クラウドIDEでの開発内容をMonacaアプリにダウンロードして実行します。もともとIDEがクラウド上にありますから、ビルドする度にアップロードをするという手間がかかりません。またビルドも自動的に実行されるので、コードを保存したらすぐにMonacaアプリで結果を確認できます。そしてconsole.logの内容は、アプリのフローティングメニューからたどれる表示画面で内容を確認できます。更にネットワーク経由で送信されているようで、少し遅れますがクラウドIDEに情報が表示されます。

ionic viewはmonnacaデバッガーにぱっと見は似ていますが、
・コードを変える都度ビルドしてアップロードするという手間をかけないと変更が反映されない
・これ自体にデバッグ出力を持っていないのでconsole.logを確認できない
という制限があります。そのためがんがんコードを書き換えながら実機で確認するという用途には余り向いていません。

How to debug on Ionic View [not the question, here’s the answer!]
この方法でconsole.logを確認することもできそうですが、出自の分からないサービスだと継続性やセキュリティの問題がありますので、簡単に頼ることもできないと思います。

ただしionicにはライブプレビューという機能があります。これは、母艦にAndroidを有線で接続している場合には、ionic runを-lオプション付きで起動すると、ソースを変更する度に自動的にAndroid実機に反映されるという仕組みです。-cオプションを付けている場合には、ionic runを起動したコンソールにログが出力されます。

そんなわけでデバッグ環境の充実度、使いやすさはionicよりもMonacaが一歩リードしていると感じました。次は実際にコードを書いてみて、開発しやすさを比較してみたいと思います。


Facebooktwittergoogle_pluspinterestlinkedinmail
納得したらすぐにシェア!