Edited at

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

More than 1 year has passed since last update.

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が利用可能な状態になっているかどうか確認してみてください。