oop | Casual Developers Note

2018年10月1日 By Keid Leave a Comment

JavaScriptによるオブジェクト指向プログラミング(class編)

ES6からclassシンタックスシュガーが導入され、JavaScriptでのオブジェクト指向プログラミングが分かりやすくなりました。今回はclassを使用したJavaScriptのオブジェクト指向プログラミングの方法を紹介します。

はじめに

前回Prototypeチェーンを使用したJavaScriptのオブジェクト指向プログラミングを紹介しました。今回はES6で導入されたclassシンタックスシュガーを使用したJavaScriptのオブジェクト指向プログラミングの方法を紹介します。

クラスの定義

まずは、classシンタックスシュガーでクラスを定義してみましょう。

class Component {
  constructor(name, props = {}) {
    this.name = name;
    this.props = props;
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  static isComponent(obj) {
    return obj instanceof this;
  }
}

const myComponent = new Component('Component', { color: 'blue' });
console.log(myComponent.toString()); // => name: Component, props: {"color":"blue"}
console.log(Component.isComponent(myComponent)); // => true

この例では、toString関数がいわゆるインスタンスメソッドで、isComponent関数がいわゆるクラスメソッドです。

カプセル化とGetter/Setterの定義

2つの方法があります。

WeakMapを使う方法

WeakMapを使って実装してみましょう。

const _name = new WeakMap();
const _props = new WeakMap();
const _capitalize = new WeakMap();

class Component {
  constructor(name, props = {}) {
    _name.set(this, name);
    _props.set(this, props);

    _capitalize.set(this, letter => letter.toUpperCase());
  }

  get name() {
    return _name.get(this);
  }

  get props() {
    return _props.get(this);
  }

  set props(props) {
    _props.set(this, props);
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${_capitalize.get(this)(this.name)}!!`);
  }
}

const myComponent = new Component('Component', { color: 'blue' });
console.log(myComponent.toString()); // => name: Component, props: {"color":"blue"}
myComponent.name = 'Not Changed'; // 変更されない
myComponent.props = { color: 'green' };
console.log(myComponent.toString()); // => name: Component, props: {"color":"green"}
myComponent.shoutName(); // => COMPONENT!!

この例では、nameプロパティはSetterが無いため値を変更できません。一方で、propsプロパティはGetter/Setterが両方あるため、変更も取得もできます。

Symbolを使う方法

Symbolを使って実装しましょう。

const _name = Symbol();
const _props = Symbol();
const _capitalize = Symbol();

class Component {
  constructor(name, props = {}) {
    this[_name] = name;
    this[_props] = props;
  }

  [_capitalize](letter) {
    return letter.toUpperCase();
  }

  get name() {
    return this[_name];
  }

  get props() {
    return this[_props];
  }

  set props(props) {
    this[_props] = props;
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${this[_capitalize](this[_name])}!!`);
  }
}

const myComponent = new Component('Component', { color: 'blue' });
console.log(myComponent.toString()); // => name: Component, props: {"color":"blue"}
myComponent.name = 'Not Changed'; // 変更されない
myComponent.props = { color: 'green' };
console.log(myComponent.toString()); // => name: Component, props: {"color":"green"}
myComponent.shoutName(); // => COMPONENT!!

この例でも先程と同じく、nameプロパティはSetterが無いため値を変更できません。一方で、propsプロパティはGetter/Setterが両方あるため、変更も取得もできます。

継承とポリモーフィズム

継承

extendsを使って実装できます。

const _name = new WeakMap();
const _props = new WeakMap();
const _capitalize = new WeakMap();

class Component {
  constructor(name, props = {}) {
    _name.set(this, name);
    _props.set(this, props);

    _capitalize.set(this, letter => letter.toUpperCase());
  }

  get name() {
    return _name.get(this);
  }

  get props() {
    return _props.get(this);
  }

