はじめに

第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

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