Javascript

WEBサイト作成

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


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

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

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

つまり「人間にとって自明の要素をシステムに解釈させるためにタグを付けて範囲を明確にする」という行為は、人間が範囲を決める以上相対的なものにならざるを得ず、必然的に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://bahtera.jp"]')で囲む。
  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要素

 

//div要素(エレメントオブジェクト)のid属性がheaderという値を持つ
<div id="header"></div>

//p要素(エレメントオブジェクト)のstyle属性がmarginというプロパティと4pxという値を持つ
<p style="margin: 4px; padding : 2px"></p>

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

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

<html>
<head>
  <style>
    p {
        margin : 4px;
        padding : 2px;
    }
  </style>
</head>

<body>
  <p></p>
</body>

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

//HTMLタグにプロパティと値を指定
<p><font color="blue"></font></p>

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

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

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





おすすめ記事一覧

大統領選挙で考えたギャップにハマるということ 1

ギャップにキュンとするというのは人間の本能みたいなもので、ジョコウィの私利私欲のない素朴なおじさん像と、その実強力なリーダーシップを発揮する実務派という内面が、一見普通の人だが実はスゴイというギャップ好きのインドネシア人に大ウケして、大衆は一種の集団催眠状態にあるようです。

情報の質のレベル 2

見える化された結果を共有化することで問題点が共通認識されますが、共有化が進むことで情報の持つ希少価値が薄れて困る人間がいる場合、有益な情報を独占することでポジションを高めようという政治力が働きます。

インドネシアのスタバの店員にありがたい人生の教訓を教わった件 3

いつものスタバでいつものアイスコーヒーを注文していると、だいたいなじみの店員が「今日は珍しい時間に来たねー」とか「今日もいつものアイスでいいのかなー」とか馴れ馴れしくフレンドリーに話しかけてきます。

宗教によって異なる「死んだらどうなる」の考え方 4

キリスト教もイスラム教もともにユダヤ教から派生した宗教であり、それぞれイエス・キリスト(本人が神)またはアッラーという唯一無二の神を信じます。

株価操作なんてインドネシア株では当たり前 5

株価は売り注文と買い注文により変動し、大量の売り注文を買う注文がたくさん入れば、他の投資家達は「俺も俺も」と続くことで株価が上がります。

心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた 6

インドネシア人は秘密の話は誰かに暴露しないと精神の安定を保てない人が多いため、内緒の話に情報の希少性は少なく信憑性も低いことが多いので、「ここだけの話」という枕詞付きで聞かされる話は話半分に聞いておいたほうがいいかもしれません。

日系企業のインドネシアでの存在意義 7

今のまま日本の人口減が続けば、内需は縮小の一途をたどるわけで、そうなると日本国内市場だけで生き残るのは難しいと判断する国内企業が、海外市場に活路を見出そうとするのは必然です。

チャンスはあるが勝てる分野を見つけるのが難しい 8

実際にインドネシアに住んでみて、自分で動いて人と話しをして、現地の事情を少しずつ理解していくにつれて、インドネシアで起業することが意外と手強いことに気づき、その難しさの原因は、高い送料と関税であったりローカル企業との競争であったり、就労ビザ(IMTA)や外国人技能開発基金(DPKK)などのランニングコストの高さであったりします。

インドネシアのシステムインテグレーション業界 9

先日JETRO(日本貿易振興機構)さんと、インドネシアの中小企業のIT投資について意見交換させていただく機会をいただいたのですが、そこで「システム投資のコストメリットはどのように説明できるのか」という、システムインテグレーターの存在価値にも関わる重要な問題提起がありました。

肉体と精神と心と魂 10

「Body and Soul」といえば、昨日の内閣改造に伴う人事で内閣府政務官に内定した自民党の今井絵理子参議院員がメンバーだったSPEEDのデビュー曲であり、インドネシアの老舗女性ファッションブランド名でもあります。

ジャカルタのラーメン市場 11

