Web制作の現場で使えるjQuery　UIデザイン入門 ― 第6回

jQueryのイベントをチュートリアルで学ぶ（前編） (1/6)

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第6回です。過去の記事もご覧ください。

　jQueryを使ったプログラムの基本的な要素として、セレクターと(X)HTML/CSSを操作する命令について解説してきました。今回はもう1つの重要な要素である「イベント」を紹介します。

命令が実行されるタイミングを決める「イベント」

　これまで見てきたように、jQueryを使ったプログラムは、セレクターで特定の(X)HTML要素を指定し、(X)HTMLやCSSを追加・変更します。サンプルプログラムは理解しやすいように、Webブラウザーで開くといきなりプログラムが実行されるものでしたが、本来必要なのはサイト制作者が意図したタイミングで実行されるプログラムですよね。では、タイミングはどのようにして指定するのでしょうか？

　たとえば、第1回で紹介したアコーディオンパネルは「ユーザーが特定の要素をマウスでクリックしたときに、要素の高さを変更する」プログラムでした。ほかにも、マウスオーバーで画像が切り替わるメニュー、ドラッグ＆ドロップで並び順を変更できるナビゲーションなど、jQueryやJavaScriptを使ったユーザーインターフェイス（UI）を改めて見てみると、どれも何らかのきっかけとなる出来事があって、(X)HTMLやCSSが変更されていることが分かります。

　こうした、プログラムが実行される“きっかけ”を「イベント」と言います。jQueryでは（というよりもJavaScript一般に言えることですが）、イベントを感知（発見）したタイミングで、設定しておいたプログラムが実行されます。

　イベントを感知するにはいくつかの命令を使います。

(X)HTMLが読み込まれたタイミングで実行するready()

　「命令が実行されるきっかけ」は、クリックやマウスオーバーのように、ブラウザー上のユーザーによる操作だけではありません。「ブラウザーがWebページを読み込み終わった」というきっかけも立派なイベントです。

　これまで、“お約束”ということで使ってきた以下のコードを改めて見てみましょう。

$(function(){
    //(X)HTMLが読みこまれた際に実行したい命令
})

　第3回で紹介したように、上記のコードは以下の省略形でした。

　

$(document).ready(function(){
    //(X)HTMLが読みこまれた際に実行したい命令
})

　ready() は、「(X)HTMLの読み込みが完了した」というイベントを感知する命令です。ready()の左側では、セレクターを $(document) のように記述して、Webページ全体（document）を対象にしています。したがって、$(function(){...}) は、「Webページ全体の読み込みが終わり、準備ができたら命令を実行しなさい」という処理の省略形だったのです。

　ready(...) の括弧には function(){...} と記述し、その内側に実行したい処理を記述します。括弧内に function(){...} と書くのは、ready()に限らず、イベントを感知して命令を実行するときに一貫した決まりです。

他のイベント処理でもready()は必須

　ready() はイベントを感知する命令の一種ですが、他のイベントを感知したい場合にも、 $(function(){...}) の内側に処理の内容を記述します。たとえば、以下のソースコードは、「button要素がクリックされたら命令を実行する」というプログラムです。詳細は後述しますが、click() は「特定の要素がクリックされた」というイベントを感知する命令です。

<script type="text/javascript">
$("button").click(function(){
    //button要素がクリックされた際に実行したい命令
})
</script>

　このscript要素をhead要素内に記述した場合、ブラウザーはページの読み込みがまだ終わっていないためbutton要素の存在を見つけられず、プログラムは正常に動作しません（第3回を参照）。

　そこで、次のようにプログラム全体を $(function(){...}) の内側に入れ込みます。

<script type="text/javascript">
$(function(){
    $("button").click(function(){
        //button要素がクリックされた際に実行したい命令
    })
})
</script>

　これでブラウザーはscript要素の記述位置に関係なくbutton要素を発見でき、プログラムはページの読み込みが終わったあとに実行されます。 $(function(){...}) を使えば、button要素がクリックされたタイミングで実行したい命令を設定できます。

　jQueryでプログラムを記述する際には、$(function(){...}) の内側に記述していくことを改めて覚えておきましょう。

　それでは、次ページからはjQueryでイベントを感知するための具体的な方法について紹介していきます。