デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

jQueryのメリット

ソースコードを短く記述できる

write less, do more.最初のメリットはjQueryのロゴ(左図)の副題「write less, do more」にあるように「より少ない記述で、より多くの処理」でしょう、例えばid属性がtestの要素に「hello world!」と表示するjavaScriptは以下の様になります。

document.getElementById("test").innerHTML = "hello world!";

しかしjQueryを利用すれば、以下の様に記述できます。$("#test")の部分がdocument .getElementById ("test")に相当し、text("hello world!")の部分がinnerHTML = "hello world!"に相当します。

$("#test").text("hello world!");

上記のようにシンプルなサンプルでは差が少ないのですが、複雑なサンプルになればなるほど差が出てきます。例えば特定の要素に外部から読み込んだテキストデータを表示するためには10行ほどコードを書かなければなりません。→参考:おしえてgoo「.txtファイルの読み込み」

しかしjQueryを利用すれば、以下の様に1行で済みます。ブラウザ上で確認できるサンプルはリファレンスのloadメソッドのページにあります。→参考:リファレンス「loadメソッド」

$("#test").load("simple.txt");

ブラウザ間の差異を吸収

javaScriptはブラウザによって利用できるメソッドやプロパティが異なり、クロスブラウザなコンテンツを実現するのが面倒です。しかしjQueryでは簡単にクロスブラウザなコンテンツを実現できます(個人的には「write less, do more」よりも嬉しいメリットです)。

例えば、要素の透明度を変更するのはopacityプロパティを利用して、以下の様に記述します。

document.getElementById("test").style.opacity = 0.5;

しかしIEはopacityが利用できないため、filterプロパティを利用して以下の様に記述しなければなりません。

document.getElementById("test").filter = "alpha(opacity=50)";

ブラウザによって処理を振り分けるのは手間が掛かり、ソースコードも読みにくいものになってしまいます。しかしjQuery(以下)を利用すれば、IEもそれ以外のブラウザも同じように機能させることができます。

$("#test").fadeTo(0, 0.5);

さらにv1.8からは、ベンダープレフィックスも自動で補完してくれるようになりました。
→参考:本家サイト(「Automatic CSS prefixing」の項目を確認してください)

デザイナーにも利用しやすい

上記2項目もデザイナーにとっては非常に嬉しいメリットですが、さらにcssとの共通性もデザイナーやコーダーの方にメリットとなります。

それはjQueryはインタラクションの対象としてcssが利用できるからです。例えば最初に紹介した以下のjQueryのサンプルですが、対象を指定する「#test」はcssと共通で、id属性がtestの要素という意味になります。

$("#test").text("hello world!");

またjQueryのセレクタはcss3のセレクタと共通のものも多く、css3の予行練習としても役立つのではないでしょうか?→参考:W3Cのcss3セレクタの紹介jQueryのセレクタの紹介

さらに「スライドショー」や「タブメニュー」など、従来はjavaScriptプログラマーに頼まなければならないような処理でも、デザイナーが作成できる点などもデザイナーにとっては嬉しいでしょう。
「サンプル」のページでタブメニュー、「プラグインのページ」でスライダー(Nivo Slider)を紹介しています。

jQueryをHTMLに組み込む

本格的な説明は次のページから始めるのですが、ここでjQueryの組み込みだけ策に説明しておきます。とはいえhtmlへの組み込み方は他の外部jsファイルと同じで、以下の様にhead領域にscriptタグを書くだけです。
※src属性のパスは必要に応じて変更して下さい。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

では実際に組み込んだサンプルを確認します。サンプル(merit/01.html)を開いてソースを確認し、head領域に上記のようなscriptタグが設定されていることを確認してくださいscr属性のパスだけが異なります

今回はここで終了です。次は、ほとんどのjQueryコンテンツで必要になるreadyイベントについて説明します。