僕がインドネシアに初めて来たのが1997年10月、インドネシア語は分からないし、仕事は辛いし、周囲の人間は理不尽だし、一時期日本に帰りたくて仕方がない時期がありましたが、当時自分をかろうじてインドネシアに繋ぎ止める心の支えとなっていたのが、協栄プリンスビル(今のWisma Keiai)の日本食レストラン「五右衛門」であり、ここでキムチラーメンを食べることが唯一の楽しみと言っても過言ではありませんでした。

ブランド力、技術力、資金力の3要素 12

1998年のジャカルタ暴動後、ルピアが暴落し海外からのドル建て債務を抱えた国内企業が利子の支払いに苦しんでいた頃、僕は外貨が獲得できるインドネシアでの新しいビジネスを探していました。

日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 13

先進国と後進国との間にある流行のタイムラグを利用して、先進国での成功例を後進国で実践するビジネスモデルをタイムマシン経営といいますが、インターネットの普及に伴い情報がフラット化してしまい、モノと情報のタイムラグが限りなく小さくなった今、先駆者である中小零細同業他社が乱立し市場が出来上がったところに、後発の大手が参入し先発零細を駆逐していく、という典型的な負けパターンにはまります。

サリナデパートとマクドナルド 14

本日5月10日を最後にインドネシアのマクドナルド第1号店であるサリナデパート店(Sarinah)が閉店になりますが、ジャカルタのショッピングモールが新しいコンセプトでモダンにリニューアルされ続ける中で、僕がインドネシアに来たばかりの20数年前には、若者の待ち合わせ場所の定番でもあったサリナデパートやブロックMのパサラヤ(Pasaraya)などは完全に時代に取り残されてしまいました。

不景気の歴史 15

僕がインドネシアに来てからこれまで何度か経済不況を見てきましたが、今回の新型コロナウィルスの感染拡大により、間違いなく景気後退しますので、数年後にはこれがコロナショックとかコロナ不況とか呼ばれるようになるのかもしれません。

日本のバブル経済崩壊後とインドネシアの通貨危機後 16

自分が大学に入学したのがバブル経済末期の1991年、土地も株価もMAX爆上げして、三菱地所がアメリカの象徴であるロックフェラーセンタービルを買収し、ジュリアナ東京でワンレンボディコン(登美丘高校ダンス部のバブリーダンスみたいなやつ)のお姉さん達が扇子振って踊っている時期でした。

内需と外需の自国経済に及ぼす影響 17

公共事業投資を行っても、お金が企業内や個人の貯蓄に滞留してしまい国内消費が増えないのが日本の状況であり、国内消費は増えても消費材の輸入品比率が高く、国内資産が海外に流出しているのがインドネシアの状況です。

2019年の総選挙を前にインドネシア政治史のおさらい 18

来年の大統領選挙(Pemilu Pilpres Pileg Indonesia 2019)に向けての選挙運動(Kampanye)を解禁するにあたり、投票用紙に印字される順番はジョコウィ現職大統領・マフル副大統領候補組が1番、プラボウォ大統領候補・サンディアガウノ副大統領候補組が2番と決まりました。

コーヒーをもっと楽しくもっと美味しく 19

インドネシアは北回帰線と南回帰線をはさむコーヒーベルトに位置するコーヒー栽培に適した国で、1602年の東インド会社の進出を契機にオランダの植民地支配が300年以上続き、その間アラビカ種のコーヒーが持ち込まれ、気候のいい高原地帯で栽培が開始されました。

インドネシア人の悪魔祓い 20

人間誰しも自分の中に悪魔が潜んでおり、それが何らかのきっかけで表面に出て来るという考え方自体には、背景に宗教が有るか無いかの違いだけで、基本的に理解できる話であり、それを信じるか信じないかは別として、そういう考えがあることを認めることは大切なことだと思います。

-WEBサイト作成

© 2020 バテラハイシステム Powered by STINGER