はじめに

第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（⁠以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。

今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。

jQueryってなに？

そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところから解説したいと思います。

jQueryというのは一言で言うとJavaScriptをより簡単かつ直感的に書くことができるようになるライブラリです。JavaScriptの面倒なところの1つにクロスブラウザの問題があります。IEやFirefox、Google Chromeなど様々なブラウザがありますが、それぞれでサポートしている機能が違ったり、同じ機能でも挙動が違ったりします。

そこでjQueryなどのライブラリを使うと、この違いを吸収してくれるので、クロスブラウザの問題をあまり意識せずにJavaScriptを書くことができるようになります。また、JavaScriptで頻繁に行うHTML（DOM）の操作はJavaScriptでそのまま書くと、わかりやすいとはいえず、最初はとっつきにくいものです。jQueryはその辺りのDOM操作をとても簡単で直感的に行うことができるようになっているのでJavaScriptを書いたことがない人でも、HTMLとCSSがわかっていればある程度直感的に書くことができると思います。

たとえば、JavaScriptではよくある、クリックしたときに何かする、といったことをjQueryを使って書いた場合と使わないで書いた場合の処理を見比べてみましょう。

var element = document.getElementById('btn');
function clickHandler() {
    // クリックしたときの処理
}
// IE以外の時の処理
if (element.addEventListener) {
    element.addEventListener('click', clickHandler, false);
}
// IEのときの処理
else if(element.attachEvent) {
    element.attachEvent('onclick', clickHandler);
}

$('#btn').click(function() {
    // クリックしたときの処理
});

この例ではコードがどういう意味かというところまでは解説しませんが、jQueryを使うととても簡潔かつ直感的にコードが書けるのがわかると思います。

jQeuryの他にもこのようなライブラリはたくさんあります。こういったライブラリの火付け役になったPrototype.js、@uupaa氏が開発している国産のuupaa.js、Sencha Touchなどで使われているext.jsなどが有名どころでしょうか。どのライブラリもそれぞれ特徴があるので自分にあったライブラリを使うのがいいと思いますが、本連載では一般的に一番使われているjQueryを主に使って進めていきたいと思います。

jQueryを学ぶ前に

jQueryを学ぶ前に、jQueryについて学ぶ上で読んでおくとよい資料や、困ったときに見ると便利なリファレンス的なサイトを紹介しておきます。

jQuery API

jQuery本家のAPIリファレンスです。わからないことがあったらとりあえずここを見る習慣をつけるといいと思います。英語が読めなくてもサンプルやデモも多くあるのである程度の内容ならわかりやすくなっています。

jQuery日本語リファレンス

こちらは日本語版のリファレンスです。公式ではありませんが、十分内容は充実していますので、本家のリファレンスと合わせて参考にするといいと思います。

はじめてのjQuery

こちらはスライドの資料です。とてもまとまっていて、最初にjQueryを覚える人は見ておくといいと思います。

Introducing jQuery

これもスライド資料ですが、途中に実際にさわれるデモも用意されているのでどういう動作をするか体験することができてわかりやすいです。

jQueryの基本

jQueryでのプログラムは基本的にHTMLの要素を取得して、それに対して何か操作をするというだけです。複雑なプログラムもそれの組み合わせなので、まずはその基本を覚えてましょう。まずはHTMLの要素を取得するというところとそれに対して操作するというところをわけて解説します。

HTMLの要素を取得する

まずjQueryは何かHTMLの要素をとってこない何も始まりません。HTMLの要素を取得するには以下のように書きます。

$(セレクタ)

この$()という記述がjQeuryの記述方法です。セレクタにはCSSのセレクタを使うことができます。CSS3のセレクタにも対応していますし、jQuery独自のセレクタというのもあります。それではどのようなセレクタを指定できるか例を挙げてみます。

// 全てのdiv要素
$('div');

// id属性がfooの要素
$('#foo');

// class属性にfooという値が含まれる要素
$('.foo');

// class属性にfooという値が含まれる要素の子要素のdiv要素
$('.foo div');

