jqueryの書き方について「$(function(){〇〇〇)}; 」の外に書くこともありますか？

Question

実現したいこと

jqueryの書き方を知りたい

前提

jqueryを学んでいますが、書き方について教えてください。
jsファイルに書いていく際、初めに$(function(){)};こちらを書いてこの中に処理したいコードを書くと思っていましたが、ローディング画面の処理で止まってしまいました。
$(function(){)};の外に書いてみたところちゃんと動きました。
すべて$(function(){)};の中に書くものだと思っていたので、なぜ外に出さないと動かないのかが分かりません。

下記のコードを$(function(){)};の中にいれると動かない。外に出すと動いてくれます。
基本的なことを理解していないのかもしれませんが、どうかよろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

function loadingStop() {
    $('#loadingWrap').addClass('loadingNone');  // 'loadingNone' クラスを追加
  
    // 1秒後に display: none; を設定
    setTimeout(function() {
      $('#loadingWrap').css('display', 'none');
    }, 2000);
  }
  
  $(window).on('load', function() {
    loadingStop();
  });

試したこと

「loadingStop」の定義付け

補足情報（FW/ツールのバージョンなど）

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

Answer 1

JavaScript のイベントと処理実行のタイミング

JavaScript にはイベントという概念があります。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events

• ウェブページのロード（画像の読み込みなど）の完了
• HTMLの解析（DOMの構築）の完了

などがあります。

JavaScript のコードは、スクリプトが読み込まれたタイミングで実行されます。

<p>hogehoge</p>
<script>
document.querySelectorAll('p').forEach(p => p.textContent = 'foo');
</script>
<p>fugafuga</p>

例えばこのスクリプトは、「全ての p 要素を探して、中身を foo に書き換える」処理ですが、このまま実行すると「hogehoge」のみが書き換えられ、fugafuga はそのままになります。これは、スクリプトが実行されたタイミングでは、まだ fugafuga が読み込まれていないためにそのような結果になります。

これを、スクリプトの読み込み位置によらず、全ての HTML 中にある p 要素を対象に処理を実行したいと思ったときには、イベントを利用します。

<p>hogehoge</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('p').forEach(p => p.textContent = 'foo');
});
</script>
<p>fugafuga</p>

HTMLを解析し終えたら（DOM構築が完了したら）、引数の function() の中身を実行するというコードです。これによって fugafuga も foo に書き換わります。

jQuery の $(function(){ ... }); の意味

jQuery の $(function(){ ... }); は、document.addEventListener('DOMContentLoaded', function() { ... }); と基本的には等価です（フォールバックがある分、実装に差異はありますが）。

つまり、HTMLを解析し終えたら（DOM構築が完了したら）、中身を実行するというコードになります。

試したコードが実行されなかった理由

以下のコードは、ウェブページのロード（画像の読み込みなど）が完了したら、ローディング表示を消すという処理ですね。

function loadingStop() {
  $('#loadingWrap').addClass('loadingNone');  // 'loadingNone' クラスを追加

  // 1秒後に display: none; を設定
  setTimeout(function() {
    $('#loadingWrap').css('display', 'none');
  }, 2000);
}

$(window).on('load', function() {
  loadingStop();
});

このコードは「load イベントの登録（予約処理）」を実行しています。

予約処理なので、できるかぎり早く、つまり、スクリプトが読み込まれた時点で実行すべきです。それにもかかわらず、$(function(){ ... }); の中で実行してしまうと、「HTMLを解析し終えたら、load イベントを予約する」という処理になってしまい、予約処理が遅すぎるのです。

実際、そのようなコードは期待通り実行されたりされなかったりするでしょう。load イベントの発行前に load イベントへの予約が完了することが保証されないためです。うまくいくこともあるかもしれませんが、予約が遅すぎてイベント処理が既に終わってしまっているかもしれません。

Comments

[norino55]

お忙しい中、ご丁寧に回答頂きありがとうございました。
ローディング部分はすべて読み込む前に出来る限り実行する必要があるため、$(function(){ ... });の前に書く必要があるということが理解できました。
「イベントという概念」についてまだ理解が追い付かない部分がありますが、徐々に理解を深めたいと思います。
ありがとうございました。

Answer 2

$(function(){...}) 内のコードは DOMContentLoaded イベントで実行されますが、その時点では既に window の load イベントが起きた後である可能性があります。そのタイミングで $(window).on('load', ... でコールバックを登録しても手遅れなわけです。

$(function(){...}) の中に入れないと動かない処理、逆に中に入れると動かない処理、どちらでもいい処理がありますが、処理をどのタイミングで実行すべきなのかを理解して判断する必要があります。

Comments

[norino55]

ご回答ありがとうございました。
学んだ書籍では$(function(){...})から始まり、この中にすべての処理を書くサンプルであったため、必ずこの形で書いていかなくてはならにと思い込んでいました。
中に入れる、入れない、どちらでもいい処理があるということが一番私の知りたい回答でした。
ありがとうございました。