Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

JavaScriptとHTMLを明確に分離するには?(data)

2015年10月8日

jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。

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

 jQueryに限らず、JavaScriptでアプリを開発する際には、マークアップとJavaScriptのコードを明確に分離するのが、まずは基本です。マークアップの中にコードが散在するようなアプリは見通しも悪く、結果として、潜在的なバグの原因にもなるためです。コード部分は明確に.jsファイルに追い出し、マークアップ側にはコードを制御するためのパラメーターや文字列情報だけを残します。このような手法、考え方のことを「控えめなJavaScript」(Unobtrusive JavaScript)と言います。

 以下では「控えめなJavaScript」の例として、マウスホバー時に画像が入れ替わるサンプルを見てみます。

HTML
<!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>
JavaScript
$(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'));
      }
    );
});
マウスホバー時に画像が入れ替わるコード(上:hover.html/下:hover.js)
[ツール・ダウンロード]画像の上にマウスを乗せると……

[ツール・ダウンロード]画像の上にマウスを乗せると……

マウスホバーで別画像に差し替え
マウスホバーで別画像に差し替え

 「控えめなJavaScript」では、まず、JavaScriptで利用するパラメーター情報をマークアップ側でdata-xxxxx属性として準備しておくのが基本です(1)。data-xxxxx属性は独自データ属性とも呼ばれ、(jQueryに限らず)スクリプトで利用するアプリ固有のパラメーター情報を表すのが目的です。独自データ属性data-xxxxxの「xxxxx」の部分は、小文字のアルファベット、ハイフン、アンダースコアなどの文字を利用できます。

 この例では、独自データ属性として、data-hover-src属性を準備して、マウスホバー時に表示する画像を定義しています。

 パラメーター情報を準備できたら、あとは2のように独自データ属性の有無によって要素を絞り込み、ホバー時の処理を実装するだけです。ここでは、data-hover-src属性を持つ<img>要素に対してmouseentermouseleaveイベントリスナー*1を設定し、画像を入れ替えています。

 独自データ属性を取得するのは、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]を参照してください。

jQuery逆引きリファレンス
27. アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)

各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。

jQuery逆引きリファレンス
28. 要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)

focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。

jQuery逆引きリファレンス
29. 【現在、表示中】≫ JavaScriptとHTMLを明確に分離するには?(data)

jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。

jQuery逆引きリファレンス
30. 特定の要素に関連付くデータを取得/設定するには?(data)

現在の要素に対して任意のデータを設定/取得するためのdataメソッドの基本と、利用上の注意点を解説する。

jQuery逆引きリファレンス
31. jQueryプラグインを自作するには?($.fn)

何度も利用する似たコードは、ライブラリではなくプラグインにまとめよう。プラグイン作成の基本を解説。

サイトからのお知らせ

Twitterでつぶやこう!