monacaとonsenUIを使った時のJavascriptの記述方法

Question

monacaとonsenUIを使って勉強しつつハイブリッドアプリを作ってます。
初歩的な質問かと思いますが、Javascriptの記述方法についてわからない部分がありますので、
質問させていただければと思います。

monacaの場合、メインであるindex.htmlの他に、ケースに応じていくつかのhtmlファイルを作成していくかと
思いますが、全てのhtmlファイルのJavascriptは、main.jsファイルを作ってそれに全て記述するという形で
良いのでしょうか。

メインのindex.html以外は、<ons-page>コンポーネントで作成しているので、index.htmlに記述する以外は
main.jsに記述する以外にないと思うのですが、Javascriptが効くところと効かないところが出てきてしまいます。
箇所ごとに即時関数で囲んだりしてみたのですが、うまくいきません。

monaca/onsenUIにおけるJavascriptの記述方法について教えていただければ幸いです。

よろしくお願いいたします。

Answer 1

恐らくons-navigatorを用いて画面遷移しているかと思います。
ons-navigatorはindex.htmlに定義していますよね。ons-navigatorの動きのイメージとしては最初に開いた画面はindex.htmlで、それが常に表示され続けており、ons-navigatorの機能により見た目の画面のみが切り替わっていくイメージです。画面はons-navigatorの機能により切り替わるのですが、読み込んだファイルはindex.htmlからひとつも切り替わっていません。
というわけで、index.htmlに定義してあるJavaScriptはons-navigatorが遷移した先の画面上でも自由に使うことができます。

ここで大事なのは、ファイル分割しようがしまいが、index.htmlで読み込んでおけば自由に使えるということです。
main.jsファイルを作ってそれに全て記述するという形で良いのでしょうか、というご質問ですが、その方式でも良いですし、ファイルを分割したいのであれば、例えばmain.jsとsub.jsを作ってindex.htmlで両方を読み込めば、どちらもすべてのページで利用することができます。

Comments

[kozy]

ありがとうございます。
ただ、上記の通りmain.jsファイルを作ってやってみたのですが、該当箇所がUncaught TypeError: Cannot read property 'addEventListener' of null at …となってしまいます。main.jsの他のコードは効いているものもあるので、main.js自体が読み込まれていないわけではなさそうです。そうなると原因がよくわからず…。ちなみに外部ファイルではなく、index.htmlに<script></script>で記述しても同じでした。何かこれが原因じゃないかというものがあれば教えていただけませんでしょうか。よろしくお願いいたします。

[akabee]

現状でmain.jsに全てコードを書いているけれどもそれを使おうとするとエラーになるので困っているということでしたか。
エラーの内容だけ見ると、○○○.addEventListener(...)というような記述をしているかと思うのですが、○○○の部分がnullになってしまっているためにaddEventListenerメソッドが使えないというエラーのようですね。

何かこれが原因じゃないかというのは色々あるのですが、どれに当てはまっているのかが判断できませんので追加で情報を下さい。
○○○の部分には何が定義されていますか？例えばこの○○○の変数名を間違えているだけでも今回のような現象は起こりそうです。
また、もし可能であれば再現するコードをご提供下さい。問題の切り分けをしてみます。

[kozy]

ありがとうございます！非常に助かります！

例えば以下のようなコードでも同じエラーが出ます。

「HTML]
<div id="btn">○○○○</div>

[JS]
(function(){
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
console.log("OK!");
});
})();

上記のコードをテキストエディタとブラウザで試してみると、問題なく動作するのですが、
monacaでやると、Uncaught TypeError: Cannot read property 'addEventListener' of null at …となってしまいます。また、monacaで新たに別のプロジェクトを立ち上げて上記のコードを試してみても問題なく動作するので、現状のプロジェクトの別の個所に何か問題があるというところまでは分かりました（コードの間違い等でもないようです）。ただ、その問題が何かは未だ分からず…。何か原因は考えられますでしょうか。宜しくお願いいたします。（自分でも引き続きデバックしてみます。）

[akabee]

ちょっと恐縮なのですが、こちらでも確実に現象が再現できないと調査ができません。
個人的にはHTMLファイルを分割しているからではないかと疑っています。別のプロジェクトを立ち上げて上記のコードを試すときには、HTMLファイルを分割していないので現象が起こらない、ということではないかなと。
何故その現象が起こるのかというのは、JavaScriptはons-navigatorが遷移するページ全てで有効なのですが、遷移先のページのDOMが、HTMLファイルを分割すると参照できていないのかな？等と考えています。
個人的にその条件で検証してみます。（ただしkozyさんの現象と完全にイコールなのかどうかが不明です）

ちなみに個人的にはAngularJS+OnsenUIで開発しており、その事象には遭遇したことがありませんが、もし上記予想通りだとしたらHTMLファイルを分割したければどうやって開発すればいいんでしょうね・・。

[kozy]

お手数かけてすみません…
ちなみにakabeeさんはHTMLファイルを分割せずに1枚のファイルで制作されていらっしゃるのですか？

[akabee]

分割していますが、特に問題ないです。フレームワークとしてAngularJSを使っているので、それが影響して上手くいっているのかなと思いますが、ちょっと良く分かりません。。

[akabee]

参考になるか分かりませんが、下記サンプルアプリはHTMLファイルを分割し、かつフレームワークを用いていないようですが上手くいっていますね。
https://frandiox.github.io/OnsenUI-Todo-App/
https://github.com/frandiox/OnsenUI-Todo-App

[kozy]

ありがとうございます。サンプルアプリを参考にしつつもう一度見直してみたいと思います。何か基本的なところが間違っているような気がしますので。

[akabee]

それっぽい再現ができたような気がするのですが、違う現象であればすみません。
var btn = document.getElementById('btn');というコードは、btnという名前の要素を探して変数btnに入れるというコードですが、これが初期化時すぐに実行されてしまうと、まだbtnという名前の要素が作成されておらず、同様のエラーが発生していました。
初期化時ではなくタイミングを遅らせて実行したところ、特に問題なく動作しました。
というわけで、上記事象と同じ事象なのであればvar btn = document.getElementById('btn');コード以下を要素が出揃ったタイミングで行う必要がありそうです。

具体的にどうすればいいのか、というのは個人的にも調べてみますが取り急ぎ以上ご連絡です。サンプルアプリもこれはevent.targetを使っていたりどういう仕組みになっているのか・・・。

[kozy]

出来ました！！
おっしゃる通りのエラーだったようで、

$(window).on('load', function() {
$('#btn').click(function(){
　 　　　処理
});
});

というふうに処理が実行されるタイミングを遅らせれば上手く動作しました！
（今回はJqueryを使いました）。

昨日からあれやこれや四苦八苦していましたので、非常に助かりました。
ありがとうございます！

[akabee]

お力になれたようで良かったです。お疲れ様でした。