この連載は、ADC（Adobe Developer Connection）にて紹介されているものです。Adobe社製品の最新技術情報は、ADCをご覧ください！
jQueryは、非常に人気と歴史のあるJavaScriptライブラリです。jQueryを利用すれば、直感的なコードで、思い通りのUI処理を容易に実現できます。この記事では2回にわたり、jQueryの基本を説明するとともに、実際にサンプルを作成しながらjQueryプログラミングの要諦を紹介します。
jQueryを利用する際の開発環境ですが、jQueryではコードを非常にコンパクトにできるため、普通のテキストエディタでもプログラミングを行うのはそれほど難しいことではありません。しかし、Dreamweaver CS5.5にはjQuery開発を支援する様々な機能が用意されており、Dreamweaver CS5.5を使えば、開発に必要な時間をさらに短縮することができます。現在、Adobeサイトにて、最新のDreamweaver CS6 体験版をダウンロードできます。
jQueryのメリット
jQueryは、手軽に「DOM（Document Object Model）」を操作できるようにするライブラリです。DOMというのは、HTMLやXMLのドキュメントをメモリ上に展開し、プログラムから扱えるようにしたものです。HTML／XMLの構造とほぼ同じく、ツリー（木）構造を取ります。
以下のように、html／head／body要素などを省略して記述したHTMLも、ブラウザに読み込まれた後は、html要素をルート（根）としたツリー構造に展開されます。これがDOMです。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>タイトル</title>
<header>
<h1>見出し</h1>
</header>
<div>
コンテンツ
</div>
<footer>
ここはフッター
</footer>
DOMの操作が容易になるということは、つまり「Webページの見た目を動的に変更するのが楽になる」ということです。jQueryが登場する前は、DOMを操作するコードを記述するのは非常に面倒で、そのためWebページの多くが静的でした。しかし、jQueryがDOM操作のハードルを大幅に下げてくれたおかげで、動的に変化するWebサイトを作成するのが一般的になりました。
また、jQueryはWebブラウザ間の差異を埋めるという役割も果たします。jQueryは、モダンブラウザだけでなく、古いブラウザ（例えば、Internet Explorer 6）でも動作するように設計されています。クロスブラウザで動作するUI処理を実現することができます。
つまり、jQueryを使用すれば、クロスブラウザで動作するインタラクティブなWebサイトを、初心者でも容易に作成できるというわけです。
