過去バージョン

はじめに

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

取得メソッド早見表

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

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

// HTML
// <div id="item1">val1</div>

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

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

// HTML
// <div id="box">
//   Hello <strong>World</strong>!
// </div>

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

.html() で innerHTML を取得

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

// HTML
// <div id="box">Hello <strong>World</strong>!</div>

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

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

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

// HTML
// <input id="name" type="text" value="taro">
// <select id="lang"><option value="ja">日本語</option><option value="en" selected>英語</option></select>

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

// チェックボックスのチェック有無は .prop() で
// <input id="agree" type="checkbox" checked>
console.log($('#agree').prop('checked')); // true

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

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

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

// <a id="link" href="/about" target="_blank">About</a>

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

// チェック状態は属性ではなくプロパティ
// <input id="agree" type="checkbox">
$('#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) で取り出せます。ハイフン区切りは自動的にキャメルケースへ変換されます。

// <li id="row" data-user-id="42" data-role="admin">…</li>

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

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

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

// <p class="msg">A</p><p class="msg">B</p><p class="msg">C</p>

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 を辿る必要があります。複数選択（<select multiple>）の場合、.val() は値の配列を返すため、単一選択前提のコードを書いていると後で挙動が変わる事故が起きます。

カスタム属性 vs data() のキャッシュ

.data() は初回呼び出し時に DOM の data-* 属性を読み取って jQuery 内部にキャッシュします。その後 DOM 上の data-* 属性を書き換えても、.data() はキャッシュから古い値を返し続けます。動的に変更する属性を読みたい場合は .attr("data-foo") を使うか、.data("foo", newValue) でキャッシュごと更新するのが安全です。これは jQuery を使い込んだ後に踏みやすい罠で、特に Bootstrap など外部ライブラリと組み合わせるときに混乱の原因になります。

CSS 関連の取得

要素に適用されている計算済みのスタイル値は .css(name) で取得できます。たとえば $('#box').css('background-color') は rgb(255, 0, 0) のように RGB 形式の文字列で返ります。CSS 値は単位込みで返るため、数値計算したい場合は parseInt や正規表現で単位を取り除く処理が必要です。要素の幅・高さを数値で取りたいなら、.width() / .height()（content 部分のみ）、.innerWidth() / .innerHeight()（padding 含む）、.outerWidth() / .outerHeight()（border 含む、true 引数で margin も含む）という専用 API があり、これらは数値で返るため計算に直接使えます。

位置情報の取得

要素の画面上の位置情報も jQuery で取得できます。.offset() はドキュメント全体に対する座標（{ top: 100, left: 50 }）、.position() は親要素に対する相対座標を返します。スクロール位置は .scrollTop() / .scrollLeft() で取得・設定が可能です。これらを組み合わせると「ある要素が画面内に入ったらアニメーションを開始する」といったスクロール連動 UI を簡潔に実装できます。ただし現代では IntersectionObserver を使う方がパフォーマンスが良いケースが多いので、要件次第で使い分けましょう。

フォーム全体のシリアライズ

フォーム内の全入力値をまとめて取得したい場合は、.serialize() で URL エンコードされたクエリ文字列、.serializeArray() で配列形式で取得できます。Ajax で POST するときの定番パターンで、各入力欄を個別に .val() で取り出す必要がありません。FormData オブジェクトを使えばファイルアップロードを含むマルチパート送信も可能で、jQuery を経由せずに new FormData(form) でブラウザ標準 API を使う選択肢もあります。フォームの送信前バリデーションと組み合わせるときは、まず .val() や .is(':checked') で値を取り出して条件チェックし、問題なければ送信、というフローが基本です。

関連記事

• jQuery クリックイベントの基本