  set props(props) {
    _props.set(this, props);
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${_capitalize.get(this)(this.name)}!!`);
  }
}

const _children = new WeakMap();

class Welcome extends Component {
  constructor(props, children) {
    super('Welcome', props);
    _children.set(this, children);
  }

  render() {
    return `<h1>${_children.get(this)}</h1>`;
  }
}

const welcome = new Welcome({ color: 'orange' }, 'Welcome to here!');
console.log(welcome.toString()); // => name: Welcome, props: {"color":"orange"}
welcome.shoutName(); // => WELCOME!!
console.log(welcome.render()); // => <h1>Welcome to here!</h1>

ポリモーフィズム

続いて、ポリモーフィズムを実装してみましょう。

const _name = new WeakMap();
const _props = new WeakMap();
const _capitalize = new WeakMap();

class Component {
  constructor(name, props = {}) {
    _name.set(this, name);
    _props.set(this, props);

    _capitalize.set(this, letter => letter.toUpperCase());
  }

  get name() {
    return _name.get(this);
  }

  get props() {
    return _props.get(this);
  }

  set props(props) {
    _props.set(this, props);
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${_capitalize.get(this)(this.name)}!!`);
  }
}

const _children = new WeakMap();

class Title extends Component {
  constructor(props, children) {
    super('Title', props);
    _children.set(this, children);
  }

  render() {
    return `<h1>${_children.get(this)}</h1>`;
  }
}

const _children2 = new WeakMap();

class Paragraph extends Component {
  constructor(props, children) {
    super('Paragraph', props);
    _children2.set(this, children);
  }

  render() {
    return `<p>${_children2.get(this)}</p>`;
  }
}

const title = new Title({ color: 'orange' }, 'What is OOP?');
const paragraph = new Paragraph({ color: 'black' }, 'The OOP means an object oriented programming.');

const components = [title, paragraph];
components.forEach(component => console.log(component.render()));
// => <h1>What is OOP?</h1>
// => <p>The OOP means an object oriented programming.</p>

最後に

いかがでしたか？classシンタックスのおかげでprototypeと比べて簡単かつ直感的にオブジェクト指向プログラミングが実装できるようになりましたね。最近のフロントエンドフレームワークはオブジェクト指向で書く事が多いので、書き方は理解しておきましょう。では。

2018年9月24日 By Keid Leave a Comment

JavaScriptによるオブジェクト指向プログラミング(Prototype編)

JavaScriptが人気になっている昨今、他のプログラミング言語を使っていたエンジニアがこぞってJavaScriptを使い始めています。その際にオブジェクト指向でプログラミングをしようとするのですが、JavaScriptは勝手が違うため苦戦することが多いでしょう。今回は、他のプログラミング言語からJavaScriptに移動してきた人向けに、JavaScriptによるオブジェクト指向プログラミングの方法を紹介します。

はじめに

JavaScriptはJavaやC#などのメジャーなプログラミング言語と異なり、Classベースのオブジェクトを定義するのではなく、Prototypeベースのオブジェクトを定義してオブジェクト指向プログラミングを行います。ES6からはこの混乱を避けるためかclassというシンタックスシュガーが登場していますが、Prototypeベースであることに変わりはありません。今回は、JavaScriptのPrototypeベースのオブジェクト指向プログラミングの方法を紹介します。

オブジェクトの定義

JavaScriptでのオブジェクトの定義方法は2種類あります。

オブジェクトを使った定義

const component = {
  name: 'Component',
  props: {},
  print() {
    console.log('name: ', this.name, ', props: ', this.props);
  },
};

component.props = { type: 'Object' };
component.print(); // => name:  Component , props:  { type: 'Object' }

関数を使った定義

function Component() {
  this.name = 'Component';
  this.props = {};

  this.print = function () {
    console.log('name: ', this.name, ', props: ', this.props);
  };
}

const component = new Component();
component.props = { type: 'Function' };
component.print(); // => name:  Component , props:  { type: 'Function' }

カプセル化とGetter/Setterの定義

オブジェクト指向プログラミングにおいて、プロパティ(フィールド)をカプセル化し、不用意なデータ変更を防ぐことは重要な考え方です。Object.definePropertyを使ってプロパティのカプセル化およびGetter/Setterを実現してみましょう。

function Component(initialName) {
  const name = initialName;
  let props = {};

  Object.defineProperty(this, 'name', {
    get() { return name; },
  });

  Object.defineProperty(this, 'props', {
    get() { return props; },
    set(value) { props = value; },
  });
}
Component.prototype.print = function () {
  console.log('name: ', this.name, ', props: ', this.props);
};

const component = new Component('Component');
component.name = 'Not Changed'; // 変更されない
component.props = { type: 'Function' };
component.print(); // => name:  Component , props:  { type: 'Function' }

この例では、nameプロパティはSetterが無いため値を変更できません。一方で、propsプロパティはGetter/Setterが両方あるため、変更も取得もできます。

継承とポリモーフィズム

継承用の関数

まず、Object.createを使った継承用の関数を用意します。

