こんにちは、かつコーチです。
「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, 初心者向け, 基本文法