• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/11/07

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

このエントリーをはてなブックマークに追加

121107 top
約半年前まで、興味はあれども全くもって触れたことのなかった「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を実行できるようになる、と言うわけです。

 

Skitched 20121106 213716
jQueryのロゴに記された、「write less, do more.」の言葉の通り、と言うわけですね:)

まぁ上記の説明もめんどくさい方は、「jQueryを使えばリッチなUIが簡単に実装できるからスゴイ」ぐらいに覚えておけばいいでしょう。うわぁざっくり。

 

準備

では早速jQueryを使うための準備と行きましょう。「準備」とは言えやることは至極簡単。

headタグ内にjQuery本体を読み込む

jQueryを使用したいページのheadタグ内に、jQueryを呼び込むためのタグを書きましょう。方法は主に2つ。

jQuery公式サイトからDL

まず一つ目はjQueryの公式サイトからライブラリをダウンロードする方法。

 

Skitched 20121106 214426
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の基本的な形

では、実際にコードを書いていくとしましょう:)
まずは基本的な形を頭に叩き込みます。

 

121107 01
↑これがjQueryの基本形。無論、全てがこの形ではないですし、細々した説明は色々とありますが全て放り投げておきます。(後ほど記します参考記事をご参照のこと)

まぁともかく、今回の講座では上の基本的な形の中に様々な命令を記述していくことになります。覚えちゃいましょう。

 

121107 02
では更に記述をしていきましょう。$(function(){の中に書いていくコードはこのような形となります。それぞれどういう意味かというと…

 

121107 03
ざっくりとこんな意味になります。Aを「セレクタ」と言い、Bを「メソッド」、Bの直後の括弧内を「パラメータ」と言います。パラメータは必ずしも必要なわけではなく、パラメータを用いないメソッドもあります。

「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。…ですがセレクタはCSSと同じような記述をするため、スタイルシートを扱えるのであれば比較的簡単に覚えることができます。
例えば

  • $(“#hoge”) – idセレクタ
  • $(“.hogehoge”) – クラスセレクタ
  • $(“li a”) – 子孫セレクタ
  • $(“p.hoge, p.hogehoge”) – グループセレクタ

こんな感じ。(セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲うのを忘れずに。)
他にも様々なセレクタがございますので以下を参照のこと。

Selectors – jQuery 日本語リファレンス

jQueryはこの「セレクタ」で指定した場所に、メソッドおよびパラメータで記述した命令が処理されていく、と言うのがおおまかな流れとなります。

 

では、具体例を一つ上げるとしましょう。

 

サンプル1

HTML

<div class="hoge1">
このテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキサスは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなります
</div>

CSS

.hoge1{
	color:#333;
}

上のようなコードがあったとします。ブラウザで表示すると…

 

Skitched 20121106 233232
こうなりますね。
では、この文字群をCSSを使うことなくjQueryで青色に変化させてみたいと思います:)

 

121107 04
コードはこのような形となります。先ほどの説明と照らすと…

 

121107 05
こういう感じ。つまり、「セレクタ(.hoge1)」のcssを「color:blue;」にしろ、と命令したことになります。
cssメソッドを用いる場合は、プロパティーと値(ここでは「color」 と 「blue」)をダブルクォーテーションで囲んで、カンマ「,」で区切ります。

これによって先ほどのテキストが…

 

Skitched 20121107 000322
見事、スタイルシートをいじることなく青色に変化しました:)
どうでしょう、なんとなく、理解していただけましたでしょうか?



 

「イベント」を使ってみる

さて、jQueryを扱う上でもう一つ欠かせない要素、それが「イベントメソッド」です。イベントとは、セレクタを「クリックした時」や「hoverした時」など、次に記述するメソッドを実行するきっかけを指示するためのもの。
…あぁ分かりにくいのでまたしても図解してみましょう。

 

121107 06
イベント系のメソッドを用いる時にはこのように記述します。(「B」がイベントですね)

イベントには「.click(セレクタをクリックした時に実行)」や「.mouseover(セレクタにマウスを当てた時に実行)」など様々なモノがございます。

jQuery Event メソッド

ここでは一例として「.click」を使ったjQueryの記述を見ていきましょう。

 

サンプル2A 「click」イベントメソッドで色を変えてみる

Skitched 20121107 002834

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」イベントメソッドを使用します。

 

Skitched 20121107 004638

HTML

		<div class="hoge2B">クリックの度に色が変わります</div>

CSS

	.hoge2B{
	background-color:#fff;
	(省略)
}

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 エフェクトメソッドを使ってみる

Skitched 20121107 010000

HTML

	<div class="hoge2C">クリックすると消えます</div>

サンプルは↑。cssは省略。どうせ隠れちゃうし。

ではこの「.hoge2C」を「クリックした時」に「隠す(hide)」するにはどういうコードを書けば良いでしょうか。ここまで記事を読んでくださっているなら…分かるはず:)
コードを見る前にちょっと考えてから下にスクロールしてみてくださいd(^_^o)

 

