タイトル: .ready()
SEOタイトル: jQuery .ready()（DOM 構築完了で実行 / 4 つの書き方 / 現代の代替）
| この記事の要点 |
|
.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 を見るのが最速。