jQueryの使い方を簡単に説明してみるなど

私が出入りしている某社のWebをメンテナンスしている部署の方々から「こういうのやりたいんだけど、出来る？」とコンテンツの開閉を見せられたりやら、「jQueryの本だけは買ってみたんだけど...」的な話をチラホラ聞かされたりなど、この手の事に興味を持ってもらえそうな感じだったので、5分程度でさらっとなぞれる解説を書いてみてました。 まあ僕も人に偉そうに言えるほど詳しい訳じゃないんですが...

ちなみにターゲットとしているのは、CSSすら若干怪しく、JavaScriptはDocument.writeでコンテンツを差し込む為のものだと半ば本気で思っている人たちです。そういう人向けに書いてます。

本当はもうちょっと社内の実例を出しながら書いてあったので流石にマズいので適当に変えて晒してみたいと思います。

---

jQueryとはなんぞや

jQueryとはプログラミング言語 JavaScript (Javaじゃないですよ、JavaScriptです。インドとインドネシアぐらい違いますから注意してください) の上で実行できる、JavaScriptの面倒事をすっきりまとめてくれるライブラリです。

JavaScriptというものは、実はページ上の要素をどうこうするのがもの凄く面倒です。文字を書き換えたり、ましてアニメーションをさせるなんて、なかなか面倒くさいのです。しかもブラウザ毎に挙動が違ったりしたりするので、IEだったりChromeだったりFirefoxだったりで本来動作を変えなくてはいけなかったりします。

jQueryはこういう面倒な事をサクっと済ませる事の出来るように助けてくれるライブラリなのです。

世間一般的に使われているjQueryにはバージョンは1.x系と2.x系があり、基本的に前者はIEも面倒見ている結果ちょっと遅く、2.x系は古いIEを切り捨てた結果最適化されているもの、と理解してください。（実際細かい差はありますが、その辺は別に後で全然OKです）

---

実際試してみましょうか

とあるページです。としたかったんですが、実例がある方が楽なので、こちらのサイトのお世話になってみましょう。

日本マイクロソフト

さて、Microsoftのサイトは真ん中のコンテンツの入ってるDIVに、pagebodyというクラスが付いてます。

このDIVタグ、みなさんならCSSでここにスタイルを与えたいときにCSSをどう書きますか？

.pagebody { /* --CSSプロパティ--*/ }

こう書くかと思います。 はい、実はここ大事なポイントでして、この{}の手前を、CSS用語で「セレクタ」と言います。これで、このIDのタグに対してスタイルが与えることができますね。これはもう業務でCSSを見ているのであれば、これが特定のIDであった場合や特定のタグでどう書けば良いか判る筈です。

#test-id { /**/ } 
.testClass a { /**/ }

こういった具合です。 実はこのセレクタがjQueryで非常に重要になってきます。

では早速jQueryの世界を試してみましょう。

まずはChromeで先ほどのURLをを開いてみましょう。そこでF12を押してください。Developer Toolsが表示されるかと思います。 この中からConsoleという項目を、このウィンドウの上のタブ群から選んでください。

これがJavaScriptコンソールです。JavaScriptのエラーや実行状況を見ることができます。そして一番下行の左端に青い＞が付いているところに、直接JavaScriptを入力出来ます。

試しに以下のコードをペーストして、Enterしてみてください。

alert("ダイアログボックスじゃけ")

おそらくダイアログボックスが出て、OKのボタンを押したら消えるはずです。実はこれも立派なJavaScriptです。JavaScriptプログラマデビュー、おめでとうございます。

ではjQueryは？いい調子です。試してみましょう。それでは、我らが愛すべきMicrosoftのトップページのコンテンツを闇に葬ってみましょう。

$(".pagebody").fadeOut()

これをコンソールにペーストして、Enterすると.....はい！キレイに消えましたね！

さてこのコード、よくよく見るとものすごく理解しやすいと思いませんか？ まずは$から始まる部分。この部分はjQueryのプログラムそのものを示しています。(例外もありますが、とりあえずその辺は割愛します。)　そしてその後のカッコの中のダブルクオーテション内に書かれているものが、まさにCSSのセレクタそのものです。そしてその後、ドットで区切られた後に実行する関数が書かれています。
関数：プログラミング用語です。機能、と読み替えて差し支えないです。

では今度はちょっとアレンジしてみましょう。 一度ページをリロードしてみて、今度は以下のようにしてまたコンソール内で実行してみてください。

$(".pagebody a").fadeOut()

今度は、このクラス配下にあるAタグのみに絞り込んでフェードアウトされました。 ほら、もう知ってるCSSの世界そのものです。

---

手軽に取り入れる方法

では今度は簡単に、ページを閉じたり開いたりするコードを書いてみましょう。

$("対象").slideToggle()

