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には独特の癖がありますが、オブジェクト指向を実現することは可能です。では。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

最新記事 by KD (全て見る)

• 2020年JS周辺のバックエンド寄りの注目技術！ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
• 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
• ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日