この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: 値の取得
SEOタイトル: jQuery 値の取得｜.text() / .html() / .val() / .attr() / .data() の違いと使い分け

この記事の要点
  • jQuery で要素の値を取得する API は対象によって使い分ける: テキストは .text()、HTML は .html()、フォーム値は .val()、属性は .attr()、data 属性は .data()
  • .text() は子要素のタグを除去して中身のテキストだけを連結して返す
  • .val() は input / select / textarea 専用。div に使うと undefined が返る
  • jQuery オブジェクトの取得結果は最初の要素のみを返す（複数要素にマッチしても 1 つ目だけ）

はじめに

本稿では jQuery で要素の値を取得するメソッドを、用途別に整理します。どれも頻出 API ですが、「テキストが取れない」「フォーム値が undefined になる」といったハマりどころは、メソッドの選び間違いが原因であることが大半です。

取得メソッド早見表

メソッド取得対象主な用途
.text()子要素も含むテキストdiv / p / span など
.html()innerHTML（タグ含む）HTML 構造を丸ごと取り出す
.val()フォーム要素の valueinput / select / textarea
.attr(name)HTML 属性href / src / id など
.prop(name)DOM プロパティchecked / disabled など真偽値
.data(key)data-* 属性カスタムデータの取り出し
.css(name)計算済み CSS適用後のスタイル値

.text() でテキストを取得

最も基本的なテキスト取得。HTML タグは除去され、子要素のテキストも連結されます。

// HTML
// 
val1


var item1 = $('#item1').text();
console.log(item1); // "val1"

子要素を持つ場合の挙動も押さえておきましょう。

// HTML
// 

//   Hello World!
// 


console.log($('#box').text());
// "Hello World!"  ←  タグは消えて中身だけ連結される

.html() で innerHTML を取得

タグごと取り出したいときは .html() を使います。Ajax で取得したテンプレートを別要素に挿入し直す、といった用途で頻出です。

// HTML
// 
Hello World!


console.log($('#box').html());
// "Hello World!"

.val() でフォーム値を取得

テキスト入力欄やセレクトボックスの値を取得するには .val() を使います。これは input / select / textarea 専用で、div や span に使っても undefined が返ります。

// HTML
// 
// 

console.log($('#name').val()); // "taro"
console.log($('#lang').val()); // "en"

// チェックボックスのチェック有無は .prop() で
// 
console.log($('#agree').prop('checked')); // true

「テキスト」は .text()、「value 属性」は .val() という棲み分けを覚えておきましょう。

.attr() / .prop() の使い分け

HTML 属性を取りたいときは .attr()、真偽値や動的な状態は .prop() を使うのが原則です。

// About

console.log($('#link').attr('href'));   // "/about"
console.log($('#link').attr('target')); // "_blank"

// チェック状態は属性ではなくプロパティ
// 
$('#agree')[0].checked = true;
console.log($('#agree').attr('checked'));  // undefined（HTML 属性は変わっていない）
console.log($('#agree').prop('checked'));  // true（DOM プロパティは true）

.data() で data-* 属性を取り出す

HTML5 のカスタムデータ属性 data-* の値は .data(key) で取り出せます。ハイフン区切りは自動的にキャメルケースへ変換されます。

// 
  • …
    • 

console.log($('#row').data('userId')); // 42  (数値に自動変換)
console.log($('#row').data('role'));   // "admin"

    複数要素にマッチした場合

    セレクタが複数要素にマッチしたとき、.text() はすべてのテキストを連結して返しますが、.val() / .attr() / .html() は先頭要素の値だけを返します。

    // 
    A
    B
    C
    

console.log($('.msg').text());   // "ABC"  ← 連結
console.log($('.msg').html());   // "A"    ← 1 つ目だけ
console.log($('.msg').attr('class')); // "msg"

    全要素から値を集めたい場合は .each() や .map() で回します。

    const values = $('.msg').map(function () {
    return $(this).text();
}).get();
console.log(values); // ["A", "B", "C"]

    取得と設定（セッター）の対称性

    本記事は「取得」を主題にしていますが、jQuery の API は引数なしで呼ぶと取得、引数を渡すと設定という対称構造を持っています。.text() は取得、.text("新しいテキスト") は設定。.val() は取得、.val("abc") は設定。.attr("href") は取得、.attr("href", "/new") は設定。この一貫したルールを覚えておくと、対応する API を別途調べる必要がなくなります。

    取得値の型に注意

    .val() の戻り値は常に文字列です。type="number" の入力欄でも文字列で返るため、数値計算したい場合は parseInt / parseFloat / Number で明示変換する必要があります。これを忘れると "3" + 4 が "34" になるという、JavaScript お決まりのバグに引っかかります。逆に .data() は値が数値らしければ自動で数値型に変換されるので便利ですが、ID のように先頭ゼロが意味を持つ値を扱う場合は .attr("data-foo") で素の文字列を取り出すべきです。

    セレクトボックスでよく使うパターン

    セレクトボックスの「現在選ばれている value」は .val() で取れますが、表示用ラベルが欲しい場合は .find("option:selected").text() のように選択中の option を辿る必要があります。複数選択（