jQuery逆引きリファレンス
JavaScriptとHTMLを明確に分離するには？（data）
jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。
jQueryに限らず、JavaScriptでアプリを開発する際には、マークアップとJavaScriptのコードを明確に分離するのが、まずは基本です。マークアップの中にコードが散在するようなアプリは見通しも悪く、結果として、潜在的なバグの原因にもなるためです。コード部分は明確に.jsファイルに追い出し、マークアップ側にはコードを制御するためのパラメーターや文字列情報だけを残します。このような手法、考え方のことを「控えめなJavaScript」（Unobtrusive JavaScript）と言います。
以下では「控えめなJavaScript」の例として、マウスホバー時に画像が入れ替わるサンプルを見てみます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<!--1パラメーター情報をdata-xxxxx属性で準備-->
<img src="tutorial_s.png" data-hover-src="tutorial_b.png" /><br />
<img src="tool_s.png" data-hover-src="tool_b.png" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="hover.js"></script>
</body>
</html>
|
|
$(function() {
// 2data-hover-src属性を持つ<img>要素を...
$('img[data-hover-src]')
// マウスホバー時にdata-hover-src属性の値でsrc属性を置き換え
.hover(
function() {
// 4src属性の値を内部データsrcに退避
$(this).data('src', $(this).attr('src'));
// 3data-hover-src属性の値をsrc属性に詰め替え
$(this).attr('src', $(this).data('hover-src'));
},
function() {
// 退避しておいた内部データsrcをsrc属性に書き戻し
$(this).attr('src', $(this).data('src'));
}
);
});
|
［ツール・ダウンロード］画像の上にマウスを乗せると……
「控えめなJavaScript」では、まず、JavaScriptで利用するパラメーター情報をマークアップ側でdata-xxxxx属性として準備しておくのが基本です（1）。data-xxxxx属性は独自データ属性とも呼ばれ、（jQueryに限らず）スクリプトで利用するアプリ固有のパラメーター情報を表すのが目的です。独自データ属性data-xxxxxの「xxxxx」の部分は、小文字のアルファベット、ハイフン、アンダースコアなどの文字を利用できます。
この例では、独自データ属性として、data-hover-src属性を準備して、マウスホバー時に表示する画像を定義しています。
パラメーター情報を準備できたら、あとは2のように独自データ属性の有無によって要素を絞り込み、ホバー時の処理を実装するだけです。ここでは、data-hover-src属性を持つ<img>要素に対してmouseenter／mouseleaveイベントリスナー*1を設定し、画像を入れ替えています。
- *1
mouseenter／mouseleaveイベントリスナーをまとめて設定するのはhoverメソッドの役割です。詳しくは別稿「TIPS：マウスポインターが要素に出入りした時の処理を実装するには？」を参照してください。
独自データ属性を取得するのは、dataメソッドの役割です*2。
- *2 厳密には、
dataメソッドは要素にひも付いた内部データを取得します。詳細は後日別稿「TIPS：特定の要素に関連付くデータを取得／設定するには？」で解説の予定です。
［構文］dataメソッド（取得）
data(name)
- name： パラメーター名
引数nameには、data-xxxxx属性の「xxxxx」の部分だけを指定してください。3では、data-hover-src属性の値をattrメソッドでsrc属性に詰め替えています。
また、dataメソッドを利用することで、現在の要素にひも付く内部データを設定することもできます。例えば4では、最初に設定されたsrc属性の値を、同名の内部データsrcに退避させています。これによって、マウスが画像から外れた（mouseleave）タイミングで、元の画像に戻せるというわけです。
［構文］dataメソッド（設定）
data(name, value)
- name： パラメーター名
- value： 値
処理対象：控えめなJavaScript カテゴリ：コア
API：.data() カテゴリ：データ（Data） ｜ その他（Miscellaneous） > データストレージ（Data Storage）
※以下では、本稿の前後を合わせて5回分（第27回～第31回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
27. アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）
各種アニメーションメソッドで、アニメーションを直列／並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
28. 要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。
29. 【現在、表示中】≫ JavaScriptとHTMLを明確に分離するには？（data）
jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。