slideToggleは、ページをスライドして表示したり消したりする関数です。 コンソールで実行してみると、対象が消えたり開いたりする要素を確認できるかと思います。 ではボタンにJavaScriptのコードを書くにはどうしたらいいか？ 以下のようにします。

<a href="#" onclick='$("対象").slideToggle();return false;'>リンク</a>

これだけです。見慣れないReturn falseという表記は、onclickに直接書いた際に「その場所の本来の動作を行わせない」呪文だと思ってください。

(とりあえずは、ですよ。正確には違うので)

ここでこれを抜きにすると、アニメーションすると同時にページ最上部(リンク＃の場所)に移動してしまいます。

これで以下のようにかけることがわかると思います。

<div class="slideTarget">
    <!--内容など--> 
</div>
<a href="#" onclick='$(".slideTarget").slideToggle();return false;'>開けゴマ</a>

ほら、簡単でしょう？

---

さらに実践的に使う場合

たとえば以下のようなHTMLがあるとします。

<ul class="notes">
    <li>
        <div class="note">内容をここに</div>
        <div class="more">もっと見るを押したときの内容</div>
        <a href="#" class="handle">【もっと見る】</a>
    </li>
    <li>
        <div class="note">内容をここに</div>
        <div class="more">もっと見るを押したときの内容</div>
        <a href="#" class="handle">【もっと見る】</a>
    </li>
    <li>
        <div class="note">内容をここに</div>
        <div class="more">もっと見るを押したときの内容</div>
        <a href="#" class="handle">【もっと見る】</a>
    </li>
    <li>
        <div class="note">内容をここに</div>
        <div class="more">もっと見るを押したときの内容</div>
        <a href="#" class="handle">【もっと見る】</a>
    </li>
    <li>
        <div class="note">内容をここに</div>
        <div class="more">もっと見るを押したときの内容</div>
        <a href="#" class="handle">【もっと見る】</a>
    </li>
</ul>

こんなの一個一個Aタグに同じようなJavaScript打つの、非効率的ですよね？それに間違えそうですし、制御にしか使わないクラスを無駄に打つハメになります。 実はこういうことをするために、jQueryは一括でいろいろな設定をしてくれる方法があります。

難易度が変わってくるので、以下の2つの手法をご説明しましょう。

• Aタグすべてに、「クリックされたらその直前のタグを消したり出したりする」という動作をさせるように書き込む。

• LIタグごとにチェックし、まず消したりする場所を確認して、同じLIに入っているAタグに「その場所を消せ」という命令を書き込む

では1例目から。

<script>
//これはかなりスマートですね。たった4行です。しかし、a.handleの直前にdiv.moreがある前提なので、
//直前に別の要素があった場合はそちらが消えてしまいます。

$("ul.notes li a.handle").bind({"click":function(){
    $(this).prev().slideToggle();
    return false;
}});
</script>

続いて2例目

<script>
//そこでこちらのコードです。ちょっとだけ複雑化しますが、
//こちらはLIごとに中身をチェックし、その中でターゲットを定めた上で動作します。

$("ul.notes li").each(function(){ //each()を使うと、タグ毎にスクリプトを実行出来る

    //変数$moreに、現在見ているliタグの中に含まれる.moreを保存しておく。
    //こうすると。.moreに対する動作を$more.関数()に置き換える事が出来る

    var $more = $(this).find(".more");  

    //今のLIタグの中に含まれるAタグに、クリックしたときの動作を加える。
    $(this).find("a.handle").bind({"click":function(){

        //$moreをslideToggleして開閉できるようにする。
        $more.slideToggle();

        //return falseしないとページ遷移してしまう。
        return false;
    }});

});
</script>

といった具合です。 一見どちらもブラウザで動かすと同じ動作に見えますが、実はその実装方法はまったく考え方が異なるのです。

---

まとめ

jQueryは、 $("どいつに").なにをする(さらに詳しく)という形式だけでWebページ上の大部分の操作が可能になるライブラリです。CSSの知識、JavaScriptの知識、その両方が必要となりますが、ちょっとしたアニメーションなどはそんなに難しくなく行えます。ぜひ一度チャレンジしてみてください。

---

参考に

JavaScriptの基本文法とjQueryは以下で学べます。しかもタダです。かなりお勧めですので是非とも。各動画3分です。私も他のプログラミング言語ですが、割とここで勉強してます。

• JavaScript - ドットインストール
• jQuery - ドットインストール

定番のオライリー出版のJavaScript入門編。ちょっと古いですが、これがなんだかんだで一番理解しやすかった気がします。

• 初めてのJavaScript

こちらは長い間更新がとまっているのですが、jQueryで何ができるのか？ということが一番わかりやすく説明されているサイトな気がします。"なにをする"の部分を知るには一番いいかもしれません。

• jQuery日本語リファレンス