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と比べて簡単かつ直感的にオブジェクト指向プログラミングが実装できるようになりましたね。最近のフロントエンドフレームワークはオブジェクト指向で書く事が多いので、書き方は理解しておきましょう。では。
The following two tabs change content below.
カナダを拠点に活躍する（予定）デベロッパー。
大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。（写真はラスベガス）
最新記事 by Keid (全て見る)
関連記事
コメントを残す