こんにちは、ライターのマサトです！
今回は、HTMLコンテンツを読み込んだあとにjQueryの処理を実行できる「ready()」メソッドについて学習をしていきましょう！
この記事では、
・「ready()」とは？
・ready()の使い方
という基本的な内容から、
・load()の使い方
・ready()が動かない場合の対処例
・ready()を複数書く時の注意点
などの応用的な使い方に関しても解説していきます。
この記事で、「ready()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「ready()」とは？
それでは、まず最初に「ready()」メソッドについて基本的な知識から学んでいきましょう！
「ready()」は、HTMLの構造が組み立てられたあとすぐに処理を実行することができるメソッドになります。
ここで重要なのは「HTMLの構造」が組み立てられたかどうか？…という点です！
例えば、次のようなHTMLがあるとします。
<h1>サンプルタイトル１</h1> <p>サンプルテキスト</p> <h2>サンプルタイトル２</h2> <p>サンプルテキスト</p>
すると、ブラウザは上から順番に「h1タグ」→「pタグ」→「h2タグ」→「pタグ」のように読み込んで画面に表示させていきます。
この時に、「h2タグ」がまだ読み込まれていないのにjQueryから「h2タグ」を操作しようとするとエラーになります。
なぜなら「h2タグ」はまだ読み込まれていないので存在していないわけです。
このようなトラブルを回避するためには、今回ご紹介する「ready()」メソッドを使うのが最も簡単です！
本記事では、「ready()」メソッドの基本から応用技まで分かりやすく解説していきますのでぜひ参考にしてみてください！
ready()の使い方
ここからは、実際に「ready()」メソッドを使ったプログラミング手法を学んでいきましょう！
ブラウザがHTML構造を組み立てたら、jQueryで「$(document)」と記述するとHTMLの内容を取得することができます。
そこで、この「$(document)」に対してready()メソッドを実行することでHTMLの構造が組み立てられたあとに処理を実行できるわけです。
コードにすると以下のような記述になります！
$(document).ready(function(){
//ここに処理を書く
});
ready()内の関数の中に通常のjQueryを記述していくことになります。
つまり、これまで普通に記述していたjQueryコードを囲むようにready()メソッドを追記すれば良いわけですね。
ready()によるHTMLの読み込み方
ready()の使い方が分かったところで、もう少し具体的なHTMLの読み込み方を学んでいきましょう！
例えば、以下のようなHTMLを見てください。
<head>
<script>
$('h1').text('Hello World');
</script>
</head>
<body>
<h1>こんにちは</h1>
</body>
「scriptタグ」は通常だとbody要素内に記述しますが、この例では「headタグ」内に挿入していますね。
そして、jQueryによるコードで「h1要素」のテキストを変更する処理を書いています。
しかしながら、この場合はテキストを変更することができません！
冒頭でも解説しましたが、HTMLの読み込みは上から下へ順番に行われるのでjQueryの実行時にはまだ「h1要素」は存在していないからです。
こんな時に、ready()メソッドを使うと便利です！
次のサンプル例を見てください。
<head>
<script>
$(document).ready(function() {
$('h1').text('Hello World');
})
</script>
</head>
<body>
<h1>こんにちは</h1>
</body>
今回は、ready()メソッドを追記しているのが分かりますね？
この場合だと、正しくjQueryのコードが実行されて「h1要素」のテキストが変更されるのです。
jQuery実行時にはまだ「h1要素」が読み込まれていませんが、ready()によってHTML構造ができてから処理が実行されるからですね。
このように、jQueryでHTML要素を操作する際にはready()メソッドを記述しておくと安全にコードが実行されるわけです。
ready()にfunctionを設定する方法
ready()メソッド内の関数は別の箇所に記述して分けることも可能です。
例えば、コンソールログに文字列を表示するだけの関数を作ってみましょう！
function showLog() {
console.log('HTMLが読み込まれました！');
}
今回は、「showLog()」という関数名で定義しました。
この関数をready()メソッドで利用すると、以下のようになります！
$(document).ready(showLog);
ready()メソッドの引数に、先ほど作成した関数名を指定すればOKです。
関数を別に記述すると、ready()の記述が1行で完結するのでコードがスッキリして見やすくなります。
ready()の省略形(ショートカット)の使い方
実は、ready()メソッドには省略形の記述方法が用意されており、実際にはこちらで書くケースが多いのでご紹介しておきます。
これまでは、「$(document)」に続けてready()メソッドを実行してきました。
しかし、以下のようなコードでもまったく同じ動作を実現できます！
$(function() {
//ここに処理を書く
});
「$( )」の中にready()メソッド内で記述していたfunctionを書くだけですね。
記述量が大幅に減るのでコードの見通しも良くなります。
さらに、前章の関数指定を省略形の記述で書くと次のようになります！
$(showLog);
非常にスッキリしましたね！
書き方次第でready()メソッドの扱い方はいろいろ変化するので、状況に合わせて記述できるように慣れておきましょう！
load()の使い方
ready()メソッドによく似た機能を持っている「load()」メソッドについても見ていきましょう！
基本的な使い方から、ready()メソッドと何が違うのかを分かりやすく解説していきます。
ちなみにですが、現在ではload()メソッドを単体で使用することはなくon()メソッドのloadイベント処理として記述します。
（jQueryのver1.8以降で単体での使用は非推奨となりました）
on()メソッドについての基本的な使い方や活用事例については次の記事で詳しくまとめているので、ぜひ参考にしてみてください！
load()によるHTML要素の読み込み方
ここからは、実際にload（on()による処理）を使ったイベント処理の方法を見ていきましょう。
「loadイベント」を使うと、特定のHTML要素の読み込みが完了した時点で処理を実行することができるようになります。
例えば、画像の読み込みが完了した時点で処理を実行するには次のように記述します！
<body>
<img src="image.jpg">
<script>
$('img').on('load', function() {
//ここに処理を書く
})
容量が数MBあるような大きな画像ファイルの場合、ブラウザが読み込むまでタイムラグが発生します。
このような時にjQueryから画像を操作するようなプログラムを記述すると上手く動作しないわけです。
しかし、loadイベント処理を記述しておけば画像が最後まで読み込まれてから処理が実行されるので正常に動作します。
ready()とload()の読み込みタイミングについて
loadイベント処理でもready()のようにHTMLが読み込まれてから処理を実行するという記述が可能です。
次のサンプル例を見てください！
//ready()メソッドの場合
$(document).ready(function() {
//ここに処理を書く
});
//loadイベント処理の場合
$(window).on('load', function() {
//ここに処理を書く
});
この例では、ready()メソッドの場合とloadイベント処理の場合を比較しています。
少し記述の違いはありますが、どちらもHTMLが読み込まれてから処理が実行されるのは同じです。
ただし、両者には「読み込みタイミング」において違いがあります！
loadイベント処理の場合は画像などのリソースもすべて読み込まれてから処理が実行されるので少し遅くなるのです。
逆に、単純なHTML構造だけを読み込だけで構わないならready()メソッドのほうが高速に処理ができるというわけです！
DOMContentLoadedによる読み込み方法
jQueryのready()メソッドとほとんど同じ動作をする「DOMContentLoaded」についても合わせてご紹介しておきます。
「DOMContentLoaded」は主に標準のJavaScriptイベントで利用され、HTML構造が読み込まれたら発動します。
次のサンプル例を見てください！
document.addEventListener('DOMContentLoaded', function() {
//ここに処理を記述する
})
この例では、HTML構造が読み込まれたタイミングで関数内に記述したコードが実行されます。
つまり、ready()メソッドもDOMContentLoadedも同じタイミングで発動するわけです。
ただし、注意点としては「DOMContentLoaded」はIE9から対応しているという点です。
そのため、古いブラウザにも対応が必要な場合はjQueryのready()メソッドが重宝するわけです。
ready()が動かない場合の対処例
ready()メソッドでHTMLを読み込む際に、正常に動作しないケースがあるのでご紹介しておきます！
最も大きな要因として考えられるのは、他のjQueryプラグインやライブラリとの関連性によるものです。
jQueryはセレクタ指定などを行う際に「$」を最初に記述しますよね？
しかし、この「$」は単純な関数名でしかないので簡単に上書きできてしまいます。
そのため、他のプラグインやライブラリなどでも「$」が利用されている場合、jQuery側で正しく動作しないことがあるのです。
このような理由から、jQueryでは対処法として「$」を「jQuery」に置き換えても同じように動作する仕組みが用意されています！
次のサンプル例を見てください！
$('h1').text('hello');
jQuery('h1').text('hello');
この例では、h1要素のテキストを「hello」に変更する処理を「$」と「jQuery」の記述で書いたものです。
どちらもまったく同じ動作をします！
jQueryではこのような仕組みが用意されているため、もし上手く動作しない場合には「$」ではなく「jQuery」を試してみてください！
ready()を複数書く時の注意点
これまでready()メソッドを1つだけ記述してきましたが、複数記述することもできます。
例えば、「処理A」「処理B」「処理C」という3つの処理を別々のready()メソッドに分けると次のようになります！
$(document).ready(function() {
//ここに「処理A」を記述する
})
$(document).ready(function() {
//ここに「処理B」を記述する
})
$(document).ready(function() {
//ここに「処理C」を記述する
})
このように処理を分けて記述できるのですが、この方法は特に理由がない限りあまりオススメではありません。
なぜなら、3つの処理それぞれでHTMLが読み込まれたかを確認する時間が必要になるからです。
つまり、あまり効率の良いプログラミングとは言えないわけです。
このような3つの処理は、できるだけ1つのready()メソッドで記述するほうが効率は良くなります。
$(document).ready(function() {
//「処理A」を記述する
//「処理B」を記述する
//「処理C」を記述する
})
このように記述すると、HTMLの読み込み確認は1回だけで済むのでより高速な処理になるというわけです。
まとめ
今回は、HTMLの読み込み完了後に処理を実行できる「ready()」メソッドについて学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・$(document)に対してready()を実行することでHTMLの読み込み確認が実現できる
・省略形として「$(function() { })」と記述することでも同じ動作を行える
・loadイベント処理でも同じことが実現できるが読み込みタイミングが異なる
・jQueryの「$」は「jQuery」という記述に置き換えることも可能
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
