約１年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。
結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。
そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。
とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない）
あくまで「jQueryに興味はあるけれど全く触れたことは無いしjavascriptも全くわからないしなんか難しそうだし」と敬遠している方に向けたモノになります:)
まぁともあれ、そんな私のような方々のお力に少しでもなれればこれ幸いです。
jQueryの概要
まずはざっくりと概要からいきませう。
jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。様々な場面で活用されており、Javascriptライブラリのデファクトスタンダードと呼ぶ者もいる。
via: jQuery – Wikipedia
なるほど…デファクトスタンダー全く分からん。
まぁ小難しい単語は置いておきまして簡単に説明しますと、jQueryとはJavascriptのライブラリ（複数のプログラムを再利用可能な形でひとまとまりに簡素化したもの）のひとつ。
これを使用すれば、複雑になりがちなJavascriptのコードを書くこと無しに、簡単なコードでJavascriptを実行できるようになる、と言うわけです。
jQueryのロゴに記された、「write less, do more.」の言葉の通り、と言うわけですね:)
まぁ上記の説明もめんどくさい方は、「jQueryを使えばリッチなUIが簡単に実装できるからスゴイ」ぐらいに覚えておけばいいでしょう。うわぁざっくり。
準備
では早速jQueryを使うための準備と行きましょう。「準備」とは言えやることは至極簡単。
headタグ内にjQuery本体を読み込む
jQueryを使用したいページのheadタグ内に、jQueryを呼び込むためのタグを書きましょう。方法は主に2つ。
jQuery公式サイトからDL
まず一つ目はjQueryの公式サイトからライブラリをダウンロードする方法。
jQueryのダウンロードページへ行き、Downloadsからライブラリを落とします。特別な理由がない限り、最新版ライブラリの「Minified（圧縮版）」をDLすれば良いでしょう。
DLしたjQuery本体をサーバー内の適当な場所にアップロードしたら、headタグ内に以下のように記述すればOK。
<head> （中略） <script type="text/javascript" src="ライブラリをアップロードした場所/jquery-1.8.2.min.js"></script> （中略） </head>
ﾜｰｵ、簡単ですね。
CDN を利用する
更に簡単なのがこちらの方法。
<head> （中略） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> （中略） </head>
↑このように記すだけ。ﾜｰｵ、簡単ですね。細かい説明は割愛だ！
本体のDLの必要がありませんこちらの方法。それだけに実装は簡単ですが、ネット環境のある場所でないとjQueryが動きませんので注意してください。
実際にjQueryを書いてみよう
さて、これにて準備は整いました。実際にjQueryを書いてみて基本的なことを覚えていきませう。
コードを書く場所
jQueryのコードは、headタグ内、jQuery本体のコードの後に記しましょう。コードはheadタグ内に直接書いても良いですが、コードの煩雑化を防ぐために外部ファイルから読み込む方法をとるのがベターでしょうか。
[Web初心者のための備忘録]煩雑なソースコードを避けるためにJavaScriptを外部ファイルから読み込む
また、CSSを外部読み込みにしている場合は（まぁこれがほとんどでしょうが）、コードはCSS読み込みタグの後に配置すること。これはjQueryに限ったことではないですが、JavascriptはCSSの様に同時に読み込んではくれず、それぞれに処理の時間がかかります。
HTMLは上から記述してあるものを順番に読み込んでいくため、途中で読み込みの時間がかかるような事があるとページの表示速度に影響を及ぼしてしまうのです。
<head> （中略） <link rel="stylesheet" href="style.css" /> <script type="text/javascript" src="ライブラリをアップロードした場所/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="script.js"></script> </head>
と、言うわけでこんな感じ。
jQueryの基本的な形
では、実際にコードを書いていくとしましょう:)
まずは基本的な形を頭に叩き込みます。
↑これがjQueryの基本形。無論、全てがこの形ではないですし、細々した説明は色々とありますが全て放り投げておきます。
まぁともかく、今回の講座では上の基本的な形の中に様々な命令を記述していくことになります。覚えちゃいましょう。
では更に記述をしていきましょう。$(function(){の中に書いていくコードはこのような形となります。それぞれどういう意味かというと…
ざっくりとこんな意味になります。Aを「セレクタ」と言い、Bを「メソッド」、Bの直後の括弧内を「パラメータ」と言います。パラメータは必ずしも必要なわけではなく、パラメータを用いないメソッドもあります。
「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。…ですがセレクタはCSSと同じような記述をするため、スタイルシートを扱えるのであれば比較的簡単に覚えることができます。
例えば
- $(“#hoge”) – idセレクタ
- $(“.hogehoge”) – クラスセレクタ
- $(“li a”) – 子孫セレクタ
- $(“p.hoge, p.hogehoge”) – グループセレクタ
こんな感じ。（セレクタは「“」（ダブルクォーテーション）、もしくは「’」（シングルクォーテーション）で囲うのを忘れずに。）
他にも様々なセレクタがございますので以下を参照のこと。
jQueryはこの「セレクタ」で指定した場所に、メソッドおよびパラメータで記述した命令が処理されていく、と言うのがおおまかな流れとなります。
では、具体例を一つ上げるとしましょう。
サンプル1
HTML
<div class="hoge1"> このテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキサスは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなります </div>
CSS
.hoge1{
color:#333;
}
上のようなコードがあったとします。ブラウザで表示すると…
こうなりますね。
では、この文字群をCSSを使うことなくjQueryで青色に変化させてみたいと思います:)
コードはこのような形となります。先ほどの説明と照らすと…
こういう感じ。つまり、「セレクタ（.hoge1）」のcssを「color:blue;」にしろ、と命令したことになります。
cssメソッドを用いる場合は、プロパティーと値（ここでは「color」 と 「blue」）をダブルクォーテーションで囲んで、カンマ「,」で区切ります。
これによって先ほどのテキストが…
見事、スタイルシートをいじることなく青色に変化しました:)
どうでしょう、なんとなく、理解していただけましたでしょうか？
「イベント」を使ってみる
さて、jQueryを扱う上でもう一つ欠かせない要素、それが「イベントメソッド」です。イベントとは、セレクタを「クリックした時」や「hoverした時」など、次に記述するメソッドを実行するきっかけを指示するためのもの。
…あぁ分かりにくいのでまたしても図解してみましょう。
イベント系のメソッドを用いる時にはこのように記述します。（「B」がイベントですね）
イベントには「.click（セレクタをクリックした時に実行）」や「.mouseover（セレクタにマウスを当てた時に実行）」など様々なモノがございます。
ここでは一例として「.click」を使ったjQueryの記述を見ていきましょう。
サンプル2A 「click」イベントメソッドで色を変えてみる
HTML
<div class="hoge2A">クリックすると緑色になります</div>
CSS
.hoge2A{
background-color:#fff;
（省略）
}
サンプルとしてこんなものを用意しました。
では、「div .hoge2A」を「クリックした時」に「同じ要素」の「background-color」を緑色にするためにはどのようなjQueryコードを書けば良いでしょうか？答えは…
//サンプル2A
$(function(){
$(".hoge2A").click(function(){
$(this).css("background-color","green")
});
});
↑こうなります:)
ここで覚えておくのが
$(this)
という書き方。これは、イベント時に同じセレクタを使用しますよ、と言う意味になります（ここでは「.hoge2A」ですね）。
上のコードを一行ずつばらしてみると
$(".hoge2A").click(function(){
→「.hoge2A」をクリックした時に
$(this).css("background-color","green")
→「これ（.hoge2A）」の「cssのbackground-colorをgreenにしますよ」という事になります。
サンプル2B toggleメソッドを使ってみる
さて、上の記述では一度クリックした要素はグリーンのまま、変化することがありません。では、クリックの度に色を変化させたい！という時にはどのように記述すればよいでせうか。
そんな時には「.toggle」イベントメソッドを使用します。
HTML
クリックの度に色が変わります
CSS
.hoge2B{<br /> background-color:#fff;<br /> （省略）<br />}
toggleイベントを使用する際は、クリックの度に入れ替わる挙動を「,（コンマ）」で区切り、
function(){
でつなげていきます。
//サンプル2B
$(function(){
$(".hoge2B").toggle(function(){
$(this).css("background-color","green")
},function(){
$(this).css("background-color","yellow")
},function(){
$(this).css("background-color","red")
},function(){
$(this).css("background-color","orange")
});
});
これで、クリックする度に「緑→黄色→赤→オレンジ→緑…」と色が変化するようになりました:)
エフェクトメソッド
イベントメソッドとよく一緒に用いられるのが「エフェクトメソッド」
その名の通り、要素に様々なエフェクトをかけてくれるメソッドです。ここでは要素を隠してくれる「hide」メソッドなどを見ていきましょう。
サンプル2C エフェクトメソッドを使ってみる
HTML
クリックすると消えます
サンプルは↑。cssは省略。どうせ隠れちゃうし。
ではこの「.hoge2C」を「クリックした時」に「隠す（hide）」するにはどういうコードを書けば良いでしょうか。ここまで記事を読んでくださっているなら…分かるはず:)
コードを見る前にちょっと考えてから下にスクロールしてみてくださいd(^_^o)
$(function(){
$(".hoge2C").click(function(){
$(this).hide()
});
});
どうでしょう？正解が導き出せましたでしょうか？
サンプル2D
HTML
<div class="hoge2D">クリックするとフェードアウト</div>
サンプル2Cで書いたコードですが、
「.hide()」
を
「.fadeOut()」
というエフェクトメソッドに変更すると、更にリッチな表現が出来るようになります。.fadeOut()は、要素をゆっくりフェードアウトしてくれるメソッドです。
コードはこんな感じになります。
//サンプル2D
$(function(){
$(".hoge2D").click(function(){
$(this).fadeOut(2000)
});
});
.fadeOut()
の括弧内には、要素がどれくらいでフェードアウトするのかを記述することができます。
ここでは2000（単位はミリ秒＝1/1000秒）という数値を入れましたので、
.hoge2D
をクリックすると2秒かけて要素がフェードアウトする、と言うことになります。括弧内に数値を入力する時にはダブルクォテーションは必要ありませんので覚えておきましょう！
他の要素を変化させる
さぁ、いよいよ講座も終盤です。もう一息がんばりましょう！俺！
今度は、イベントの起因となったセレクタ以外のセレクタを変化させてみましょう。
サンプル3A hoverを使ってみる
HTML
<div class="hoge3A">ここにマウスオーバーすると右の■が赤くなります</div> <div class="red"> </div>
CSS
.hoge3A{
float:left;
width:470px;
}
.red{
float:right;
width:250px;
height:100px;
background:#FC9;
display:table-cell;
vertical-align:middle;
color:#FFF;
}
（CSSは関係のない部分を削ってます）
「.hoge3A」を「mouseover（マウスオーバーさせた時）」に「.red」の色を赤くさせる、そんなjQueryのコードを書くと以下のようになります。
//サンプル3A'
$(function(){
$(".hoge3A").mouseover(function(){
$(".red").css("background","red"),
});
});
thisを使用していた時と考え方は一緒ですね。mouseoverの後に来るセレクタに「.red」を指定してあげれば良いわけです。
ここでちょっとアレンジを加えてみます。上のコードですと一度マウスオーバーしてしまうと色が赤のままですので、マウスアウトした際には色が戻るような記述を加えてみます。
こんな時に便利なのが「.hover()」というイベントメソッド。toggleメソッドと同じような書き方で、マウスオーバー時の挙動とマウスアウト時の挙動をまとめて記述することができます。
//サンプル3A
$(function(){
$(".hoge3A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
},
//マウスアウト時の処理
function(){
$(".red").css("background","#FC9")
});
});
コードはこうなりますね！
メソッドチェーン
更にアレンジ。マウスオーバーした時に「はなすと (‘(ﾟ∀ﾟ∩ もどるよ！」と言うテキストを入れてあげることにします。要素内のテキストを置き換えるには
.text()
というメソッドを使用します。
//サンプル3A
$(function(){
$(".hoge3A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
.text("はなすと ('(ﾟ∀ﾟ∩ もどるよ！")
},
//マウスアウト時の処理
function(){
$(".red").css("background","#FC9")
.text("")
});
});
ここで注目していただきたいのが
$(".red").css("background","red").text("はなすと ('(ﾟ∀ﾟ∩ もどるよ！")
の部分。このように命令を繋げる場合には上のようにメソッドをドットで区切って続けて記述する事ができます。
これをメソッドチェーンと言いますので是非覚えておきましょう。
サンプル3B
<div class="hoge3B">ここをクリックする度に右にある■が出たり消えたりします</div> <div class="hogehoge"> </div>
.hoge3B{
float:left;
width:470px;
}
.hogehoge{
float:right;
width:250px;
height:100px;
background:#4798bd;
display:table-cell;
vertical-align:middle;
color:#FFF;
}
さぁいよいよ最後のサンプルです！
今までの知識を総動員して、「.hoge3B」をクリックする度（toggle）に「.hogehoge」が「スライドアップ（slideUp＝要素がスライドしながら消える）」と「スライドダウン（slideDown＝要素がスライドしながら現れる）」を繰り返すようなコードを書いてみましょう！
講座の復習をしたい！と言う人は是非挑戦してみてください:)
//サンプル3B
$(function(){
$(".hoge3B").toggle(function(){
$(".hogehoge").slideUp()
},function(){
$(".hogehoge").slideDown()
});
});
答えはこちら！どうです？おわかりになりましたか？
.slideUp("slow")
と
.slideDown("fast")
と言うように、速度に強弱もつけられます。
と、言うわけでいかがでしたでしょうか、「jQueryが全く分からない人のため」の超初級者向け入門講座でした。
まぁ正直なところを言えば私、人に教えられるほどまだまだjQueryを修めていないというのが事実なのですが、それでもこんなに長々と書いたのは「jQueryってなんだか難しそう…」と思っている方に、jQueryに触れていただきたかったのです。もっと言えば、約１年前の自分自身に向けた記事ともいえます。
実際にコードを書いてみてそれが動いた時の感動はなんとも言い表せないものがありますし、Javascriptの綴りすらかけなかった私ですら、こんな風にコードを書けるようになったわけで。
その楽しみを知っていただきたかったのです。そうなのです。
色々すっ飛ばし気味で説明不足の部分も多々ありますが、初心者の方に大事なのは実際に手を動かしてコードを書いて、ブラウザで要素が動いている様を見る楽しさなのではないかと…強く思っております:)