function extend(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

継承

では、継承してみましょう。

function Component(name, props = {}) {
  this.name = name;
  this.props = props;

  this.print = function () {
    console.log('name: ', this.name);
    console.log('props: ', this.props);
  };
}

function Welcome(name, props) {
  Component.call(this, name, props);

  this.render = function () {
    console.log('<h1>Welcome</h1>');
  };
}
extend(Welcome, Component);

const component = new Component('Component', { type: 'Super' });
component.print(); // => name:  Component , props:  { type: 'Super' }
const welcome = new Welcome('Welcome', { type: 'Sub' });
welcome.print(); // => name:  Welcome , props:  { type: 'Sub' }
welcome.render(); // => <h1>Welcome</h1>

ポリモーフィズム

続いて、オブジェクト指向の醍醐味であるポリモーフィズムを実現してみましょう。

function Component(name, props = {}) {
  this.name = name;
  this.props = props;

  this.print = function () {
    console.log('name: ', this.name, ', props: ', this.props);
  };
}

function Title(name, props, children) {
  Component.call(this, name, props);

  this.render = function () {
    console.log(`<h1>${children}</h1>`);
  };
}
extend(Title, Component);

function Paragraph(name, props, children) {
  Component.call(this, name, props);

  this.render = function () {
    console.log(`<p>${children}</p>`);
  };
}
extend(Paragraph, Component);

const components = [
  new Title('Title', { type: 'Title Component' }, 'Good Title'),
  new Paragraph('Paragraph', { type: 'Paragraph Component' }, 'This is a paragraph.'),
];

components.forEach(component => component.render());
// => <h1>Good Title</h1>
// => <p>This is a paragraph.</p>

この例では、TitleオブジェクトとParagraphオブジェクトをComponentオブジェクトとして同一に扱っています。

おまけ(Mixin)

Mixinの関数

Object.assignを使ってMixin用の関数を用意します。

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

Mixin

では、オブジェクトに関数をMixinしてみましょう。

const canDrive = {
  drive() {
    console.log('Driving...');
  },
};

const canFly = {
  fly() {
    console.log('Flying...');
  },
};

function FlyingCar() {
}
mixin(FlyingCar.prototype, canDrive, canFly);

const flyingCar = new FlyingCar();

console.log(flyingCar.drive());
// => Driving...
// => undefined
console.log(flyingCar.fly());
// => Flying...
// => undefined

最後に

いかがでしたか？JavaScriptには独特の癖がありますが、オブジェクト指向を実現することは可能です。では。

2018年6月15日 By Keid Leave a Comment

オブジェクト指向の基本原則「SOLID Principles」からプログラミングの基本を学ぶ

初心者が何の指針も無しにプログラミングすることは、目隠しをした状態で吊橋を渡るようなものです。今回はそんな事にならないように、プログラミング初心者向けに、オブジェクト指向によるプログラミングの基本原則「SOLID Principles」を紹介します。

はじめに

プログラミングを始めたばかりというのはだいたい目の前しか見えていません。目の前の小さな問題解決で一杯一杯なので、そのソースコードが将来誰に読まれたり、どのように運用されたり、どのように拡張されたりなんてことは全く見えていないでしょう。そのまま進めていくと、後で気づいたら悲惨な技術的負債の山が出来上がっているかもしれません。

では、どうすればよいのでしょうか？簡単です。先人の知恵に従えばよいのです。いわゆるベストプラクティスを学ぶ事です。今回はオブジェクト指向でプログラミングをしたことがある経験者なら誰でも知っている基本原則「SOLID Principles」を噛み砕いて紹介します。

基本原則「SOLID Principles」

Single Responsibility Principle

最も有名な原則で、日本語では「単一責任の原則」や「単一責務の原則」などと表現されます。

これは「モジュールやクラスは単一の機能に対して責任を持たせるべき。」という原則です。別の言い方をすると、一つのクラスに関係の無い機能を沢山持たせずに、そのクラスが果たすべき責務に応じた機能だけを持たせなさい、と言うことになります。

メリットは、関係の無い機能間で影響が少なくなるので(いわゆる疎結合)、ロバスト性(他の機能を変更した時に関係の無い機能まで意図せずに変更しなければならない状況を避けること)を高めることができることです。さらに、この原則で書かれたソースコードはシンプルなクラスになるので読みやすいというメリットもあります。

Open / Closed Principle

これは「ソフトウェアのエンティティは拡張のためにオープンされ、変更のためにクローズドされるべき。」という原則です。別の言い方とすると、仕様変更が起きても修正する必要のないソースコードを書き(クローズド)、機能追加のために拡張できるソースコードを書くべき(オープン)と言うことになります。

それをどうやって実現するのかと言うと、オブジェクト指向では当たり前の「クラス継承」や「インターフェース実装」を利用したポリモルフィズムを実現することです。

このメリットは、やはりロバスト性が高まることと、既存機能への仕様変更の影響を少なくすることです。つまり、仕様変更や機能追加が簡単になるということです。

例えば、ある銀行の残高照会のAPIを使って会計簿を作るアプリを作るとします。その時、銀行を表すインターフェースを作った上でそれを実装した特定の銀行を表すクラスを作ったとします。すると、その銀行がAPIの仕様を変更したとしても、インターフェース経由でその機能を利用している他のクラスは変更する必要がありません(クローズド)。さらに、対応する銀行を増やす機能追加をする場合も、同じインターフェースを実装して作れば良いので拡張は容易です(オープン)。

Liskov Substitution Principle

これは「もしT型クラスのサブクラスとしてS型を定義した時、T型のオブジェクトはS型のオブジェクトと交換可能にすべき。」という原則です。別の言い方をすると、この原則を維持するには、親クラスを継承した子クラスがあり、子クラスが親クラスのメソッドをオーバーライドしている場合、オーバーライドしたメソッドに関して、引数となる型にはより抽象度の高い型を使うことができ、戻り値となる型には継承された型を使うことができます。

メリットは、ソースコード間の疎結合を促し、再利用性やメンテナス性を高めることです。

言葉で考えるとややこしいのですが、実はこれはJavaやC#などの主要なオブジェクト指向言語では自動的に満たされるため、クラス継承やインターフェース実装を行っていれば、意識せずに実現できます。C++などのかなり昔にできた言語はこの原則を満たすように意識してプログラミングする必要がありました。こういった原則の元となる文献はC++をベースに考えられていることが多く、その当時の状況を反映している原則だと言えます。

Interface Segregation Principle

これは「使用しないメソッド郡に依存するようなクライアントがあってはならない。インターフェースが多すぎるメソッド郡を持っている場合、そのメソッド郡を小さく具体的に分割することで、クライアントが関心のあるメソッドのみを持つようにすべき。」という原則です。別の言い方をすると、親クラスに沢山のメソッドを持たせると、それを継承した子クラスが不要なメソッドを持つ事になってしまうので、親クラスは共通的なメソッドのみを持つようにし、子クラスが必要なメソッドだけを持つようにすべきと言うことです。

メリットは、疎結合を促し、変更を容易にし、メンテナンス性を高めることができます。

デメリットとしては、複雑なアプリケーションの場合に、小さいメソッドが多すぎると、管理が難しくなるという問題があります。適切なさじ加減が腕の見せどころです。

Dependency Inversion Principle

これは「高レベルのモジュールは低レベルのモジュールに依存すべきでなく、間に抽象を挟むべき。抽象は詳細に依存すべきではなく、詳細が抽象に依存すべき。」という原則です。別の言い方をすると、ある具体的な処理をするクラス(低レベルのモジュール)があり、それを利用するクラス(高レベルのモジュール)がある場合、低レベルのクラスを抽象化したクラスもしくはインターフェースを用意し、高レベルのクラスはその抽象化したクラスもしくはインターフェースを経由して、低レベルのクラスを利用するように実装すべきと言うことです。

メリットは、高レベルのモジュールと低レベルのモジュールの間に抽象化するインターフェースを挟んでいるので、それらのモジュールは疎結合になり、メンテナンス性は向上します。

デメリットして、不必要に抽象化を行うと、無駄なインターフェースを量産することにつながり、ソースコードを複雑化してメンテナンス性を落とす結果になります。この抽象化が必要かどうかを見極めて適切に適用することが腕の見せどころです。

最後に

いかがでしたか？基本原則と言うのは意識せずに実行できるレベルになっている事が望ましいです。私の場合はこれらの基本原則はある程度プログラミングができるようになってから知ったのですが、全て当たり前だなと思ったのを覚えています。オブジェクト指向プログラミングをマスターしている人は何も考えずに行っていることだからです。これからオブジェクト指向プログラミングを身につけたいと思っている人は、この基本原則を意識して体に染み込ませましょう。では。