jQuery入門講座使い方-readyイベント

readyイベント

概要

ページ構成を読み込んでから処理を開始

javaScriptは（基本的に）head領域に書かれるためbody領域よりも先に読み込まれます。jQueryではhtmlの様々な要素を操作できますが「読み込まれていないもの」を操作することはできません。ですのでhtmlの「ページ構成」を読み込んでから操作を開始するようにする必要があります。

そこで利用するのがreadyイベントです。ポイントはページ全体（画像などを含む）の読込ではなく、ページ構成（DOM要素）を読み込んだ時点で処理するため、ページを表示する前に様々な準備ができる点です。

readyイベントはほとんどのjQueryコンテンツで必要となるため、最初に覚える必要があります。
イベントという仕組みについては4つ先のページで説明します。ここでは構文として暗記して下さい。

解説

2つの構文

丁寧なreadyイベントの構文は以下の様になります。あとで短く記述できる構文を紹介するので、これは覚えなくてもOKです（正当なreadyイベントはこちらなので、一応紹介しています）。

jQuery(document).ready(
  /*--------------------------------------------------
  ページ構成が読み込まれたら この()内の処理が実行されます。
  ---------------------------------------------------*/
);

「write less, do more」をモットーとしているのに、上記の構文は少し長すぎます。なので、より短い以下の構文が用意されました。以下の様に「$」だけで記述できてしまいます。こちらを覚えるようにしてください。

$(
  /*--------------------------------------------------
  ページ構成が読み込まれたら この()内の処理が実行されます。
  ---------------------------------------------------*/
);

処理はfunctionで設定する

readyイベントのサンプルを確認する前に、readyイベントを利用していないサンプルを確認します。
サンプル（ready/01.html）を開いて画像が１つ配置されているのを確認してください。続いてソースを確認して、jQueryはリンクされているものの何も実行していないことを確認してください。

<script type="text/javascript" src="../../../css_js/jquery-1.11.2.min.js"></script>

続いてreadyイベントを利用したサンプルを確認します。サンプル（ready/01b.html）を開いて画像が表示されないのを確認してください。しかしソースを確認するとready/01.htmlと同じように画像が配置されていることを確認できます。表示されない理由はjQueryにあります。

<body>
	<img src="../merit/logo.gif" width="238" height="73" alt="">
</body>

ではjQueryを確認しましょう。ポイントはreadyイベントの処理はfunctionで設定しなければならないということです。ソースでは以下の様にreadyイベントの()内にloadFuncが設定されています。

$(loadFunc);

loadFuncは以下の様に記述され、hideメソッドによってimg要素を隠す処理が設定されています。
書類アイコンはリファレンスへのリンクとなっています、より詳細が知りたい方はリンク先で確認してください。

function loadFunc(){
	$("img").hide();
};

その結果、ページ構成の読込が完了したらimg要素を隠すため画像があるのに表示されないのです。

大抵は無名関数を利用します

殆どの場合、readyイベントに設定するfunctionは無名関数を利用して直接設定します。これはfunctionが多いと混乱する（名前を管理するのが大変な）ためです。無名関数とは以下の様にfunction名を指定しないfunctionを指します。→サンプル（ready/02.html）

$(function () {
	$("img").hide();
});

readyイベントを利用しないと...

最後にreadyイベントを利用しないとどうなるかを確認します。サンプル（ready/03.html）を開いて画像が消えないのを確認してください。jQueryは以下の様に記述され、readyイベントは利用せず画像を隠す記述のみとなっています。

$("img").hide();

これではimgタグが読み込まれる前にhideメソッドを実行してしまうため、画像を操作できず隠すことができません。外部データの読込などhtml内の要素を操作する必要のないものであればreadyイベントを利用する必要はないのですが、html内の要素を操作する時にはreadyイベントの仕組みを利用しなければなりません。

メモ

javaScriptのonloadイベントとは異なります

javaScriptの似たようなイベントにonloadイベントがありますが、これとjQueryのreadyイベントは大きく異なります。readyイベントは画像の読み込みなどを待ちません、ページ内の要素を読み込んだらすぐに実行されます。そのためページが表示される前に色々な準備ができるため便利なのです。

例えば解説で紹介したサンプル（ready/01b.html）は画像が表示される前に画像を隠すことができるので、ページを開いても画像はチラリとも表示されません（劣悪な環境では表示されるかもしれません...）。

しかしonloadイベントを利用した方は画像の読み込みが完了してから画像を隠すため、チラリと画像が表示されてから消えます。ブラウザのキャッシュをクリアしてからサンプル（ready/test01.html）を開いて確認してください（キャッシュが残っていると瞬時に読込が完了するのでready/01.htmlと同じ結果になります）。準備している画像がチラリと見えてしまうのは良くないので、jQueryのreadyイベントはとても便利なのです。

次回はスクリプトで操作する対象を指す「オブジェクト」について説明します。

次のページ：オブジェクトについて