[Monaca] イベントの発生順序について

Monacaでアプリ開発をするときに気をつけなければいけない点として、使いたい機能が使える状態になっているかが挙げられます。

Cordovaプラグインを組み込んだ場合は、JavaScriptからネイティブ機能へアクセスが可能になっていないとCordovaプラグインの機能を利用することはできません。また、Onsen UIを利用する場合も、Onsen UIのコンポーネントの読み込みが完了していないと利用することができません。

そこで今回は、Monacaで開発したアプリが起動した時のJavaScriptのイベント発生順序を見ていきたいと思います。

イベント発生順序は、以下になります。

順番	イベント名	発生のタイミング
1	DOMContentLoaded	HTMLのすべてのDOM要素が読み込まれた時に発生します。
2	load	HTMLのレンダリングに必要なリソースがすべて読み込まれた時に発生します。
3	deviceready	JavaScriptからネイティブ機能へアクセスが可能になった時に発生します。
4	ons.ready	Onsen UIコンポーネントの読み込みが完了し、devicereadyイベントの後に発生します。

Monacaで開発するアプリでCordivaプラグインやOnsen UIを使用する場合は、このように発生するイベントの順番を意識する必要があります。

イベントの発生順序は、次のHTML内の<script>タグで確認できます。
注意点として、MonacaクラウドIDEのプレビューでは、実機での発生順序とは異なった動きになります。
テストをする場合は、実機をお使いください。

<script src="components/loader.js"></script>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        alert('DOMContentLoaded');
    }, false);

    window.addEventListener('load', function() {
        alert('load');
    }, false);

    document.addEventListener('deviceready', function() {
        alert('deviceready');
    }, false);

    // Onsen UIを使用している場合
    ons.bootstrap();
    ons.ready(function() {
        alert(‘Onsen UI ready’);
    });

</script>

Android端末で検証してみました。
このJavaScriptが実行されると、

順番	メッセージ
1	DOMContentLoaded
2	load
3	deviceready
4	Onsen UI ready

の順番で実行されることを確認することができます。

devicereadyイベントは、loadイベントの後に発生します。
HTMLのレンダリングに必要なリソースが多い場合は、その分devicereadyイベントの発生が遅れることになります。CordovaプラグインやOnsen UIを利用する際は、この点も注意する必要があります。

Monacaでのアプリ開発で、

「Cordovaプラグインが動作していないのでは？」
「Onsen UIが動作していないのでは？」

と感じた時は、一度CordovaプラグインやOnsen UIが利用可能な状態になっているかどうか確認してみてください。