オブジェクトの構築

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 49/56。

深い継承と「has-a」関係の問題を理解したところで、小さく再利用可能なコンポーネントを組み合わせることでオブジェクトを構築する方法を学びましょう。このアプローチにより、最大限の柔軟性が得られます！

基本パターン:

// ステップ 1: 小さく、特化したコンポーネントを作成する
class Engine {
  constructor(power) {
    this.power = power;
  }
  
  start() {
    console.log(`Engine (${this.power}HP) starting...`);
  }
}

class Wheels {
  constructor(count) {
    this.count = count;
  }
  
  rotate() {
    console.log(`${this.count} wheels rotating`);
  }
}

// ステップ 2: コンポーネントを組み合わせてオブジェクトを構築する
class Car {
  constructor(brand, enginePower, wheelCount) {
    this.brand = brand;
    this.engine = new Engine(enginePower);    // エンジンを持っている (HAS-A関係)
    this.wheels = new Wheels(wheelCount);     // ホイールを持っている
  }
  
  drive() {
    console.log(`${this.brand} is driving:`);
    this.engine.start();
    this.wheels.rotate();
  }
}

// ステップ 3: 合成されたオブジェクトを使用する
const myCar = new Car('Toyota', 150, 4);
myCar.drive();
// 出力:
// Toyota is driving:
// Engine (150HP) starting...
// 4 wheels rotating

真の力：コンポーネントの組み合わせ：

// より特化したコンポーネント
class TurboCharger {
  boost() {
    console.log('Turbo engaged! Extra power!');
  }
}

class SoundSystem {
  constructor(type) {
    this.type = type;
  }
  
  playMusic() {
    console.log(`Playing music on ${this.type} sound system`);
  }
}

// さまざまな組み合わせで異なる車を構築する
class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.wheels = new Wheels(4);
    this.turbo = new TurboCharger();      // スポーツカーにはターボが搭載される
    this.soundSystem = new SoundSystem('Premium'); // そして良いサウンドシステムも
  }
  
  raceMode() {
    console.log(`${this.brand} in race mode:`);
    this.engine.start();
    this.turbo.boost();
    this.wheels.rotate();
    console.log('VROOOOM!');
  }
  
  cruise() {
    console.log(`${this.brand} cruising:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}

class EconomyCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(100);
    this.wheels = new Wheels(4);
    // エコノミーカーにはターボはありません
    this.soundSystem = new SoundSystem('Basic'); // 基本的なサウンドのみ
  }
  
  drive() {
    console.log(`${this.brand} driving efficiently:`);
    this.engine.start();
    this.wheels.rotate();
    this.soundSystem.playMusic();
  }
}

// これがどれほど柔軟か見てみましょう！
const ferrari = new SportsCar('Ferrari');
const honda = new EconomyCar('Honda');

ferrari.raceMode();  // ターボブーストを搭載！
ferrari.cruise();    // プレミアムサウンドを搭載！

honda.drive();       // 基本機能のみ

このアプローチにより、複雑な継承チェーンを使用することなく、振る舞いを柔軟に組み合わせるための柔軟性が得られます！

チャレンジ

SmartBulb.js ファイル内の SmartBulb メソッドを完成させてください。

ライトを点灯させるために activate() メソッドを実装してください。
明るさを設定し、正確に Brightness set to ${this.brightness.level}% とログ出力するように adjustBrightness() メソッドを実装してください。

チートシート

オブジェクトは、深い継承を使用する代わりに、小さく再利用可能なコンポーネントを組み合わせることで構築できます。これはコンポジションと呼ばれ、「has-a（〜を持っている）」関係に従います。

基本的なコンポジションのパターン:

// ステップ 1: 小さく、特定の目的に特化したコンポーネントを作成する
class Engine {
  constructor(power) {
    this.power = power;
  }
  
  start() {
    console.log(`Engine (${this.power}HP) starting...`);
  }
}

// ステップ 2: コンポーネントを組み合わせてオブジェクトを構築する
class Car {
  constructor(brand, enginePower) {
    this.brand = brand;
    this.engine = new Engine(enginePower);  // エンジンを持っている (HAS-A)
  }
  
  drive() {
    this.engine.start();
  }
}

柔軟性を高めるためにコンポーネントを組み合わせる:

class TurboCharger {
  boost() {
    console.log('Turbo engaged!');
  }
}

class SportsCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(300);
    this.turbo = new TurboCharger();  // ターボコンポーネントを追加
  }
  
  raceMode() {
    this.engine.start();
    this.turbo.boost();
  }
}

class EconomyCar {
  constructor(brand) {
    this.brand = brand;
    this.engine = new Engine(100);
    // ターボコンポーネントなし
  }
}

コンポジションを使用すると、複雑な継承チェーンを使用せずに、機能のさまざまな組み合わせでオブジェクトを構築できます。

自分で試してみよう

import { SmartBulb } from './SmartBulb.js';

const bedroomLight = new SmartBulb('warm white');

console.log('1. Activating light:');
bedroomLight.activate();

console.log('\n2. Adjusting brightness:');
bedroomLight.adjustBrightness(75);