.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのdataの使い方を解説!dataメソッドは便利な機能をマスターしよう!

jQueryのdataの使い方を解説!dataメソッドは便利な機能をマスターしよう!

  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
jQueryのdataの使い方を解説!dataメソッドは便利な機能をマスターしよう!
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    dataメソッドについて教えてください。

    プロジェクト
    マネージャー
    このメソッドはHTML要素内に付与されたdata属性を取得したり変更ができる大変便利なメソッドです。

    jQueryのdataの使い方を解説

    jQueryのdataとは?


    jQueryは豊富な機能を持つJavaScriptのライブラリです。その機能の一つのdataメソッドは、HTMLのdata属性を取得することができます。この記事ではまずdata属性とは何かという所から解説するので、初心者の方は是非ご覧ください。

    なおこの記事のサンプルを利用する場合は、htmlのheadタグに以下を記述してください。以下が最新版のjQueryとは限りませんが、古くても動作はします。

    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

    HTMLのデータ属性とは

    jQueryのdataメソッドを解説する前に、HTMLのdata属性について確認しておきましょう。data属性とは以下のようにdataで始まる属性を意味します。

    <div data-type=”ラーメン店” data-address=”Tokyo” data-tel=”123-4567″>〇〇〇屋</div>

    data属性が追加される前はHTMLタグに情報を持たせる場合、class属性やid属性に持たせていましたが、それらは本来はそのような目的で使う属性ではありません。HTML5でdata属性が追加されることで、タグの属性に自由に情報を持たせることができるようになったのです。

    jQueryのdataのサンプル

    それでは上のタグのdata属性を、jQueryのdataメソッドで取得してみましょう。htmlのscriptタグ内に以下を記述してください。

    $(document).ready(function() {
    var data = $(‘div’).data();
    console.log(data);
    });

    documentや’div’はセレクタ、readyやdataはメソッドと呼びます。$(document).ready(function() {~});はページ全体が読み込まれたらreadyのfunction内の処理を行うという意味です。

    dataメソッドでdata属性の内容を取得

    上のjQueryはdataメソッドによりdivタグのdata属性の内容を取得して変数に入れています。それをconsole.logでログに表示しています。結果は以下のようになります。

    address: “Tokyo”
    tel: “123-4567”
    type: “ラーメン店”

    なおコンソールはGoogle Chromeの場合は、表示しているページでF12を押してDevToolsでConsoleのタブを選択することで見られます。

    data属性を1つだけ取得する

    上の例ではdata属性の全ての値を取得しましたが、特定のdata属性を1つ取得したい場合はどうしたらよいのでしょうか。その場合はjQueryを以下のようにします。

    $(document).ready(function() {
    var data = $(‘div’).data(‘type’);
    console.log(data);
    });

    これでdata-typeの値が取得できます。ログの結果は以下の通りです。

    ラーメン店

    dataメソッドはdata属性の追加も可能

    dataメソッドはdata属性の追加も可能です。jQueryを以下のようにすると、

    $(document).ready(function() {
    $(‘div’).data(‘teikyubi’,’Monday’);
    var data = $(‘div’).data(‘teikyubi’);
    console.log(data);
    });

    ログの結果は

    Monday

    となります。divタグにdata-teikyubi=”Monday”が追加されたということです。ただしブラウザでソースを見てもそれが追加されたことはわかりません。jQueryによる後からの変更はソース表示機能で見ることはできないのです。

    既にあるdata属性の変更も可能

    なお上の機能はdata属性の追加だけでなく変更も可能です。以下のようにすると、

    $(document).ready(function() {
    $(‘div’).data(‘address’,’Osaka’);
    var data = $(‘div’).data(‘address’);
    console.log(data);
    });

    ログの結果はOsakaになります。既にあったdata-address=”Tokyo”が変更されたということです。

    attrメソッドについて

    jQueryにはattrというdataに似たメソッドがあります。attrはattributeの略です。以下でattrメソッドによりdata属性を取得できます。

    $(document).ready(function() {
    var attr = $(‘div’).attr(‘data-type’);
    console.log(attr);
    });

    結果は「ラーメン屋」と表示されます。注意点はdataメソッドと違い、data-を省略できないことです。attrはdata属性専用のメソッドではないからです。

    dataとattrで注意する点

    dataとattrについて注意すべき点があります。以下を実行してみてください。

    $(document).ready(function() {
    $(‘div’).attr(‘data-menu1’, ‘とんこつ’);
    var data = $(‘div’).data(‘menu1’);
    console.log(data);
    $(‘div’).data(‘menu2’, ‘味噌バター’);
    var attr = $(‘div’).attr(‘data-menu2’);
    console.log(attr);
    });

    ログの出力結果は以下になります。

    とんこつ
    undefined

    attrとdataの併用は避けるべき

    attrメソッドで設定したdata属性はdataメソッドで取得できていますが、dataメソッドで設定したdata属性はattrメソッドで取得できていません。これはdataメソッドで設定した場合、jQuery内部だけでキャッシュされて、HTMLとしては存在していないからなのです。

    このような問題が生じるので、attrとdataを併用するのは避けるべきですね。attrはattrだけ、dataはdataだけで利用しましょう。

    $.data()とは?

    jQueryにはdataメソッドとは別に$.data()という機能があります。使い方は以下の通りです。

    $(document).ready(function() {
    var elem = $(‘p’)
    $.data( elem, ‘menu’, ‘塩味’ );
    var data = $.data( elem, ‘menu’);
    console.log(data);
    });

    elemにpタグ全体の要素を取得し、$.dataでelemにdata-menu=”塩味”を追加しています。それをまた$.dataで取得して、ログに出力しています。結果は「塩味」になります。

    $.data()のメリットとデメリット

    実は$.data()はdataメソッドと違い、HTMLで既にあるdata要素を取得することができません。なのでdataメソッドに比べてあまり使い道が無いように思えます。ただし$.data()はdataメソッドより処理速度がとても速いと言われています。

    もし高速化を要求する場面で$.data()を使う機会があれば、試してみるとよいでしょう。

    システム
    エンジニア
    dataメソッドを使うことで、独自の属性を付与することができるのですね。

    プロジェクト
    マネージャー
    大変便利なメソッドです。効率の良いプログラムが可能ですので、ぜひマスターしてください。

    jQueryのdataはHTMLにデータを持たせたい時に使える

    jQueryのdataメソッドについて解説しましたが、ご理解頂けましたでしょうか。HTMLにデータを持たせたい時にとても便利な機能と言えるでしょう。是非使い方をマスターして、高度なWebページを作成してください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job