SEO対策もバッチリ！jQueryで複数回 $(document).ready を安全に使う方法

2024-04-12

jQueryで複数回 $(document).ready を実行した場合の動作

複数回実行しても問題なく動作します。
呼び出した順に処理されます。
同じファイル内でも、別のファイルでも、呼び出し順は変わりません。
this や var などの変数は、各 $(document).ready 内で独立しています。

詳細

$(document).ready は、DOM が読み込まれた後に実行される処理を定義する関数です。複数回呼び出しても問題なく動作し、呼び出した順に処理されます。

以下の例では、$(document).ready が2回呼び出され、それぞれ異なる処理が実行されています。

$(document).ready(function() {
  // 最初の処理
  alert("最初の処理");
});

$(document).ready(function() {
  // 2番目の処理
  alert("2番目の処理");
});

this や var などの変数

各 $(document).ready 内で定義された変数は、その関数内でのみ有効です。他の $(document).ready 内では参照できません。

以下の例では、var で定義された変数は、それぞれの $(document).ready 内でのみ有効です。

$(document).ready(function() {
  var num = 1;
  alert(num); // 1
});

$(document).ready(function() {
  var num = 2;
  alert(num); // 2
});

注意点

複数回 $(document).ready を呼び出す場合、処理が重複したり、競合したりする可能性があります。コードを書き換える前に、意図した動作になることを確認する必要があります。

補足

上記の情報に加えて、以下の点にも注意が必要です。
- 処理が重い場合は、複数回 $(document).ready を呼び出すと、ページの読み込み速度が遅くなる可能性があります。
- コードの読みやすさや保守性を考慮して、複数回 $(document).ready を呼び出す必要がない場合は、1回のみ呼び出すようにしましょう。

関連キーワード

JavaScript
jQuery
$(document).ready
DOM
イベントハンドラ
変数
スコープ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery - multiple $(document).ready</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    // 最初の処理
    alert("最初の処理");
  });

  $(document).ready(function() {
    // 2番目の処理
    alert("2番目の処理");
  });
  </script>
</body>
</html>

このコードを実行すると、以下のダイアログボックスが順番に表示されます。

最初の処理
2番目の処理

this や var などの変数のスコープを確認するサンプルコード
処理が重複したり、競合したりするサンプルコード

$(document).ready 以外の方法

window.onload イベントは、ウィンドウの読み込みが完了した後に発生します。以下のコードのように、イベントハンドラに処理を記述することができます。

window.onload = function() {
  // 処理
};

defer 属性

script 要素の defer 属性を指定すると、DOM が読み込まれた後にそのスクリプトが実行されます。以下のコードのように、defer 属性を指定することができます。

<script src="script.js" defer></script>

async 属性

script 要素の async 属性を指定すると、DOM が読み込まれると同時にそのスクリプトが実行されます。ただし、他のスクリプトの読み込みを妨げる可能性があるため、注意が必要です。

<script src="script.js" async></script>

ES6 モジュールの import

ES6 モジュールを使用している場合は、import キーワードを使ってモジュールを読み込むことができます。モジュールが読み込まれると、そのモジュール内の処理が実行されます。

import { myFunction } from "./my-module.js";

myFunction();

それぞれの方法の比較

方法	メリット	デメリット
`$(document).ready`	jQuery で簡単に使える	処理が重複したり、競合したりする可能性がある
`window.onload` イベント	すべてのブラウザで使える	処理のタイミングが遅くなる可能性がある
`defer` 属性	処理のタイミングを遅らせられる	スクリプトの読み込みが遅くなる可能性がある
`async` 属性	処理を早く実行できる	他のスクリプトの読み込みを妨げる可能性がある
`import`	モジュールの依存関係を管理しやすい	ES6 モジュールに対応していないブラウザでは使えない