【jQuery】attr()とprop()の違い・使い分け方まとめ

今回の記事は、

  • attr()メソッドとprop()メソッドの違いが知りたい
  • attr()メソッドとprop()メソッドの使い分け方が知りたい

という方に向けた記事になっています。

この記事の前半では、「attr()メソッドとprop()メソッドの基本的な使い方」について解説しつつ、後半では「attr()メソッドとprop()メソッドの違いや使い分け方」についてご紹介させて頂きます。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


attr()メソッドとprop()メソッドの基本的な使い方

既にご存知の方も多いかと思いますが、まずは両メソッドの基本的な使い方をおさらいしておきましょう。

属性値を取得する方法

// attr()メソッドの場合
$(セレクタ).attr()

// prop()メソッドの場合
$(セレクタ).prop()

属性値を設定する方法

// attr()メソッドの場合
$(セレクタ).attr("属性", "設定値")

// prop()メソッドの場合
$(セレクタ).prop("属性", "設定値")

このように、両者は属性値を取得する方法設定する方法全く同じであるため、実装する中で「あれ、どっちを使えばいいんだっけ?」と迷ってしまう方も少なくないのではないでしょうか。

なぜattr()メソッドとprop()メソッドは機能も書き方も同じなのか

実は、一口に「属性」と言っても、その中には “Attribute”“Property” という2種類の「属性」が存在しています。

鋭い方はお気づきになられたかと思いますが、jQueryのattr()メソッドprop()メソッドはそれぞれ “Attribute”“Property” を扱うためのメソッドになっているのです。

ではこの “Attribute” と “Property” はどのような違いがあるのか、ということですが、誤解を恐れずに申し上げると、ズバリ、属性の持ち主が「HTML」か「Javascriptオブジェクト」かということになります。

つまり、 “Attribute” はHTMLの属性であり、 “Property” はそのHTMLがJavascriptオブジェクトに変換された後に設定される属性ということになります。

ただし、呼び名こそ違えど、id属性やname属性、type属性など、実際に扱うことのできる属性はほとんど同じであるため、外から見てみると全く同じ機能を有しているように見えてしまうのです。

attr()メソッドとprop()メソッドの違い

さて、attr()メソッドとprop()メソッドがなぜこんなにもややこしい関係性になっているかをご理解いただいたところで、続いては本記事の主眼である両メソッドの違いを見ていきましょう。

両メソッド間の違いは主に以下の3種類になります。

  • 1. urlを取得する際の戻り値
  • 2. data属性を扱えるか否か
  • 3. フォーム要素の属性を取得した際の戻り値

それぞれ順を追って解説させて頂きます。

attr()メソッドとprop()メソッドの違いその1 urlを取得する際の戻り値

まずは、「urlを取得する際の戻り値」の違いについて見ていきましょう。

画像のパスやリンク先を指定する際にsrc属性やhref属性を指定することとなりますが、これらの属性値を取得した場合、attr()メソッドでは相対パスが返ってきますが、prop()メソッドでは絶対パスが返ってきます。

例えば、このサイトでsrc="/sample-image"という属性を設定した場合、attr()メソッドであれば/sample-imageを返すのに対して、prop()メソッドhttps://hataworakuni.net//sample-imageを返します。

この両者の違いには良し悪しはないため、実装したい機能に応じて使い分ける形でよいかと思います。

attr()メソッドとprop()メソッドの違いその2 data属性を扱えるか否か

続いては、「data属性を扱えるか否か」という違いについて見ていきましょう。

data属性というのは、<p id="test" data-color="blue"></p>のような形で、デフォルトのもの以外の属性を追加したい場合に便利な機能になります。

attr()メソッドは以下のような形でdata属性を扱うことができprop()メソッドは扱うことができません(エラーは発生しませんが、undefinedが返ってきます)。

// 属性値を取得する場合
$(セレクタ).attr("data-color")

// 属性値を設定する場合
$(セレクタ).prop("data-color", "red")

なお、jQueryにはdata属性を専門に扱ってくれるdata()メソッドが存在しており、data("color")のような形で簡単にアクセスすることができるのですが、このdata()メソッドはjQueryオブジェクト上のdata属性のみ変更する(HTML上のdata属性は変更しない)ため、例えば属性値によってCSSを切り替えようるなど、HTML要素のdata属性を扱いたい場合には、attr()メソッドを使用しなければなりません。

また逆に言うと、jQueryオブジェクト上でdata属性を扱いたいのであれば、attr()メソッドではなく、data()メソッドを使用すべきと言えます。

attr()メソッドとprop()メソッドの違いその3 フォーム要素の属性を取得した際の戻り値

最後は、「フォーム要素の属性を取得した際の戻り値」の違いについて見ていきましょう。

実は、inputselectなどのフォーム要素に設定される属性(checkedselected)にアクセスした際の戻り値が両メソッド間で異なっています。

checked属性を例に挙げると、以下のような違いが出てきます。

// $(this)がcheckされている場合

$(this).attr("checked")
=> checked

$(this).prop("checked")
=> true

// $(this)がcheckされていない場合

$(this).attr("checked")
=> undefined

$(this).prop("checked")
=> false

このように、attr()メソッドが属性の「値」を返す一方で、prop()メソッドはその属性の「真偽」を返します

一般的に、checked属性やselected属性を利用した処理を実装する場合には、「checkされているか」や「selectされているか」といったような真偽を確認する処理が多いため、フォーム要素の属性を扱う場合には、prop()メソッドを使用するのが安全でしょう。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryのattr()メソッドとprop()メソッドの違いや使い分け方について解説してきましたがいかがでしたか?

思いもよらないところに違いがあるため、驚かれた方も多いのではないでしょうか?

こうした細かな仕様を把握しておくと、実際の開発でも不意なエラーを防ぐことができますので、ぜひこの機会に覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。