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

初心者向けにJavaScriptの$(document).readyの使い方について現役エンジニアが解説しています。$(document).readyとはjQueryの記述方法で、DOMの読み込みが完了した時点での処理を書くことができ、(window).load()との違いについても解説しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptの$(document).readyの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

$(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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

$(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が守備範囲。

最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

JavaScriptの$(document).readyの使い方がよくわかったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

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