この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:T
更新日時:2026-06-11 07:07:02

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

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

.ready() とは

.ready() は jQuery で「DOM ツリーの構築が完了したら、この関数を実行してね」と登録するためのメソッドです。

よくある質問

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 を見るのが最速。