Zenn
Open7

教養としてのオブジェクト指向

TypeScript
OOP
ken7253ken7253

教養としてのオブジェクト指向

書いた理由

後でまとめる。

対象読者

ある程度フロントエンドエンド開発経験がある人向けに書いていきます。

ken7253ken7253

題材にするクラス

https://gist.github.com/ken7253/b59e07ace6c8f4acea77e94498e67693

ken7253ken7253

主な仕様

  • new RGB();でインスタンスを作成できる
  • 初期化時にRGB配列[number, number, number]の配列を受け取る
    • OPT: 初期化時に受け取る配列のnumber型は255以下の自然数でなければならない
    • OPT: 数値が範囲外の場合はErrorをthorwする
    • OPT: 数値に少数が含まれていた場合切り捨てる
  • 作成したインスタンスから下記のプロパティとしてアクセスできる。
    • instance.red : 赤色の値
    • instance.green : 緑色の値
    • instance.bule : 青色の値
  • instance.colorCodeはアクセッサとして機能し下記のような機能を持つ
    • get colorCode() : 現在のRGB値からカラーコードを生成して返却する
    • set colorCode() : カラーコードを文字列として受け取り現在のRGB値に反映する
      • OPT: 受け取ったカラーコードが数値として解釈できない場合Errorをthorwする
      • OPT: 受け取ったカラーコードの数値が範囲外の場合Errorをthorwする
  • RGB配列に入る数値の上限はスタティックプロパティRGB.MAX_COLOR_INTとして取得できる。
ken7253ken7253

classとはなにか

const foo = new Date();

上記のようにnew演算子によってオブジェクトを作成できる機能を持ったもの

ken7253ken7253

フロントエンドエンド、というよりかはWeb制作のコードは基本的に命令的プログラミングからスタートすると思います。

const element = document.getElementById('foo');
console.log(element);

要素を取得して、コンソールに出力してみようというJavaScript学びたてのようなコードであまりイメージが湧かないかもしれませんが、ぱっと見た目でなにをやっているのかが明解です。
初学者にもわかりやすく、非常に小規模であったり運用を考慮する必要のない環境であれば十分にこのようなアプローチでも問題ないでしょう。

ken7253ken7253

コードの量が少ないうちはこのように従来の書き方でも問題が少ないですが、チームでの開発を進めている場合どんどんと機能追加が難しくなり、不要になっている機能も削除できず運用を行えば行うほどバグが発生する可能性が上がりパフォーマンスも落ちていきます。