オブジェクト指向における要素と属性

本記事のポイント

システムは人間の言葉をそのままでは理解できないので、理解できるようにHTMLの開始タグと終了タグで囲んで範囲を明確にした後のカタマリが要素です。

HTML要素はDOMオブジェクト、属性はプロパティに割り当てられ、CSSでセレクタというオブジェクトとして、プロパティと値を設定することでレイアウトを整えます。

スタイルは要素に対して適用するときはHTMLタグをセレクタとして指定し、属性に対して適用するときは属性をセレクタとして記述します。

人間世界とシステムの世界での要素と属性

人間世界で要素という言葉は「物・事を成り立たせるもとであるそれ以上は簡単なものに分析できないもの」というこれ以上分解できない絶対的な単位という意味があります。

一方システムは人間の言葉をそのままでは理解できないので、理解できるようにタグを付けて範囲を明確にしてあげた後のカタマリを要素と考えます。

つまり「人間にとって自明の要素をシステムに解釈させるためにタグを付けて範囲を明確にする」という行為は、人間が範囲を決める以上相対的なものにならざるを得ず、必然的にHTML要素は入れ子構造になります。

人間世界でプロパティ(属性)という言葉は「土地・資産・所有物」という意味であり、世の中のすべてのオブジェクトは属性を持っています。

不動産という意味ではProperty以外にReal estateという言葉がありますが、Propertyの場合personal property(動産)とreal property(不動産)を含む一般的言葉であるのに対し、Real estateは法的に守られたestate(資産)全般という意味合いが強いです。

ちなみに近いところでasset(資産)という言葉がありますが、有形固定資産がFixed assetであるのに対し、無形固定資産はIntangible assetであり、前者は間接法でDepreciation(減価償却)され、後者は直接法でAmortization(なし崩し償却)されます。

一方でシステムの世界の属性はオブジェクトが持つ「特徴・性質」という意味であり、HTML要素内の属性はDOMオブジェクトのプロパティに割り当てられ、CSSでセレクタというオブジェクトとして、プロパティと値を持っています。

セレクタはスタイルを適用する対象を示すものであり、中括弧の中にプロパティと値を宣言します。

そして要素とはHTMLの開始タグと終了タグで囲まれた意味のある単位であり、スタイルは要素に対して適用するときはHTMLタグをセレクタとして指定し、属性に対して適用するときは属性をセレクタとして記述します。

要素セレクタと属性セレクタ

