質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

Monaca と javascript の実行順について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,063

Yoshi.O._8192

score 21

 前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • akabee

    2018/02/28 09:56

    そうですね、「バックエンド取得タイミングが想定と違い」とありますがバックエンド取得処理はHTTP通信によるものではないかと推測しており、その処理はJavaScriptでは大抵promiseを用いるので、処理結果が適切に受け取れていない、根本原因として非同期処理への理解が足りていない、と推測しています。

    キャンセル

  • Yoshi.O._8192

    2018/02/28 13:35

    「蚤」…誤字、失礼いたしました、「処理成功時のみの処理ネスト」、でした。

    キャンセル

  • Yoshi.O._8192

    2018/02/28 13:47

    「蚤」…誤字、失礼いたしました、「処理成功時のみの処理ネスト」、でした。…今、改めて考えますと、「バックエンドのコレクション取得値が表示される」時と「表示されない」時があり、「表示されない」が多かったのですが、「表示されない」は、fetchAll後のコールバックに時間をようしていただけかもしれません。そう捉えると、かなり、府に落ちる様に思えます(.then内記述。)。別の問題として、バックエンド関連とは分けて記述している、表示に使用しているローカルのJavaScriptの関数(上位スコープ内の変数からid位置へ出力)の呼び出し位置によって、表示される・表示されない、現象も発生しており、非同期とは違う要因が内在しているようにも感じられます。…先方が、大体何が出来るか理解出来たとのことで、私の手元にindex.html等のソースが無いので、詳細伝えることが出来ませんが。…非同期処理のコールバックが遅かっただけのことも充分に考えられます。ありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+1

たぶん非同期処理が掴めていないのだと思います。

【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/25 03:17

    早速の回答、有難うございます。
    表示順序からすると、クラウドバックエンドコレクションから返るのが遅いために、非同期先行で初期値のまま表示されてる可能性もあるタイミングに感じられもしました。
    それが、非同期実行とネット環境によるラグから生じる「ズレ」によるものなのか、そもそものhtml読み込みから構文解析時のJavaScriptの処理タイミングの問題なのか、
    …仮に後者だとした場合、Monaca、もしくは、Monacaデバッガー起因なのか、OnsenUIの影響なのか、捉えがたく、
    また、javascriptの記述位置がOnsenUIタグ?の中か外かでも挙動や表示結果が異なったり、中であっても<ons-~>タグ?のど(こ)の間に記述するかでも挙動や表示結果が異なる等も発生していて、切り分けが難しく、質問した次第です。

    書籍につきまして、気になっている書籍でありましたので、購入検討いたします。

    ご回答、情報提供、ありがとうございます☆。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る