Q&A
OnsenUIのフレームワークは何をお使いですか。AngularJS、Reactなどがありますが。
前提・実現したいこと
Monaca でハイブリッドアプリがつくれるから試してほしいとのことで試行錯誤中です。
発生している問題・エラーメッセージ
OnsenUI を使う予定ですが、.jsや<script>、nifty cloudのバックエンドの実行タイミングが想定と違い、バックエンドからデータが取得は出来ているのですが(console.logにて出力確認済み)、ページ表示のタイミングと、バックエンド取得タイミングが想定と違い、ブラウズ後にバックエンド取得をしているようなのです。
そこで、htmlのロード、構文解析以降、javascriptの実行タイミングの流れのわかるドキュメントを探しているのですが、ご存じないでしょうか？
試したこと
・htmlソースの<head>~<head>の要所にconsole.log()コーディング、androidスマホにデバッガーインストール、実機デバグでコンソールに表示順を確認。
・htmlソースを順に解析実行しつつ、varやid等は把握している様子ではあるけれど、ロジカルなjavascriptは実行していない様子。<body>内の<script>はhtmlソース構文解析タイミングで実行される模様。その後、javascriptを実行、onsenUIがreadyになる模様。正確な情報が欲しく、オフィシャルの解説があれば知りたいです。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
Onsen UI V2 JS Minimum …という回答で宜しいでしょうか？。
承知しました。であれば、テンプレートを大きく変更せずに利用していれば素直な挙動のはずなのでMonacaやOnsenUIが悪さをしているということは無いと思います。処理の順序としては上から順番に実行していきます。HTMLを上から読み込む→JavaScriptの読み込みがあったらそのjavaScriptの処理を行う、全部読み込み終わったら読み込んだ通りのイベント処理をする、という処理順しか基本的にはありません。kei344さんより既に回答がありますが、元COBOLプログラマ（過去の質問拝見しました）とのことですので、十中八九非同期処理が掴めていないのだと思います。a、bという処理が2行続けて書かれてあるメソッドxがあったとして、aが非同期処理だった場合、bはaの処理を待たずに実行されます。aで取得できるはずの値は2行続けて記載するような書き方ではbでは利用できません。じゃあaで取得できるはずの値で何か継続処理がしたければどうやって書けばいいんだという疑問が沸くかと思いますが、そのあたりの挙動がつかめていないのだと思います。その内容はWEB上にも解説記事がありますが、kei344さんご提示の書籍で把握できると思います。もし非同期処理が原因ではなさそうなら、ソースコードのご提示をお願いします。
promise、でしょうか、それらによって、適時、処理を分類して、スクリプト記述する、という感じになりますでしょうか。何らかのアクションに対して成功を待って、場合によっては処理成功時蚤の処理ネスト、といったような。
そうですね、「バックエンド取得タイミングが想定と違い」とありますがバックエンド取得処理はHTTP通信によるものではないかと推測しており、その処理はJavaScriptでは大抵promiseを用いるので、処理結果が適切に受け取れていない、根本原因として非同期処理への理解が足りていない、と推測しています。
「蚤」…誤字、失礼いたしました、「処理成功時のみの処理ネスト」、でした。
「蚤」…誤字、失礼いたしました、「処理成功時のみの処理ネスト」、でした。…今、改めて考えますと、「バックエンドのコレクション取得値が表示される」時と「表示されない」時があり、「表示されない」が多かったのですが、「表示されない」は、fetchAll後のコールバックに時間をようしていただけかもしれません。そう捉えると、かなり、府に落ちる様に思えます(.then内記述。)。別の問題として、バックエンド関連とは分けて記述している、表示に使用しているローカルのJavaScriptの関数(上位スコープ内の変数からid位置へ出力)の呼び出し位置によって、表示される・表示されない、現象も発生しており、非同期とは違う要因が内在しているようにも感じられます。…先方が、大体何が出来るか理解出来たとのことで、私の手元にindex.html等のソースが無いので、詳細伝えることが出来ませんが。…非同期処理のコールバックが遅かっただけのことも充分に考えられます。ありがとうございます。
回答1件
0
ベストアンサー
たぶん非同期処理が掴めていないのだと思います。
【JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita】
https://qiita.com/YoshikiNakamura/items/732ded26c85a7f771a27
【JavaScriptの非同期処理について - Qiita】
https://qiita.com/yasuno0327/items/df764997ef6d54805f21
Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法が良いと思います。
JavaScript ならとりあえずこれを通読してみてください、少し情報が古いところもありますがお勧めです。
【O'Reilly Japan - JavaScript 第6版】
https://www.oreilly.co.jp/books/9784873115733/
【O'Reilly Japan - 初めてのJavaScript 第3版】
https://www.oreilly.co.jp/books/9784873117836/
【改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛 |本 | 通販 | Amazon】
https://www.amazon.co.jp/dp/477418411X
投稿2018/02/24 17:45
総合スコア69398
早速の回答、有難うございます。
表示順序からすると、クラウドバックエンドコレクションから返るのが遅いために、非同期先行で初期値のまま表示されてる可能性もあるタイミングに感じられもしました。
それが、非同期実行とネット環境によるラグから生じる「ズレ」によるものなのか、そもそものhtml読み込みから構文解析時のJavaScriptの処理タイミングの問題なのか、
…仮に後者だとした場合、Monaca、もしくは、Monacaデバッガー起因なのか、OnsenUIの影響なのか、捉えがたく、
また、javascriptの記述位置がOnsenUIタグ？の中か外かでも挙動や表示結果が異なったり、中であっても<ons-~>タグ？のど(こ)の間に記述するかでも挙動や表示結果が異なる等も発生していて、切り分けが難しく、質問した次第です。
書籍につきまして、気になっている書籍でありましたので、購入検討いたします。
ご回答、情報提供、ありがとうございます☆。
あなたの回答
tips
プレビュー
