まえがき

とっつきにくいオブジェクト指向ですが、
応用次第ではUIデザインにもcss設計にも使えるシンプルかつ優れた概念です。

今回は、そのオブジェクト指向をなるべく視覚的な視点から
ざっくり解説しようと思います。

→という趣旨で社内のhtmlコーダー向けにQiitaに書いたものを転載してみます。

なお、途中でクラスだのインスタンスだのと単語が出てきますが、
今回はソースコードに沿った概念の説明に焦点を当てたいので単語の説明は一切省いています。
単語の意味については都度ggっていただけると助かります。

→というわけで、これ間違ってるんちゃう、って点に関しては、やさしーーーーーーくご指摘お願い致します。

オブジェクト指向プログラミングとは

オブジェクト指向プログラミング（オブジェクトしこうプログラミング、英: object-oriented programming、略語:OOP）とは、互いに密接な関連性を持つデータ（変数またはプロパティ）とコード（関数またはメソッド）をひとつにまとめてオブジェクトとし、それぞれ異なる性質と役割を持たせたオブジェクトの様々な定義と、それらオブジェクトを相互に作用させる様々なプロセスの設定を通して、プログラム全体を構築するソフトウェア開発手法である。

オブジェクト指向プログラミング(wikipedia)

オブジェクト指向三大要素

クラス
ポリモーフィズム
継承

クラス

クラスとは

クラスは「まとめて。隠して、たくさん作る」仕組み

サブルーチンと変数を「まとめる」

クラスの内部だけで使う変数やサブルーチンを隠す

一つのクラスからインスタンスを「たくさん作る」

オブジェクト指向でなぜ作るのか第2版 92p
※第三版でてるみたいっすね https://www.nikkeibp.co.jp/atclpubmkt/book/21/S00180/
※サブルーチン=クラス内に含有される一通りの手続きのこと、ここでは主にクラス内関数。

表現してみる

cssで表現してみる

.u-button {
  line-height: 30px;
  width: 200px;

  &.-colorRed {
    //赤いボタン
    background: red;
  }

  &.-colorBlue {
    //青いボタン
    background: blue;
  }
}

.u-buttonクラスが存在し、
そのサブルーチンとして赤くするための.-colorRed、
青くするための.-colorBlueが存在する。

jsで表現してみる

class Button{
  constructor($wrapper, text) {
    this.$wrapper = $wrapper;
    this.$ele = this.$wrapper
        .append('<button class="u-button">'+text+'</button>')
        .find('button:last-child');
  }

  colorRed() {
    this.$ele.addClass('-colorRed');
  }

  colorBlue() {
    this.$ele.addClass('-colorBlue');
  }  
}

Buttonクラスが存在し、
そのサブルーチンとして赤くするためのcolorRed()、
青くするためのcolorBlue()が存在する。

上記html/css/jsがクラスの仕組みとどう関わっているか

1) サブルーチンと変数を「まとめる」

赤いボタンも青いボタンも両方「ボタン」に属するため、.u-buttonクラス、Buttonクラスにひとまとめにできる。

2) クラスの内部だけで使う変数やサブルーチンを隠す

jsのButtonクラスに存在するthis.$wrapperやthis.$eleはクラス内スコープの変数であり、外からアクセスすることはできない。

cssの.-colorRedもそれだけでは機能を持たず、.u-buttonを合わせて初めて動作する。（※ただし外部からアクセスできるので厳密には隠蔽されていない）

3) 一つのクラスからインスタンスを「たくさん作る」

.u-button__wrapper
  button.u-button.-colorRed 赤いボタン一つ目
  button.u-button.-colorRed 赤いボタン二つ目
  button.u-button.-colorBlue 青いボタン一つ目
  button.u-button.-colorBlue 青いボタン二つ目

1回定義したクラスを複数のインスタンス（※ここではhtmlのマークアップ）に複製し展開することができる。

上記のjsのButtonクラスが存在する上で以下のコードを実行しても、上記のようなhtmlが生成される。

See the Pen object1 by rockinruuula1227 (@rockinruuula1227) on CodePen.

ポリモーフィズム

ポリモーフィズムとは

ポリモーフィズムはサブルーチンを呼び出す側のロジックルールを一本化する仕組み、すなわち共通メインルーチンを作る仕組みである。

オブジェクト指向でなぜ作るのか第2版 96p

表現してみる

html/scssで表現してみる

See the Pen Object2 by rockinruuula1227 (@rockinruuula1227) on CodePen.

マークアップ（与えられている指示、メインルーチン）は同一だが、
付与されるクラス（指示の呼び先、サブルーチン）によって見た目が変わる。

jsで表現してみる

See the Pen Obejct3 by rockinruuula1227 (@rockinruuula1227) on CodePen.

メインルーチン内に同樣の引数によってインスタンスが作成され、同樣の手順で出力内容が違うNewsBoxとNewsListのサブルーチンが実行される。

継承

継承とは

クラス定義の共通部分を別クラスにまとめて、コードの重複を排除する仕組みである

オブジェクト指向でなぜ作るのか第2版 103p

html/cssで表現してみる

See the Pen Object4 by rockinruuula1227 (@rockinruuula1227) on CodePen.

元クラス.u-newsareaが.c-newsbox2に継承され、
.u-newsarea内のインスタンスが上書きされている。

jsで表現してみる

See the Pen Object5 by rockinruuula1227 (@rockinruuula1227) on CodePen.

ポリモーフィズムのjs例を参考に継承の形にした。
元クラスのNewsがあり、それを継承したNewsBox、NewsListクラスがある。
それぞれ共通処理はNewsに移し、差分のみをNewsBox、NewsListクラスに残している

いかがでしたでしょうか

と言うわけで、オブジェクト指向の三原則をhtml/css、そしてjsで表現してみました。
よくあるJavaのサンプルコードと比べてとっつきやすく感じていただければ幸いです。