$(function(){
	$(".hoge2C").click(function(){
		$(this).hide()
	});
});

どうでしょう?正解が導き出せましたでしょうか?


 

サンプル2D

Skitched 20121107 011122

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を使ってみる

Skitched 20121107 013128

HTML

	<div class="hoge3A">ここにマウスオーバーすると右の■が赤くなります</div>
	<div class="red">&nbsp;</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("はなすと ('(゚∀゚∩ もどるよ!")
の部分。このように命令を繋げる場合には上のようにメソッドをドットで区切って続けて記述する事ができます。
これをメソッドチェーンと言いますので是非覚えておきましょう。
追記:メソッドチェーンの記述間違えておりましたので修正しましたm(_ _)m(修正前でも動くけど、メソッドチェーンになってなかたorz)


サンプル3B

Skitched 20121107 024520

	<div class="hoge3B">ここをクリックする度に右にある■が出たり消えたりします</div>
	<div class="hogehoge">&nbsp;</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の綴りすらかけなかった私ですら、こんな風にコードを書けるようになったわけで。
その楽しみを知っていただきたかったのです。そうなのです。

色々すっ飛ばし気味で説明不足の部分も多々ありますが、初心者の方に大事なのは実際に手を動かしてコードを書いて、ブラウザで要素が動いている様を見る楽しさなのではないかと…強く思っております:)

 

参考にさせていただいた記事・本

この講座を読んで「もっと詳しく勉強したい!」と思った方には以下の2記事が大変オススメですのでご参考にどうぞ

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

↑私がすっ飛ばしにすっ飛ばした部分を、事細かに説明してくださっているWebデザインレシピさんの記事。その内容は圧巻の一言です。今記事執筆にも大変参考にさせていただきました。是非ご一読を。

少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

↑数行のコードで実装できるjQueryの小ワザを説明とともに記してくださっているWebクリエイターボックスさんの記事。すぐに使えるコードがいっぱいつまってます!

↑jQueryを勉強するならば絶対に買って損の無い一冊。商用利用可能なサンプルコードが丁寧な解説とともに多数収められており、実用度120%。私も常に愛読しております:)

当ブログでのjQueryに関する記事

OZPAの表4内でのjQueryに関する記事をいくつかピックアップしてみました。今講座を理解していただいた方のちょうど良いステップかと思います。

ブログにあるととっても便利!「ページのトップに戻る」ボタンを実装してみた!!


[はじめてのjQuery] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた

最後に

本講座で使用したhtmlとcss、jsのコードをまとめてみましたので、是非持ち帰って勉強したいと言う方がいらっしゃいましたら↓からDLしてください。
jQuery本体がGoogle CDNを読み込んでいるので、ローカルで動かしたいと言う場合は各自jQueryのダウンロードページからどうぞ。

このエントリーをはてなブックマークに追加

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×