// input要素のうちtype属性の値がtextの要素
$('input[type="text"]);

// チェックされている要素（radioボタンなど）
$(':checked');

// div要素の先頭の要素
$('div:first');

// div要素の最後の要素
$('div:last');

// div要素のうちインデックスが1のもの（インデックスは0から順番にふられる）
$('div:eq(1)');

// h1やh2などのheader要素
$(':header');

いくつかの例のデモを用意しましたので実際にさわってみてください。

ふだんCSSを書いている人は見慣れたものあればそうでないものもあるかもしれません。とりえあえず最初はCSSのセレクタで要素が取得できるということを覚えておくといいと思います。また、取得した要素からさらに絞り込むこともできます。それには$()の第二引数に絞り込む対象のものを設定したり、find()やfilter()などを使います。

var $foo = $('.foo');

// .fooの以下にあるdiv要素（.fooは含まない）
$('div', $foo);
$foo.find('div');

// .fooのうちdiv要素のもの（.fooのみが対象）
$foo.filter('div');

このようにHTMLの要素を取得するというだけでも色々な方法があります。ここで取得したものをjQeuryオブジェクトといい、このjQeuryオブジェクトに対して色々と操作することができます。

取得したものに対して操作する

jQeuryを使って取得したjQeuryオブジェクトに対して何か操作をするには、.（ドット）でつなげて処理を書くだけです。この操作のことをメソッドといいます。それではいくつか例を挙げます。

// 要素を非表示にする
$('.foo').hide();

// 要素を表示する
$('.foo').show();

// 要素の表示/非表示を切り替える
$('.foo').toggle();

// 要素のcssを設定する
$('.foo').css('color', 'red');

// 要素のcssの値を取得する
$('.foo').css('color');

// 要素の中身のHTMLを書き換える
$('.foo').html('<p>bar</p>');

// .foo要素の末尾に要素を追加する
$('.foo').append('<p>bar</p>');

// 要素を削除する
$('.foo').remove();

// 属性値を設定する
$('.foo').attr('id', 'bar');

// 属性値を取得する
$('.foo').attr('id');

// 属性値を複数指定する
$('.foo').attr({
    src: 'bar.png',
    alt: 'bar',
});

// classを追加する
$('.foo').addClass('bar');

// classを削除する
$('.foo').removeClass('bar');

こちらもいくつかデモで用意しました。

またこれらのメソッドをでつなげて書くこともでき、これをメソッドチェインと呼びます。

// cssを変更してclassを追加して中身のHTMLを書き換える
$('.foo').css('color', 'red').addClass('bar').html('<p>bar</p>');

このように、メソッドには値を取得したり、HTMLを書き換えたり、CSSを書き換えたりと様々なものが用意されています。何を取得するか、とそれに対してどう操作するか、という組み合わせでいろいろなことができることがわかると思います。

イベントについて

ここでJavaScriptを知る上で大事な、イベントについて説明しておきます。イベントとはたとえばマウスのクリックだったり、キーボードでの文字入力などです。JavaScriptではこういったイベントが起きたときに何かするということを定義できます。この何かするというのをイベントハンドラといい、イベントに対してイベントハンドラを定義することをイベントのバインドと呼びます。

jQueryでイベントの設定をおこなうには以下のように記述します。

// イベントハンドラ
function clickHandler() {
    alert('clicked!');
}

// elementのclickイベントに対してclickHandlerをバインドする
$('.btn').bind('click', clickHandler);

jQueryではbind()を使ってイベントを設定します。また、jQeuryでは以下のようにbind()のショートカットとしてclick()なども使うことができます。これはショートカットなので動作は同じになります。

$('.btn').click(clickHandler);

さらに、JavaScriptでは無名関数という関数に名前をつけないでも使用することができるという機能があるので、上記のコードはさらに以下のようにかけます。

$('.btn').click(function() {
    alert('clicked!');
});

このスクリプトは以下で確認できます。

イベントは多少わかりにくいところもありますが、JavaScriptとイベントは切っても切れない関係ですので、最初のうちに理解しておくとその後の学習がスムーズにいくと思います。

今回のお題

それでは最後に今回のお題を掲載します。

概要

今回はマウスオーバーするとサブメニューが表示されるようなナビゲーションをjQueryで作ってみましょう。HTMLとCSSはあらかじめ書いてありますので、forkしてJavaScriptのコードのみ付け足してください。jQueryはあらかじめ読み込んでいますので後はコードを書くだけです。

余裕のある人は単にサブナビゲーションの表示・非表示を切り替えるのでなく何かアニメーションしたりエフェクトをかけてみてかっこいいUIにしてみてください。

ヒント

今回のお題ではマウスオーバーしたときに表示にして、マウスアウトしたときに非表示にするという動作が望まれます。なのでマウスオーバーとマウスアウトという2つのイベントを設定する必要があります。このマウスオーバーとマウスアウトを同時におこなう動作はよく使うのでjQueryにはhoverというショートカットが用意されています。

$(element).hover(
    function() { マウスオーバーのときの動作 },
    function() { マウスアウトのときの動作 }
);

もちろん個別に設定しても大丈夫です。jQueryにはこのようによく使う機能にはショートカットが用意されていることが多いです。また、フェードインやスライドダウンなど、ちょっとしたエフェクトもjQueryにはあらかじめ用意されています。余裕がある人は表示の切り替えにこちらも試してみてください。

それでは次回はこのお題について解説したいと思います。