CodeGym /Javaコース /Frontend SELF JA /ミキシンとコンポジション

ミキシンとコンポジション

Frontend SELF JA
レベル 40 , レッスン 4
使用可能

11.1 ミキシン

ミキシンとコンポジションは、JavaScriptのコードを整理して再利用するための強力なツールだよ。 これらは古典的な継承に代わるアプローチを提供して、柔軟でモジュール化されたシステムを作るのに役立つんだ。

ミキシンっていうのは、継承を使わずにクラスに機能を追加するためのコード再利用の方法だよ。ミキシンはメソッドとプロパティを含むオブジェクトで、他のクラスやオブジェクトにコピーできるんだ。

ミキシンの使用例:

JavaScript
    
      const CanEat = {
        eat() {
          console.log('Eating...');
        }
      };

      const CanWalk = {
        walk() {
          console.log('Walking...');
        }
      };

      class Person {
        constructor(name) {
          this.name = name;
        }
      }

      // ミキシンからメソッドをクラスのプロトタイプにコピーする
      Object.assign(Person.prototype, CanEat, CanWalk);

      const person = new Person('John');

      person.eat();  // 出力: Eating...
      person.walk(); // 出力: Walking...
    
  

ミキシンの利点:

  1. コードの再利用: ミキシンを使えば、クラス間で共通のメソッドやプロパティを簡単に共有できるよ。
  2. 柔軟性: どのミキシンをクラスに適用するか選べるから、より柔軟なコード構成ができるんだ。
  3. 継承の制約を回避: 複雑な継承の階層を作らずに機能を追加できるよ。

ミキシンの問題点:

  1. 名前の競合: 複数のミキシンを組み合わせると、メソッドやプロパティの名前が競合することがあるんだ。
  2. 構造が見えにくくなる: ミキシンを使うと、クラスの構造がわかりにくくなって、コードの保守が難しくなることもあるよ。

11.2 コンポジション

コンポジションは、複数のオブジェクトや関数を組み合わせて、より複雑な振る舞いを形成するアプローチだよ。コンポジションを使えば、小さくて独立したモジュールからシステムを構築できて、コードが柔軟で拡張しやすくなるんだ。

例1: 関数のコンポジション

JavaScript
    
      function canEat(obj) {
        obj.eat = function() {
          console.log('Eating...');
        };
      }

      function canWalk(obj) {
        obj.walk = function() {
          console.log('Walking...');
        };
      }

      function Person(name) {
        this.name = name;
      }

      const person = new Person('John');
      canEat(person);
      canWalk(person);

      person.eat();  // 出力: Eating...
      person.walk(); // 出力: Walking...
    
  

例2: クラスを使ったコンポジション

JavaScript
    
      class CanEat {
        eat() {
          console.log('Eating...');
        }
      }
      
      class CanWalk {
        walk() {
          console.log('Walking...');
        }
      }
      
      class Person {
        constructor(name) {
          this.name = name;
          // CanEatとCanWalkのインスタンスを作成
          this.eater = new CanEat();
          this.walker = new CanWalk();
        }
      
        // メソッドを対応するインスタンスに委譲
        eat() {
          this.eater.eat();
        }
      
        walk() {
          this.walker.walk();
        }
      }
      
      const person = new Person('John');
      
      person.eat();  // 出力: Eating...
      person.walk(); // 出力: Walking...
    
  

コンポジションの利点:

  1. 柔軟性: さまざまな振る舞いを簡単に組み合わせて、異なるコンテキストで再利用できるよ。
  2. モジュール性: 小さくて独立したモジュールを作るのに貢献し、テストやコードの保守が楽になるんだ。
  3. 継承の問題を回避: 深いクラス階層や多重継承に関連する問題を避けられるよ。

コンポジションの問題点:

  1. 実装の複雑さ: 機能を統合するために、より複雑なロジックが必要になることがあるんだ。
  2. コードの冗長性: 場合によっては、メソッドやプロパティを明示的に組み合わせる必要があるため、コードが冗長になることもあるよ。

11.3 ミキシンとコンポジションの比較

ミキシン:

  • 複数のクラスに機能を追加するのが簡単
  • 名前の競合や構造がわかりにくくなることがある

コンポジション:

  • より柔軟でモジュール化されている
  • 継承に関連する問題を避けられるが、実装や保守が難しいこともある
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION