Let's jQuery - ひとりでできるもん

先週土曜日に、WCAFのイベントでセッションを担当しました。

ターゲットはWebデザイナーとマークアップエンジニアなので、比較的簡単な内容です。

セッション内容をそのまま加筆して記事にすることにします。では、以下、その内容。

jQueryの流行

jQueryは2005年に登場後、瞬く間に広まった、JavaScriptライブラリの雄です。

ひとつ、統計情報を見つけたので紹介します。

403 - Forbidden: Access is denied.

この記事の上にある折れ線グラフをご覧ください。グラフにポイントし、右端に移動すると、緑色の線上に37.71%という吹き出しが表示されます。

このグラフはTop10,000サイト中、jQueryを採用しているサイトの割合を表していて、Top10,000サイト中、40%近くがjQueryを採用しているということになります。（統計結果が信用できるかどうかは定かではありませんが）

簡単に調べた限りでも、Twitter, Amazon, Wikipedia, W3C等、有名企業の多くが採用しています。

W3Cに関しては、DOMを設計したのはあなた方では！？というツッコミをしたくなるところです。

W3C: jQuery使ったら負けかなと思ってる。

ではないようです。

ということで、知らないでは済まされないフェーズに入りつつあるので、今日はjQueryの速習をしましょう。

jQueryの読み込み

jQueryは以下の2種類の方法で読み込むことができます。

CDN経由で読み込む
jQueryをダウンロードして読み込む

CDN経由で読み込む

jQueryの公式サイトに、jQueryをホスティングしているCDNの一覧が載っています。

jQueryのCDN: http://code.jquery.com/jquery-1.4.3.min.js
GoogleのCDN: http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
MicrosoftのCDN: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

以上のURLをscript要素のsrc属性で指定することで、jQueryが読み込めます。

jQueryをダウンロードして読み込む

jQueryの公式サイトから、Minified版を探し、jquery.jsという名前にリネームして、公開された任意のディレクトリに保存します。

このファイルをscript要素のsrc属性で指定することで、jQueryが読み込めます。

CDNと直接ダウンロードのどちらを使うべきか

Firebugなどで、読み込み速度を確認してどれにするか決定すべきですが、個人的にはGoogleのCDNを使うことをオススメしたいです。

一番、メジャーであるため、すでにGoogleのCDNを使っているサイトがたくさんあるかもしれません。GoogleのCDN経由でjQueryをダウンロードすると、1年間はキャッシュからjQueryを読み込むため、すでにそのようなサイトにアクセスしている人であれば、ブラウザがjQueryをダウンロードする必要がなくなります。

極端な話、jQueryを利用するすべてのサイト・サービスが、GoogleのCDNを使えば、ブラウザがjQueryをダウンロードする機会が圧倒的に少なくなるため、jQueryを利用するまでの時間が短縮できます。

CDNはGoogleのウェブ全体の高速化の一貫なので、協力してあげると幸せな結果が待ってるんじゃないかなと期待しています。（バージョン依存等で使えない場合は除く）

jQueryオブジェクト

jQueryは$にすべてのメソッドやプロパティが入っています。

$はjQueryの酸いも甘いも知っている究極逸品と言えるでしょう。

jQueryの書き方（超ざっくり）

ざっくりすぎて申し訳ないですが、以下のような書き方になるかなと思います。

$.メソッド名(引数);
$(セレクタ).メソッド名(引数);
$(セレクタ).イベント名(function() { /* このイベントの時に実行したいコードを記述 */});

ざっくりすぎますけどね。

サンプルコードを書きながらjQueryを学ぶ

では、サンプルコードを書きながらjQueryを学んでみましょう。最終成果物はおどろくほど、しょぼい*1ですが、順番に取り組むことで、基本的な書き方、ソースの見直しなどができるようになることを期待しています。

ex1. HTMLファイルを用意する

まずは、以下のようなHTMLファイルを用意しましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      // ここにjQueryのコードを書いていきます。
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

script要素でjQueryを読み込んでいます。また、その下のscript要素にjQueryのコードを書いていきます。

ex2. documentの読み込みが完了したら、コードを実行する

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        //実行したいコードをここに入力
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

head要素にコードを記述する際は、documentの読み込み完了を待たなければいけません。

$(document).ready(function{ ... });と記述することで、documentの読み込みが完了した直後、関数内の処理を実行することができるようになります。

なお、$(document).ready(function{ ... });は、$(function() { ... });という省略表記が使えるため、以下そのように記述していきます。

ex3. a要素の下線を消す

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').css('text-decoration', 'none');
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

まずは、a要素の下線を消してみます。

$('a')はdocument全体のa要素を指します。それに対して、cssメソッドでプロパティを適用します。

.css('text-decoration', 'none');はa要素のtext-decorationプロパティをnoneに設定するという意味になります。これで下線が消えます。

ex4. a要素にさらに複数のスタイルを設定する

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').css({
          'text-decoration': 'none',
          'color': 'black',
          'font-size': '20px'
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

複数のスタイルを設定する場合は、波括弧の中で、各プロパティをカンマで区切り、値を設定します。CSSっぽくて簡単ですね。

ex5. a要素にmouseoverした時、文字色を赤にする

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').css({
          'text-decoration': 'none',
          'color': 'black',
          'font-size': '20px'
        });
        $('a').mouseover(function() {
          $('a').css('color', 'red');
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

次にイベントを設定してみます。

$(セレクタ).イベント名(function() { ... });です。クリック時イベントなので、$('a').click(function() { ... });を使います。

functionの中で、a要素のcolorプロパティをredに変更しています。

ex6. a要素からmouseoutした時、文字色を黒にする

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').css({
          'text-decoration': 'none',
          'color': 'black',
          'font-size': '20px'
        });
        $('a').mouseover(function() {
          $('a').css('color', 'red');
        });
        $('a').mouseout(function() {
          $('a').css('color', 'black');
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

加えて、mouseoutの処理も追加します。イベント名が違うだけで、先程一緒です。

ex7. a要素全体にメソッドを適用するのではなく、対象になるa要素のみに適用する

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').css({
          'text-decoration': 'none',
          'color': 'black',
          'font-size': '20px'
        });
        $('a').mouseover(function() {
          $(this).css('color', 'red');
        });
        $('a').mouseout(function() {
          $(this).css('color', 'black');
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

先程は、mouseoverした時、mouseoutした時、共にa要素全体を対象としていました。

thisというキーワードは自分自身という意味です。$('a')という箇所を$(this)とすることによって、a要素全体ではなく、処理の対象になるa要素のみにメソッドを適用することができます。

ex8. メソッドチェーンを利用して、要素の検索を最小限に抑える

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').css({
          'text-decoration': 'none',
          'color': 'black',
          'font-size': '20px'
        }).mouseover(function() {
          $(this).css('color', 'red');
        }).mouseout(function() {
          $(this).css('color', 'black');
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

先程は、何かメソッドやイベントを設定するたびに、$('a')という記述をしていましたが、これは毎回documentの中からa要素を検索することになりあまり効率がよろしくありません。

そこで、メソッドをチェーンのようにつなげて書く、メソッドチェーンを利用してリファクタリングします。

メソッドの終端を;で終わらせず、そのまま次のメソッドをつなげます。そうすることで、次のメソッドにも最初に選択した$('a')が引継ぎメソッドを実行することができます。

メソッドチェーンはjQueryに用意された、効率が良くCoolな仕組みなので、是非活用してみてください。

ex9. CSSはJavaScriptで記述せず、CSSに書く

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <style>
      a {
        text-decoration: none;
        color: black;
        font-size: 20px;
      }
      .over {
        color: red;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').mouseover(function() {
          $(this).addClass('over');
        }).mouseout(function() {
          $(this).removeClass('over');
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://wcaf.jp">WCAF</a></li>
      <li><a href="http://jquery.com/">jQuery</a></li>
    </ol>
  </body>
</html>

今さらですが、a要素の初期スタイルをわざわざjQueryに書くのは非効率で意味がありません。あらかじめCSSに記述してしまいましょう。また、mouseover時、mouseout時のスタイルもclass名を利用してCSSに記述してしまいましょう。

ex10. 隠すをクリックするとa要素が隠れ、再表示をクリックするとa要素が表示される

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <style>
     a { text-decoration: none; color: black; font-size: 20px; }
      .over { color: red; }
      .showlink { color: #666; display: none; }
      .hidelink { margin-left: 10px; color: #666; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').mouseover(function() {
          $(this).addClass('over');
        }).mouseout(function() {
          $(this).removeClass('over');
        });

        $('.hidelink').click(function() {
          $(this).hide();
          $(this).prev().hide();
          $(this).prev().prev().show();
        });
        
        $('.showlink').click(function() {
          $(this).hide();
          $(this).next().show();
          $(this).next().next().show();
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><span class="showlink">再表示</span><a href="http://wcaf.jp">WCAF</a><span class="hidelink">隠す</span></li>
      <li><span class="showlink">再表示</span><a href="http://jquery.com/">jQuery</a><span class="hidelink">隠す</span></li>
    </ol>
  </body>
</html>

少し、HTMLの構成が変化したので確認しましょう。a要素の前後にspan要素が追加されています。

a要素の前には「再表示」という文字、a要素の後には「隠す」という文字があります。スタイルもあらかじめ設定しているので確認してください。再表示という文字は、最初、非表示になっています。

隠すをクリックした時の処理が$('.hidelink').click(function() { ... });の中にあります。

自分自身を隠して、前の要素（a要素）も隠します。さらに前の要素（再表示）は表示します。

同様に、$('.showlink').click(function() { ... });の中には、再表示をクリックした時の処理が書いてあります。

ex11. さらにリファクタリングして見栄えを整える

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Let’s jQuery</title>
    <style>
     a { text-decoration: none; color: black; font-size: 20px; }
      .over { color: red; }
      .showlink { color: #666; display: none; }
      .hidelink { margin-left: 10px; color: #666; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
      $(function() {
        $('a').mouseover(function() {
          $(this).addClass('over');
        }).mouseout(function() {
          $(this).removeClass('over');
        });

        $('.hidelink').click(function() {
          $(this).hide().prev().hide().prev().fadeIn();
          // 「再表示」をfadeInする
        }).mouseover(function() {
          $(this).css('cursor', 'pointer');
        });
        
        $('.showlink').click(function() {
          $(this).hide().next().fadeIn().next().fadeIn();
          // 「a要素」と「隠す」をfadeInする
        }).mouseover(function() {
          $(this).css('cursor', 'pointer');
        });
      });
    </script>
  </head>
  <body>
    <ol>
      <li><span class="showlink">再表示</span><a href="http://wcaf.jp">WCAF</a><span class="hidelink">隠す</span></li>
      <li><span class="showlink">再表示</span><a href="http://jquery.com/">jQuery</a><span class="hidelink">隠す</span></li>
    </ol>
  </body>
</html>

複数行に渡って書いていた隠す・再表示のクリック時の処理を、メソッドチェーンで書き直し、さらにmouseover時の処理を追加しています。

単純に表示するのではなく、fadeInのエフェクトを追加しました。

隠す・再表示の書くspanにidを指定して、それに対してメソッドを適用することもできますが、それが100個1000個ある場合は非常に手間になるので、prevやnextを使って相対的に書いた方が、最初はわかりにくくても結果的にコード量も少なくなり楽だと思います。

メソッドを検索する手引き

jQueryのメソッドはjQuery公式サイトのリファレンスか、以下のjQuery日本語リファレンスから探すのが良いと思います。

jQuery 日本語リファレンス

どちらのサイトも各メソッドをカテゴリごとに分けて掲載してくれています。

特に、デザイナー、マークアップエンジニアが利用する機会が多いカテゴリを紹介します。

Selectors: CSSのセレクタのように、要素集合を選択するためのメソッド群が掲載されています。
Attributes: HTMLの属性を操作するためのメソッド群が掲載されています。
Travering: next, prev, parent, childrenのように、要素間を行き来するためのメソッド群が掲載されています。
Manipulation: 要素の挿入、削除、置換など、要素を制御するためのメソッド群が掲載されています。
CSS: スタイルを制御するためのメソッド群が掲載されています。
Events: クリック、ダブルクリック、マウスオーバーのような、イベントのトリガーになるメソッド群が掲載されています。
Effects: fadeIn, slideDownのようなエフェクト効果のメソッド群が掲載されています。

jQueryの偉いところ

jQueryはプラグインで自身を拡張出来る設計にしたことが偉いと思います。

jQuery UIやjQTouchのような大きなプラグインから、ひとつの機能を実装するための小さなプラグインまで、たくさんのプラグインが第三者より提供されています。

jQuery公式サイトのプラグインリポジトリから検索したり、Colissのような定期的にプラグインの紹介をしているブログからプラグインの情報を得ると良いと思います。

jQueryの開発の際あるといいもの

Firebug、FireQueryをインストールすることをおすすめします。

また、jsdo.itというサイトで、jQueryを使ったコードを書く練習をしてみるのも良いと思います。

終わり

書くの疲れたorz...

今度ハンズオンセミナーをしたいなーという話をしました。もしそんなことを検討している人がいたら、呼んでください。

WCAFは新体制になって初めてのイベントをしたわけですが、概ね好評でよかったです。今後ももっと良いセッションができるように精進したいと思います。

あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。