【jQuery】属性・データ属性の取得と操作（attr・data）

こんにちは、かつコーチです。

「HTML要素のhref属性を書き換えたい」「data-idの値をJavaScriptで使いたい」。

こうした場面で必ず登場するのが、attr()とdata()というメソッドです。

この記事では、attr()での属性の取得・設定方法、data()でのデータ属性の扱い方、そして似ているprop()との違いについて、初心者向けに解説します。

読み終わる頃には、要素の属性まわりの操作に迷わなくなります。

attr()の基本の書き方

属性を取得する

属性とは、HTMLタグの中に書かれるhrefやsrc、classなどの情報のことです。

attr()を使うと、この属性の値を取得できます。

<a id="link" href="https://katsu-coach.com">かつコーチ</a>

const href = $('#link').attr('href');
console.log(href);
// https://katsu-coach.com

引数に属性名を文字列で渡すだけのシンプルな書き方です。

属性を設定する

属性を書き換えたい場合は、第2引数に値を渡します。

$('#link').attr('href', 'https://example.com');

複数の属性を一度に設定したい場合は、オブジェクト形式でまとめて渡すこともできます。

$('#link').attr({
  href: 'https://example.com',
  target: '_blank',
  title: '外部サイトへ移動します'
});

属性を削除する

不要になった属性を削除したいときは、removeAttr()を使います。

$('#link').removeAttr('target');

data()でデータ属性を扱う

data属性とは

data属性とは、data-から始まる独自の属性で、HTMLに任意の情報を持たせるために使われます。

<div id="user" data-user-id="123" data-role="admin">田中さん</div>

data()を使うと、data-以降の名前だけを指定して値を取得できます。

const userId = $('#user').data('userId');
console.log(userId);
// 123（数値として自動変換される）

ここで注意したいのが、属性名はハイフン区切り（data-user-id）だが、data()に渡す引数はキャメルケース（userId）になるという点です。

data属性を設定するときも同じ書き方です。

$('#user').data('role', 'member');

attr()とdata()の違い

data属性の値は、attr()でも取得できます。

$('#user').attr('data-user-id');
// "123"（文字列のまま）

ただし、attr()とdata()には明確な違いがあります。

	attr()	data()
値の型	常に文字列	数値や真偽値は自動で変換される
HTML上の見た目	変更するとHTMLに反映される	変更してもHTML上の表記は変わらない
データの保存場所	HTML要素の属性	jQuery内部のメモリ（キャッシュ）

data()で設定した値は、jQueryが内部的に保持しているだけで、実際のHTMLのdata-*属性は書き換わりません。

ブラウザの開発者ツールでHTMLを確認しても値が変わっていないので、最初は戸惑うかもしれません。

「HTMLにも反映させたい」という場合は、attr()を使う必要があります。

よくあるつまずきポイント・エラー対処

data()で設定した値がHTMLに反映されない

私が実際につまずいたのが、このデータの保存場所の違いです。

❌ Before（つまずいた書き方）

$('#user').data('userId', 456);

// HTMLを直接確認するために書いたコード
console.log($('#user')[0].outerHTML);
// <div id="user" data-user-id="123" data-role="admin">田中さん</div>
// data-user-idが123のまま変わっていない

「data()で456に更新したはずなのに、なぜHTMLは123のままなんだろう」と、しばらく原因が分からず悩みました。

原因を調べると、data()はHTML属性そのものを書き換えるのではなく、jQueryの内部データとして値を保持する仕組みだと分かりました。

✅ After（正しい書き方）

// jQuery内で使うだけならdata()のままでOK
console.log($('#user').data('userId'));
// 456（jQuery内では更新後の値が取れる）

// HTMLの見た目にも反映させたい場合はattr()を使う
$('#user').attr('data-user-id', 456);
console.log($('#user')[0].outerHTML);
// <div id="user" data-user-id="456" ...>

JavaScript側だけで値を使うならdata()、HTML側にも変更を残したいならattr()、と使い分けるのがポイントです。

存在しない属性を取得してundefinedになる

❌ Before（つまずいた書き方）

const target = $('#link').attr('target');
console.log(target + 'で開く');
// undefinedで開く

target属性を指定していない要素にattr()を使うと、undefinedが返ってきます。

このまま文字列結合すると、意図しない表示になってしまいます。

✅ After（正しい書き方）

const target = $('#link').attr('target') || '_self';
console.log(target + 'で開く');
// _selfで開く

|| '_self'のようにデフォルト値を用意しておくことで、属性が存在しない場合でも安全に扱えます。

応用・一歩先の使い方

prop()との違い

attr()と似たメソッドにprop()があります。

prop()は、チェックボックスのcheckedや入力欄のdisabledなど、現在の状態を扱うプロパティに使います。

// チェックボックスの状態を取得
const isChecked = $('#agree').prop('checked');

// チェックボックスをチェック状態にする
$('#agree').prop('checked', true);

checkedやdisabledのような真偽値の状態は、attr()ではなくprop()で扱うのが正しい書き方です。

古いjQuery（1.6未満）ではattr()で代用していた歴史がありますが、現在は非推奨とされています。

「初期状態のHTMLに書かれた属性を見たいならattr()」「今この瞬間の状態を見たいならprop()」と覚えておくと迷いにくくなります。

data属性をまとめて取得する

引数なしでdata()を呼び出すと、その要素が持つdata属性をすべてオブジェクトとして取得できます。

const allData = $('#user').data();
console.log(allData);
// { userId: 123, role: "admin" }

複数のdata属性をまとめて扱いたいときに便利な書き方です。

まとめ

この記事のポイント

• attr()はHTML属性を直接取得・設定・削除するメソッド
• data()はdata-属性を扱うメソッドで、キャメルケースで指定する
• data()で設定した値はjQuery内部の保持のみで、HTML表記には反映されない
• チェックボックスの状態など動的なプロパティにはprop()を使う

次に読むべき記事

• each()で要素をループ処理する
• CSSクラスの操作（addClass・removeClass・toggleClass）
• CSSプロパティを直接操作する方法（css()メソッド）

タグ: jQuery, 初心者向け, 基本文法