Dreamweaverを使ったjQuery入門
前編　～jQueryの概要とコーディングルール解説

原題：jQuery入門 with Dreamweaver CS5.5　前編

　人気と歴史のあるJavaScriptライブラリ「jQuery」。本連載では、前後編の2回に分け、jQueryの概要からコーディングルールなど、実際にサンプルアプリを作成しながら解説していきます。作成にはWebオーサリングツール「Dreamweaver」を使い、独自の開発支援機能も紹介します。なお、本稿はDreamweaver CS5.5向けに書かれておりますが、最新版のCS6でも問題無くお試しいただけます。

ADC（Adobe Developer Connection）

　この連載は、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 体験版をダウンロードできます。

• 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>

図1　DOMはツリー構造を取る（上のHTMLをChromeで表示し、開発者ツールでDOMを表示した結果）

　DOMの操作が容易になるということは、つまり「Webページの見た目を動的に変更するのが楽になる」ということです。jQueryが登場する前は、DOMを操作するコードを記述するのは非常に面倒で、そのためWebページの多くが静的でした。しかし、jQueryがDOM操作のハードルを大幅に下げてくれたおかげで、動的に変化するWebサイトを作成するのが一般的になりました。

　また、jQueryはWebブラウザ間の差異を埋めるという役割も果たします。jQueryは、モダンブラウザだけでなく、古いブラウザ（例えば、Internet Explorer 6）でも動作するように設計されています。クロスブラウザで動作するUI処理を実現することができます。

　つまり、jQueryを使用すれば、クロスブラウザで動作するインタラクティブなWebサイトを、初心者でも容易に作成できるというわけです。