セレクタはWEB上のオブジェクトに対して、装飾(CSSにてプロパティに値を設定)したり処理を実行(メソッドやイベント)したりするための仲介役ですが、セレクタになる資格のあるものはHTML要素またはHTML属性になります。

  1. 要素セレクタはそのまま記述「$(‘p’)」
  2. 属性セレクタ
    idは「$(‘#yama’)」、classは「$(‘.zou’)」
    その他の属性は大括弧$(a[‘href=”https://www.indonesia-japan.com”]’)で囲む。
  3. ブランクは「それ以下の子要素」、カンマは「複数の要素」、プラス(+)は「隣接要素」、不等号(>)は「直下の子要素」

セレクタが処理するメソッドにはプロパティに値を設定する役割と値を取得する役割がありますが、記述上の違いはプロパティと値をセットで書くか、プロパティのみを書くかです。

  • 値を設定 : $(‘p’).css(‘color’, red);
  • 値を取得 : console.log$(‘p’).css(‘color’);

バリ島の不動産屋とセレクタの関係

WEBシステムの世界では、セレクタはオブジェクトの性格を定義するプロパティや、処理を行うメソッドとの仲介屋みたいな重要な機能を担っており、WEBサイトがブラウザ上でDOMにより要素単位でオブジェクト化されるタイミングで、要素セレクタや属性セレクタは、CSSやjQuery上で、プロパティによって値が代入されたり、メソッドによって処理されたりします。

要素とか属性とかいう言葉は日常生活の特殊なシーンでなんとなく聞くこともありますが、セレクタという言葉になると耳にする機会は俄然少なくなります。

MT車のギアチェンジを行うためのシフトレバーはAT車ではセレクター(セレクトレバー)と呼ぶそうですがあまり聞かないですね。

セレクタを説明するにはバリ島の不動産屋をイメージするとわかりやすいと思います。

バリ島(body要素)には、クタエリア(header要素)、ヌサドゥアエリア(nav要素)、デンパサールエリア(article要素)、ウブドゥエリア(footer要素)みたいにそれぞれエリアごとに不動産屋がありますが、各不動産屋のオフィスから遠いエリアへ行くには交通費等のコストがかかるため、だいたい専門外のエリアには手を出したがりません。

bodyタグ内を「ヘッダー領域」「サイドバー領域」「コンテンツ領域」「フッター領域」の4ブロックに区切るのがセクション要素であり、CSS上でそこに属するブロックレベル要素(perumahan 集合住宅)やインライン要素(VillaやCondominium)ごとに分類(プロパティに値を設定)し管理するのがセレクタ(不動産屋)の役割です。

オーナーは、不動産屋で自分の所有物件についての情報を専用フォーム(CSS)の「土地面積」「建物面積」「希望価格」等の項目(プロパティ)にデータ(値)を記入し、その情報を元に不動産屋が自社の物件管理機能付きWEBサイト(jQuery)上にストックとして登録します。

一方で賃貸や購入希望者は「バリ島 不動産」でググッて、不動産屋のWEBサイト(jQuery)に到達すると、エリア、価格等の条件で絞込み検索(メソッド実行)を行い、希望する物件を探します。

セレクタとはずばり、それがCSSではスタイルを適用する対象を示し、jQueryではメソッドやイベント発生時の処理対象になるものです。

配列の要素

簡単に言うと配列はお年玉用のルピア紙幣の入った封筒を束ねたようなものであり、封筒に連番が振ってあれば通常配列、渡す相手の名前が書いてあれば連想配列になります。

要素はこの場合のルピア紙幣の入った封筒全体であり、ルピア紙幣が値、封筒に振ってあるのが連番ならインデックス、相手の名前ならキーとなります。

封筒からルピア紙幣を出した後の相手の名前付きの空の封筒をプロパティと考えると、入れるものはルピア紙幣に限る必要はなく、車のキーでも手紙でもいいわけです。

ただし航空券が入っている場合は、「スカルノハッタ空港からバリ島に飛ぶ」というアクションを約束するものですので、航空券は関数リテラルという値であると考えられます。この場合は別の封筒には名義人の名前を入れておく(参照渡し)する必要があります。

style属性とstyle要素

HTML文章はブラウザのDOMによって要素(エレメント)オブジェクト化され、要素が持つプロパティの値をJavaScriptで更新することでHTML文章上の表示が変化します。

CSSをインラインスタイルで書く場合、p要素オブジェクトの中のstyle属性に配列リテラルを代入しますが、style要素の中に書く場合にはp要素がCSSのセレクタ(Selector)となります。

インライン表記のstyle属性の場合はダブルコーテーションで囲むのがややこしいですが、これは昔HTMLタグにプロパティと値を指定するときにダブルコーテーションを使用したなごりではないでしょうか?

属性の値がカスケード状に影響するCSS

DOMによってhtmlタグはdocumentオブジェクト化されツリー上にオブジェクト化された要素が繋がっていきますが、オブジェクトに対するプロパティと値を完全分離し、プロパティと値の組み合わせを変化させることにより、オブジェクトを修正することなく見栄えだけを変えるのがCSSの本来の目的です。

レスポンシブデザインのWEBサイトがまさにこれなんですが、ツリー状のオブジェクトの上位に設定されたプロパティの値は下位のオブジェクトにも影響するのがカスケード(滝の流れ)の本質になります。