[HTML・JS・CSS]プロパティとアトリビュートの違い

Read More

プロパティ: 英語で書くとproperty。意味は属性。

アトリビュート:英語で書くとattribute。こちらの意味も属性。


この2つの単語はHTML、CSS、jQueryなんかを触ってるとよく聞く。

一般的にはこの2つの単語の意味はほぼ同義らしいが
この業界、ことWeb系のプログラム・コーディングにおいてはちょっと違う。

プロパティアトリビュートの違いを整理してみようとおもふ。



--
まず2つの単語に共通する言葉、すなわち属性 について、
HTMLのform要素を例に考えてみる。


HTMLのform要素には数多くの属性がある。
action、method、enctype、accept-charset、accept、target...

ぱっと思いつくだけでこんなにある。

これらはaction属性、method属性なんていう。
formに属するものだからまあそういう言い方をする。

そしてform要素にはnameやidをつけたりすることもある。
こちらもname属性やid属性という言い方をする。


このform要素の属性たちのことを英語でいうと、
HTML Document form element propertiesとなる。

属性=プロパティ とわかる良い例だ。


このようにHTMLで考えた場合はアトリビュートなんて言葉はさっぱり出てこない。

じゃあアトリビュートって何さ?



アトリビュートとはjQueryライブラリの中で定義されている関数attr()のこと。
解説にはattr(properties)なんて書かれてたりする。
これはプロパティを操作するときに利用するもの。

これだけ。


アトリビュートを「属性」と訳すことなく単に、
jQueryのプロパティを操作するための関数
とだけ覚えておけばよい。

これ以外でアトリビュートなんていう単語はまあまず使わない。
jQuery以外の意味でアトリビュートを使われても逆に「?」となる。

補足:
厳密にはjQueryではなくjavascriptそのものにアトリビュートがある。
ex) javascriptでアトリビュートを使う
document.getElementById('form_1').setAttribute('action', ''index.html);





■まとめ
まとめると、

プロパティという単語の方を基本として覚える。

プロパティとはHTMLエレメントのプロパティ、すなわちaction属性やmethod属性のことを指す。

アトリビュートとはjQueryで上記プロパティらを操作する関数のことを指す。

となる。



と、まあ見る人が見たら怒られそうなまとめになってしまった。
でもまあそれが一番しっくりくるし説明しやすいんだもの。





--
■おまけ
英語を日本語化して、さらにweb業界で、とかになると本来の意味や使い方とは全然違ったものになっているようものは本当に多い。

しかもそれがもう広まってしまっているので、これらを新たに覚える人はまずそのニュアンスを掴まなければ他の人の言ってることが理解もできず話にもならないというこの状況。

先述したプロパティとアトリビュートの違いについても似たようなものがある。


プロパティとアトリビュートの違いについてのGoogle検索は多い。
# "プロパティ" "アトリビュート" で "違い" が候補に出るくらい

しかしそれらの違いを明確にサイト内で書いているところはない。
書けない、と言った方が正しいのかもしれない。

本記事でも本当の意味での正しさとはほど遠いと思う。
ただ少しでも現場でのニュアンスを掴んでもらえればという気持ちで書いた。


ま、おしかりは受けよう







Comments(4)

1  みやび  2013/07/26 (金) 10:42 ID:wVEKsIh15
自分でもアトリビュートとプロパティの違いに関して調べて来ました。

■プロパティ
ttp://e-words.jp/w/E38397E383ADE38391E38386E382A3.html

■アトリビュート
ttp://e-words.jp/w/E382A2E38388E383AAE38393E383A5E383BCE38388.html

アトリビュートはマークアップ言語で使われる狭い用語。
対してプロパティは汎用的な用語ですね。
要素をオブジェクトと考えて属性をプロパティと呼ぶ、これでも意味は通ります。

プロパティはJavaScriptのオブジェクトが持ってる情報の固まりで、
オブジェクトに内包するメソッドや変数が該当します。

特にJavaScriptでHTMLの要素を掴んだ場合、「プロパティ」だと見分けがつかなくなります。
なので要素の属性は「アトリビュート」と呼んだ方が間違いないと思います。
(jQueryやJavaScript自体でもその辺を考慮してプロパティとアトリビュートを使い分けているのだと思います)

2  シラサヤ  2013/07/27 (土) 01:28 ID:vj1qmb915
早速のおしかりありがとう(泣


そうだね、そうです。
言われてみて確かにって思ったわ。

CSSでは属性のことをプロパティって言うけど、
javascriptでは指摘してくれた通りだと思う。


ちょっとまた記事書き直します(沈




3  シラサヤ  2013/08/05 (月) 01:05 ID:7UnQVpd15
>> みやびさん
記事書き直そうかと思って色々調べたり考えたりしたんだけどやっぱそのままにしとく。
これも一つの意見だと思うしそのまま残しておくよ。


指摘してくれた内容は説明文も含め全て正しいと思う。


でもなんか俺の中で
「アトリビュート=属性」
って言い切るのに抵抗があるんだよね。
感覚的な話で申し訳ないんだけどね。


たぶん自分が、
HTML->CSS
の順に学んだせいなんだろうね。

完全に「プロパティ=属性」って頭に入っちゃってるんだ。


HTML->Javascriptの順で学んだ人はアトリビュートの方が通りがいいんだろうけど。


だから
Javascriptメインで考える人は"アトリビュート"でいいんじゃないかな。

俺みたいにCSSで入った人は記事の通りでいいと思うわけさ。






うん、結論出すのにちょっと時間かかったけどなんかそれでいいや。





4  びるぱん  2013/08/15 (木) 09:06 ID:8BabCB715
ちょっと違うかもだけど…

$('#hoge').val();

あれ、取れない。

$('#hoge').html();

取れた!

っていうのもあるあるで付け足したい。
あとはdata-*なんかもたまに混同してしまう。


Category "HTML・JS・CSS" の最新記事