JavaScriptの$(document).readyの使い方を現役エンジニアが解説【初心者向け】

JavaScriptの$(document).readyの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

$(document).readyとは

$(document).readyとは、jQueryを使い、DOMの読み込みが完了したときに処理を実行するための記述です。

DOMとはJavaScriptでHTMLを操作するためのインターフェースです。

 

$(document).readyの使い方

$(document).readyを使うには、readyメソッドの引数にイベントハンドラを指定しなければなりません。

イベントハンドラはクリック操作に対してエフェクトなどの設定を行うことを指します。

$(document).ready(() => {
  console.log('DOM is loaded')
})

また、下記のような書き方をしても同じ効果を得ることが可能です。

$(() => {
  console.log('DOM is loaded')
})

 

[PR] フロントエンドで副業する学習方法を動画で公開中

$(window).load()との違い

$(document).readyとよく似た$(window).load()という記述があります。

こちらもloadメソッドの引数にイベントハンドラを指定し、下記のように記述します。

$(window).load(() => {
  console.log('Page is loaded')
})

 

この2つの書き方には違いがある点には注意が必要です。

$(window).load()はすべての画像が読み込み終わると、引数に指定したイベントハンドラが呼ばれます。

対して、$(document).readyはDOMが読み込み終わった段階で、引数に指定したイベントハンドラが呼ばれます。

$(document).readyは画像が読み込み終わる前に処理を実行することが可能です。

 

その真偽を確かめるために、簡単なコードを書いてみます。

まずは、HTMLに下記のようなimgタグを用意しましょう。

<img src="//picsum.photos/1600/900/?random">

次に、JavaScriptに$(document).readyと$(window).load()を記述してください。

$(document).ready(() => {
  console.log('DOM is loaded')
})
$(window).load(() => {
  console.log('Page is loaded')
})

デベロッパーツールを開いてコンソールを確認します。

最初に「DOM is loaded」と表示され、画面の方ではまだ画像がぼやけて読み込まれている状態です。

画像がクリアになると「Page is loaded」と表示されます。

デベロッパーツールを開いた状態でリロードして確認すると分かりやすいででしょう。

執筆してくれたメンター

メンター久保田 Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。 最初に選ぶポケモンは炎タイプ。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。