【JavaScript初心者】jQueryが動かないときに知っておきたいreadyとloadの違い!

こんにちは。まさきです。

今回はjQueryが動かないときに確認すべきポイントとして、readyメソッドについてご紹介します。
また、合わせてreadyメソッドとloadメソッドの違いについて、ご説明しようと思います。

スポンサーリンク

NGなjQueryの書き方

まずはjQueryが動かない時のよくあるNGな書き方です。

こちらのHTMLとJavaScriptをご覧ください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <title>Ready</title>
    <script src="ready.js"></script>
</head>
<body>
    <div class="foo">
        <h1>サンプル</h1>
        <span>この文字を非表示にする</span>
    </div>
    
</body>
</html>
$('.foo').hide();

このJavaScriptではhideメソッドを使って、初期表示時に要素を非表示にしようとしています。

しかし実際の画面をご覧ください。

ばっちり文字が表示されてしまっています。

これは、『html要素の読み込みよりjQueryを先に実行しているので、hideメソッド実行時点ではfooクラスが見つからず、JavaScriptの処理が終わってからHTMLが描画されている。』といったことが起きているのです。

ではこれを回避する方法は2つあります。

1つ目は単純にscriptの読み込みをhtmlの後に記載する方法です。

つまりbodyの終わりタグの直前に記載するといったことになります。

これはあまり良い方法とされていません。

2つ目はreadyメソッドを使用する方法です。

今回はこちらのreadyメソッドについてご紹介いたします。

readyメソッド

readyメソッドはHTMLタグがブラウザで解釈され、DOMが利用可能になったタイミングで実行されます。

つまりreadyメソッドを使うと、先ほどのjQuery実行時にHTML要素が見つからない問題を防ぐことができます。

書き方は、jQueryを丸々readyメソッドの中に入れます。

$(document).ready(function() {
    //ここにjQueryの処理を書く
    $('.foo').hide();
});

このとき、かっこの数やインデントに注意しましょう。

$(function(){});

readyメソッドをを省略した書き方があります。

$(function() {
    //ここにjQueryの処理を書く
    $('.foo').hide();
});

こちらの方が現場では使われている印象があります。

見た目上readyメソッドを使っている感じはあまりしませんが、この書き方が出てきたらreadyメソッドの省略した書き方だということを覚えておきましょう。

loadメソッド

jQueryの実行について調べているとreadyメソッドの他にloadメソッドが出てくると思います。

loadメソッドとは、HTMLタグが解析され、画像などのデータを全て読み込み終わったタイミングで実行されます。

readyとの大きな違いは、readyメソッドはDOMが使用可能になったタイミングに比べて、
loadメソッドは画像などのデータの読み込みが終わったタイミングです。

実はこれは大きな違いです。

画像などの読み込みが終わってから実行になると、
大きい画像が配置されている場合、jQueryの実行タイミングがかなり遅れてしまいます。

例えば縦に長いページで、下の方に読み込む必要がある画像データが多いとします。
その場合上の方はユーザの画面に表示されていますが、jQueryの処理がまだ行われていないため、
jQueryで見た目の変更が実行されておらず、ユーザにはストレスになってしまうかもしれません。

こういったことを防ぐためにreadyメソッドを使うのが良いとされています。

なので結論、基本的にjQueryの実行タイミングにはreadyメソッドを使うのがよいでしょう!

以上、『jQueryが動かないときに知っておきたいreadyとloadの違い』についてでした。

最後まで読んで頂きありがとうございます。

スポンサーリンク
JavaScriptプログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人4年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました