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

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

ただいまの
回答率

90.83%

  • JavaScript

    14254questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Scriptの実行順序に関して

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 59

Yasu0421

score 3

Scriptの実行順序が理解できていないので、ご教示いただけないでしょうか?

以下の様なコードを記載した時、<head>部分に記載した「スクリプト1」よりも
<body>部に記載した「スクリプト2」の方が早く実行されるのですが、
一体、どのような順番で処理されるのか、初心者向けにご教示いただけないでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jQuery/jquery-3.3.1.min.js"></script>
    <script> // スクリプト1
     $.get("./test.json", function(data){
         hoge = $.parseJSON(data);
      });
    </script>
</head>
<body>
    <div>Get external text test</div>
    <script> // スクリプト2
          alert(hoge[0].name);
    </script>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+3

<head>部分に記載した「スクリプト1」よりも<body>部に記載した「スクリプト2」の方が早く実行されるのですが、

いえ、$.get自体はalertより先に実行されて、通信が始まります

通信が完了してようやく$.getのコールバック関数が実行されます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/22 18:37

    ご回答ありがとうございます。
    Chromeでステップ実行して確認しているのですが、先にalertを表示しようとしているため
    スクリプト1でグローバル変数としてhogeにパースしたはずのデータがnot definedとなる模様です。
    スクリプト2の中にalertを記載すると問題なく表示されるのですが、
    何か根本的に認識を誤っているのでしょうか?

    キャンセル

  • 2018/05/22 18:58

    はい、実行順序は多くの場合、「$.get自体の実行」→「下部のalert」→「(通信終了時に)$.getに渡した関数の実行」となって、下部の実行は通信終了を待ちません。

    キャンセル

  • 2018/05/23 07:30

    分かりやすいご説明いただき有難うございます。
    スクリプトの実行順序というよりも、関数の実行順序の問題だと理解いたしました。実行順序に依存関係があるような場合は、ステートマシンのような
    仕組がいるのですね(コールバック関数といった)。
    どうもありがとうございました。大変助かりました

    キャンセル

checkベストアンサー

+2

試しに

<script> // スクリプト1
  $.get("./test.json", function(data){
    hoge = $.parseJSON(data);
    alert(hoge[0].name);
  });
</script>


または

<script> // スクリプト1
  $.get("./test.json", function(data){
    hoge = $.parseJSON(data);
  });
  alert("Getting JSON!");
</script>


と記述して実行してみてはいかがでしょうか。 $.get は非同期処理ですので通信が完了するまで待ってくれるわけではなく、すぐに次の処理に移行します。コールバック関数 function(data){...} は通信が終わった後に初めて実行されます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 07:22

    ご回答いただきありがとうございます。
    上記の件は、既に確認済でしてこの場合だとhogeが表示されます。
    本題のスクリプトの実行順番のご回答の結論としては、
    ・「スクリプト1」「スクリプト2」を分けて記載しても、1つのスクリプ トとして扱われる
    ・$.getは非同期であるため、後段のスクリプトに記述された処理が先に
     実行されるので、処理を意識するにはコールバック関数で制御する必要
     が発生する
    ということですね。
    理解いたしました。
    どうもありがとうございました。

    キャンセル

  • 2018/05/23 10:08

    「$.getは非同期であるため、後段のスクリプトに記述された処理が先に実行される」
    この部分での理解で少し気になりました。今回のケースではスクリプト2がとても軽量な処理なのでコールバックより先に実行されると思いますが、必ずこの順序というわけでもなく、非同期になるとコールバック関数がどんなタイミングで実行されるかわからないと思っていてください。

    キャンセル

0

いただいたアドバイスから、以下のようにコードを修正することで
所期を満足することができることが分かりました
初心者にとっては、大変勉強になりました。
ご回答いただきありがとうございました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jQuery/jquery-3.3.1.min.js"></script>
    <script>
      $.when(
        $.get("./test.json", function(data){
          hoge = $.parseJSON(data)
        })
      ).done(function(){
        alerthoge();
      });

    </script>
</head>
<body>
    <div>Get external text test</div>
    <script>
      var alerthoge = function(){
          alert(hoge[0].name);
      }
    </script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

関連した質問

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

  • JavaScript

    14254questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。