◀ 5.

jQuery .ready()（DOM 構築完了で実行 / 4 つの書き方 / 現代の代替）

▶
編集
この記事の要点
  • .ready() はDOM の構築完了（DOMContentLoaded 相当）を待ってから処理を実行する jQuery のイディオム
  • 画像読み込みは待たない（それを待つのは $(window).on("load", ...)）
  • $(function(){...}) / $(document).ready(function(){...}) など 4 つの書き方はすべて等価
  • スクリプトを </body> 直前に置けば不要になる場面が多い（DOM がすでに存在するため）
  • モダン JS の DOMContentLoaded イベントや defer 属性で代替可能。新規プロジェクトでは jQuery 自体を入れない選択肢も検討

.ready() とは

.ready() は jQuery で「DOM ツリーの構築が完了したら、この関数を実行してね」と登録するためのメソッドです。<script> を <head> に書いた場合、その時点では <body> 内の要素がまだ存在しないため、$("#foo") のようなセレクタが空になってしまいます。.ready() はこの問題を解決するためのものです。

内部的にはブラウザの DOMContentLoaded イベントを利用しています。画像や iframe など外部リソースの読み込みは待たないので、ページ表示の最速タイミングで起動します。

4 つの書き方 — すべて等価

歴史的経緯で複数の書き方が存在しますが、機能はすべて同じです。

// (1) もっとも明示的
jQuery(document).ready(function() {
    // 処理
});

// (2) $ エイリアス版
$(document).ready(function() {
    // 処理
});

// (3) jQuery() に関数を直接渡す
jQuery(function() {
    // 処理
});

// (4) $() に関数を直接渡す（最も短い、現代の主流）
$(function() {
    // 処理
});

新規コードでは(4) の $(function(){...}) がもっとも短くて読みやすいので、これを採用するのが一般的です。

load イベントとの違い

「ページが読み込まれたら」というイベントには .ready() のほかに $(window).on("load", ...) があります。発火タイミングが違うので使い分けます。

イベント発火タイミング用途
.ready()HTML の解析完了直後（DOMContentLoaded）DOM 操作、イベントバインド
$(window).on("load")画像・CSS・iframe など全リソースの読み込み完了後画像サイズに依存する処理、レイアウト計算

典型的なユースケース

$(function() {
    // クリックイベントのバインド
    $("#btn").on("click", function() {
        alert("clicked");
    });

    // 初期表示の更新
    $("#status").text("読み込み完了");

    // Ajax 初期ロード
    $.get("/api/items", function(data) {
        $("#list").html(data);
    });
});

script の置き場所と ready() の必要性

<script> をどこに置くかで .ready() の必要性が変わります。

  • <head> に置く場合 — DOM がまだ無いので .ready() 必須
  • </body> 直前に置く場合 — DOM はすでに完成しているので .ready() 不要
  • defer 属性付き — defer は DOMContentLoaded 前に実行されるよう保証される。.ready() 相当の効果がある

モダン JavaScript での代替

jQuery を使わない場合、ブラウザネイティブの DOMContentLoaded イベントで同じことができます。

document.addEventListener("DOMContentLoaded", function() {
    // 処理
});

// あるいは defer 属性付きで script を読めば DOMContentLoaded 前に実行されない
// <script src="app.js" defer></script>

よくある質問

Q: ready() を複数回書いていい？
A: OK。jQuery は内部でキューに溜め、登録順に全部実行します。ライブラリごとに ready() を分けて書く設計でも問題なし。

Q: ready() の中で読み込んだ画像のサイズを取りたい
A: ready() の段階では画像はまだ未ロードのことが多く、img.width が 0 になります。$(window).on("load", ...) か、個別画像の .on("load", ...) を使うのが正解。

Q: ready() が発火しない
A: そもそも jQuery が読み込めていない（CDN 失敗 / パス間違い）、他の JS でエラーが出て止まっている、のどちらかが大半。Console を見るのが最速。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. .css()
  2. .width()
  3. .height()
  4. .show()
  5. .ready()
  6. .attr()
2026-06-11 07:12:00 T 193

人気ページ

最近更新/作成されたページ