感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryの基礎と、animate()メソッドやon()メソッドの使い方

スポンサーリンク

jQueryって何?

jQueryというのは、オープンソースJavaScriptのライブラリのこと。
2006年にJohn Resig氏によって開発・発表された。

ライブラリというのは、よく使用する機能や効果を実現するプログラムをあらかじめ作成しておき、再利用できる形にまとめておいたもの。

ライブラリだけでは実現できない機能を実現するために、ライブラリに差しこむようにして使うのが「プラグイン」である。
ライブラリとプラグインは、ライブラリが主で、プラグインが従の関係となる。

jQueryはMITライセンスで提供されている。
MITライセンスというのは、誰でも無償かつ無制限にソフトウェアを扱って良いとするもので、オープンソースソフトウェアの代表的なライセンスの一つである。

jQueryを使ってスタイルを変更する

$('セレクタ').css('プロパティ', '値');

たとえば、超単純な以下のようなペラHTMLがあるとする。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SAMPLE</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery.1.10.2.min.js"></script>
<script src="./js/jquery-ui-1.10.3.min.js"></script>
<script src="./js/sample.js"></script>
</head>
<body>
<div id="container">
	<div id="head">
		<h2>ヘッダーです</h2>
	</div>
	<div id="content">
		<h1>コンテンツです。</h1>
	</div>
</div>
</body>
</html>

こいつのdiv id="content"の背景の色を変えたいときは、

$(function() {
	$('#content').css('background-color','#008B8B');
});

みたいに書けばいい。

これに加えて、タイミングをコントロールしたいときはどうするか?
タイミングをコントロールというのは、たとえばマウスを上にかざしたときに変化したり、ウインドウのサイズが変わったタイミングで処理が動いたり、ということ。
そういうタイミングをコントロールするjQueryのプログラムは以下のように書く。

$(function() {
	$('#content').on('mouseover', function() {
		$('#content').css('background-color','#008B8B');
		$('#head').css('background-color', 'Red');
	});
});

この

$('#content').on('mouseover', function() {
	//
}

のところの「.on」がポイント。
このon()メソッドは特定の出来事が起こるタイミングに実行し合い命令を設定するメソッドである。
特定の出来事は「イベント」といい、イベントの種類のことを「イベントタイプ」という。
実行したい命令んことを「イベントハンドラ」という。

イベントタイプの一覧はこんな感じ。

イベントタイプ タイミング
mouseover 要素にマウスが乗っかったとき
mouseout 要素からマウスが離れたとき
mousedown 要素上でクリックボタンを押したとき
mouseup 要素上でクリックボタンが離れたとき
mousemove 要素上でマウスが動かされた時
click 要素がクリックされた時
keydown 要素にフォーカスした状態でキーボードのキーが押されたとき
keyup キーが離れた時
focus フォーカスがあたった時
blur フォーカスが外れた時
change textなどの入力内容が変更された時
scroll 要素がスクロールされた時

ちなみに、マウスが要素の上に乗ったら背景を変化させて、マウスが要素から外れたら元に戻すには、以下のように書く。

$(function() {
	$('#content').on('mouseover', function() {
		$('#content').css('background-color','#008B8B');
		$('#head').css('background-color', 'Red');
	});
	$('#content').on('mouseout', function() {
		$('#content').css('background-color', '');
		$('#head').css('background-color', '');
	});
});

animate()メソッド

animate()メソッドは読んで字のごとく処理対象をアニメーション化するメソッドで、アニメーションの内容は引数に渡す。
animate()メソッドが実行されると、現在のCSSの状態から、1つめの引数に指定しているCSSの状態に向けて、2つめの引数に指定した時間をかけて、徐々にアニメーションしていく。
ちなみに3つめの引数には'linear'とか'swing'を指定できるが、linearは等速。swingは軽い緩急の意味。デフォルトではswingが適用される。

サンプルはこんな感じ。

$(function() {
	$('#content').on('click', function() {
		$('#content h1').animate({
			opacity: 0.3,
			fontSize: '1px'
		},2000, 'linear');
	});
});

「2000」は2000ミリ秒で、2秒のこと。
これを使うと、onClickつまり、クリックした時点でひゅーんと文字が縮んでいって、透明になってくる。

参考にした本

jQuery最高の教科書

jQuery最高の教科書

これはたしかに、初心者にとって「最高の」教科書になると思う。
なぜかというと、一つ一つの概念に対して「なぜ」が解説されているから。
面倒な言葉の定義も省略せずに、丁寧に丁寧に書かれている。
この本がもっと早く出てくれれば、自分の勉強はもっと楽だったのに、と思わずにはいられない。

まだ読んでる途中だが、中~上級者向けの続編を強く希望している。