こんにちは、ライターのマサトです！
今回は、jQueryからHTML要素の属性やプロパティを簡単に取得できる「prop()」メソッドについて学習を進めていきましょう。また、よく似たメソッドである「attr()」メソッドとの比較についてもしっかりと勉強できるようになっています。
この記事では、
- 「prop()」とは？
- 「prop()」の使い方
- 複数の属性を設定する方法
- 「prop()」と「attr()」を区別するには？
- 「prop()」の活用
などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、jQueryによる「prop()」（attr()）メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「prop()」とは？
それでは、まず最初に「prop()」メソッドについての基本的な知識から勉強していきましょう！
「prop()」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。特によく使われるのが、フォームをjQueryで操作する時に必須となる「checked」などのプロパティを扱うケースです。
理由としては、プロパティには「属性値」が無く、それ単体で使うことになるため類似のメソッドでは正しく取得できない場合があるからです。本記事では、このようなケースも想定してフォームに関連する活用法も解説しているので、ぜひ参考にしてみてください！
「prop()」の使い方
この章では、「prop()」の基本的な使い方について見ていきましょう。主に、属性値の取得・設定についてと引数に関数（function）を指定する方法について学んでいきます。
HTML要素の属性を取得する方法
まずは、基本となるHTML要素の属性値を取得してみましょう。
一般的な記述方法は、【 要素.prop(属性) 】のように対象となるHTML要素にprop()を実行するカタチになります。引数に取得したい属性を指定することで、「属性値」を取得することができるわけです。
次のサンプル例を見てください！
<body>
<p id="text">サンプルテキスト</p>
<script>
var id = $('p').prop('id');
console.log( id );
</script>
</body>
実行結果
text
この例では、id属性値「text」が付与されたp要素が配置されていますね。このp要素を対象にして、「prop(‘id’)」と記述することでid属性値が取得できるわけです。
実行結果には属性値である「text」がしっかりと取得できているのが分かりますね。これが「prop()」メソッドの最も基本となる記述方法になるので、しっかりと学習してプログラミングできるようにしておきましょう！
HTML要素の属性を設定する方法
「prop()」メソッドは、属性値を取得するだけでなく新しい値を設定することも可能です。記述方法は、【 要素.prop( 属性, 値 ) 】のようにpropメソッドの第２引数へ設定したい値を入力するのが先ほどとの違いになります。
実際に属性に値を設定するサンプルは次のとおりです！
<body>
<p id="text">サンプルテキスト</p>
<script>
var id = $('p').prop('id', 'sample');
console.log( id );
</script>
</body>
実行結果
[p#sample, ......]
この例では、id属性値「text」が付与されたp要素に、新しく「sample」というid属性値を設定しています。対象となるp要素に「prop(‘id’, ‘sample’)」と記述することで、元のid属性値を「sample」に変更して設定するという意味になります。
また、最初からid属性値が設定されていない場合でも、この方法で新しく属性を追加することが可能です。
prop()の引数にfunctionを設定する
さて、prop()メソッドを使って属性値を設定することができるようになりました！
そこで、応用テクニックとして設定する属性値を条件によって変化させる処理を作ってみましょう。これを実現するための処理として、prop()メソッドの引数へ関数を記述することができるようになっています。
一般的な記述方法としては、【 要素.prop( 属性, 関数 ) 】のようになります。先ほどは、設定したい値を第２引数へ記述していましたが、それを関数に置き換えるようなイメージですね。
例えば、id属性値に設定したい値を条件によって変化させたい場合は次のようなプログラムになります。
$('p').prop('id', function( index ) {
//条件分岐処理を書く
//return 値
});
この例では、idの属性値を設定したいので「prop()」の第1引数は「id」となり、第2引数に関数を設定しています。
関数内で何らかの処理を記述した最後には、「return」で値を返す必要がある点に注意しましょう。
なぜなら、返した値が「id属性値」に新しく設定される仕組みになっているからです。
それでは、実際に試してみましょう！
<body>
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
$('p').prop('id', function(index) {
if(index === 1) return 'sample';
return 'text';
})
</script>
</body>
実行したあとのHTML
サンプルテキスト１
サンプルテキスト２
サンプルテキスト３
この例では、属性が一切付与されていないp要素が3つ配置されていますね。そのp要素を対象にして、prop()でid属性値を関数によって変更する処理を記述しているのが分かります。ポイントはindexの値によって条件分岐させている点です。
この「index」とは、簡単に言うと対象となっているp要素の順番のことで、この例では3つ配置されているので0〜2までのindexが取得できます。
つまり、「index === 1」という条件式は2つ目のp要素のことを指しているというわけです！そのため2つ目のp要素だけid属性値がsampleとなるわけです。このように関数によって属性値を変更できるようになると、複雑なHTMLを動的に作れるようになるので非常に便利になります。
複数の属性を設定する方法
実は、prop()の引数にはオブジェクト形式のデータを設定することが可能です。これを上手く活用することで、複数の属性値を一度にまとめて設定することができるのでご紹介しておきます！
設定方法としては、【 対象要素.prop({ 属性: 値, 属性: 値, 属性: 値・・・}) 】のようにオブジェクトを設定します。次のサンプル例を見てください！
$('h1').prop({'id': 'sample', 'class': 'test'});
実行後のHTML
<h1 id="sample" class="test"></h1>
この例では、h1要素に対してprop()を実行しているのが分かります。引数にはオブジェクト形式で「id属性」と「class属性」を設定していますよね？
このように設定することで、実行結果のように h1要素へまとめて属性を付与することができるわけです。
「prop()」と「attr()」を区別するには？
jQueryには、prop()によく似た機能を持っている「attr()」メソッドがあります。この両者の違いが最も顕著に現れるのは、一般的にフォーム要素を使ったプログラミングをする時です。
特に、「checked」や「disabled」などのプロパティを使って条件分岐するようなケースでは「prop()」を使うべきです。その違いについて、次の章から詳しく見ていきましょう！
attr()で「checked」を取得する
まずは、「attr()」メソッドを使って「checked」プロパティを取得してみましょう！
記述方法はprop()と同じで、【 要素.attr(プロパティ) 】のように実行すればOKです。
次のサンプルを見てください！
<body>
<input type="checkbox" checked>
<script>
var check = $('input').attr('checked');
console.log( check );
</script>
</body>
実行結果
checked
この例では、input要素にあらかじめ「checked」プロパティが付与されているのが分かります。そこで、input要素に対して「prop(‘checked’)」と記述することで「checked」プロパティの有無を取得することができます。「checked」が存在していれば実行結果のように「checked」の文字列が取得でき、無ければ「undefined」が取得できます。
それでは次に、チェックボックスをクリックするたびにattr()で「checked」プロパティの状態を確認してみましょう！
<body>
<input type="checkbox" checked>
<script>
$('input').click(function() {
var check = $(this).attr('checked');
console.log( check );
})
</script>
</body>
実行結果
checked checked checked checked
先ほどのinput要素を使い、チェックボックスをクリックするたびに「attr(‘checked’)」でプロパティの状態を取得しています。実行結果を見ると分かりますが、何回クリックしても取得できるのは「checked」の文字列だけですね。
つまり、「attr()」はinput要素に記述されている「checked」プロパティの有無だけを見ているというわけです。
prop()で「checked」を取得する
それでは、同じことを「prop()」で行うと何が違うのか見ていきましょう！
まずはinput要素の「checked」を取得してみます。
<body>
<input type="checkbox" checked>
<script>
var check = $('input').prop('checked');
console.log( check );
</script>
</body>
実行結果
true
プログラム自体は先ほどと同じで、attr()が「prop()」メソッドに置き換わっているだけです。実行結果を見ると「true」が出力されているのが分かりますね。
これは、prop()がチェックボックスに「チェック」が入っているかどうか？…という「checked」の状態を確認できるということです。さらに理解を深めるために、先ほどと同じくクリックするたびにprop()で「checked」プロパティの状態を確認してみましょう。
<body>
<input type="checkbox" checked>
<script>
$('input').click(function() {
var check = $(this).prop('checked');
console.log( check );
})
</script>
</body>
実行結果
false true false true
こちらもプログラム自体は先ほどと同じで、attr()が「prop()」メソッドに置き換わっただけです。注目すべきは実行結果です。クリックするたびに、「false」「true」が交互に出力されているのが分かりますね。
つまり、チェックボックスに「チェック」が入ったかどうか？をprop()メソッドは取得することができるわけです。これこそが、attr()メソッドとの大きな違いの1つになります。
もう一度おさらいすると…
- attr()は、checkedの記述があるかどうかを確認する
- prop()は、checkedの状態（チェックされたかどうか）を確認する
ということになります。
「prop()」の活用
この章では、フォーム部品などによく使われる属性について詳しく見ていきましょう。主に、「selected」「disabled」「readonly」「hidden」について学んでいきいます。
「prop()」で属性値が「selected」かをチェックする方法
まずは「selected」プロパティから解説していきます！
「selected」は、「選択済み」を意味するプロパティなのですが、主にプルダウン式メニューの選択などでよく使われます。一般的に、以下のような「select要素」内に配置される「option要素」に記述されることが多いです。
<select>
<option value="1">おはよう</option>
<option value="2" selected>こんにちは</option>
<option value="3">こんばんは</option>
</select>
この例では、2つ目のoption要素に「selected」が記述されているので、初期表示は「こんにちは」が選択されます。
それでは、この「selected」をprop()メソッドを使って取得してみましょう！
基本的にoption要素は複数あるのが前提なので、今回は「each()」を活用してみます。
$('option').each(function() {
var select = $(this).prop('selected');
console.log( select );
})
実行結果
false true false
まずoption要素をセレクタに指定し、each()を使ってすべてのoption要素に対してprop()を使うようにしています。「prop(‘selected’)」と記述することで、option要素にselectedが有効化されているかをチェックすることができますね。
実行結果を見ると、見事に2つ目のoption要素が「true」になっており、selectedが有効化されているのが分かります。
属性値の「disabled / readonly」を検出する方法
今度は、「disabled」「readonly」について詳しく見ていきましょう。disabledは「無効化」でreadonlyは「読み取り専用」という意味なのですが、フォームの場合は編集することができなくなります。
例えば、input要素に付与するとこんな感じです。
<input type="text" value="おはよう" disabled> <input type="text" value="こんにちは" readonly>
1つ目のinput要素には「disabled」が付与されており、2つ目のinput要素には「readonly」が付与されていますね。
通常ならば、Webの画面に入力フォームが表示されてユーザーが好きなテキストを入力できるはずです。
しかし、これらのプロパティが付与されると、テキスト入力などの編集は一切できなくなるわけです。両者の違いをざっくり解説すると次のようになります。
- 「disabled」が付与された要素はサーバーへ送信されない
- 「disabled」はボタン要素などにも適用可能
- 「readonly」は要素に付与されてもサーバーへ送信できる
- 「readonly」はボタン要素などへは適用できない
という違いがあります。
それでは、試しに「disabled」プロパティをprop()で取得してみましょう！
<body>
<input type="text" value="おはよう" disabled>
<script>
</script>
var check = $('input').prop('disabled');
console.log( check );
</body>
実行結果
true
これまで学んできたprop()の取得方法と同じなので簡単ですね。対象となる「input要素」に対して「prop(‘disabled’)」と記述することで、disabledの状態を確認することができます。
実行結果を見て分かるように、input要素にはdisabledが付与されているので「true」になるわけですね。
属性値の「hidden」をチェックする方法
HTMLタグや入力フォームなどで「hidden」を設定すると、画面上に表示されなくなる特徴があります。この属性を「prop()」を使って取得するとどのようになるかを見ていきましょう！
次のサンプル例を見てください！
<h1 class="hoge" hidden>サンプルタイトル</h1> <input id="test" type="hidden">
この例では、h1要素と入力フォームのtypeに「hidden」を設定しているのが分かりますね。
このような状態の時に、prop()で「hidden」属性を取得するには次のように記述します。
var h1 = $('h1').prop('hidden');
var input = $('h1').prop('hidden');
console.log(h1);
console.log(input);
実行結果
true true
prop()の引数は、いずれも「hidden」を設定していますね。これにより、「hidden」属性が付与されていれば「true」、そうでなければ「false」が戻り値として取得できます。
実行結果を見ると、両方ともtrueになっており正しく取得できているのが分かりますね。
まとめ
今回は、jQueryで要素の属性やプロパティを取得できる「prop()」メソッドについて学習をしました！
最後に、もう一度おさらいをしておきましょう！
- prop()は属性を取得したり再設定することができる
- prop()は引数に関数を使って条件分岐することも可能
- attr()は属性の存在有無だけを確認するが、prop()は状態を確認する
これらのポイントを踏まえて、ぜひ自分のプログラムにも取り入れながら積極的に活用できるように頑張りましょう！
