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

今回の記事は、

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

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

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

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

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()メソッドの違いその１ urlを取得する際の戻り値

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

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

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

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

attr()メソッドとprop()メソッドの違いその２ 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()メソッドの違いその３ フォーム要素の属性を取得した際の戻り値

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

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

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()メソッドを使用するのが安全でしょう。

最後に

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

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

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

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

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