Help us understand the problem. What is going on with this article?

劇的ビフォ◯アフターで学ぶデザインパターン〜facade pattern〜

More than 1 year has passed since last update.

20170806-00074217-roupeiro-000-11-view.jpg

カレーを作るクラスを考える

玉ねぎきって、

じゃがいもをむいて切って、

カレールーをとかす。

そんな料理を実現するクラス群を作って考えてみます。

before

まずはfacade patternを使わずに書いてみます。

ソースコード

class Onion {
    cut() {
        console.log('玉ねぎが刻まれました');
    }
}
class Potato {
    peel() {
        console.log('じゃがいもの皮をむきました');
    }
    cut() {
        console.log('じゃがいものをきりました');        
    }
}
class CurryBase {
    dissolve() {
        console.log('ルーを溶かしました');
    }
}

class Main {
    static cookingStart() {

        /** 玉ねぎ2個を刻む */
        const onion1 = new Onion();
        onion1.cut();
        const onion2 = new Onion();
        onion2.cut();

        /** じゃがいも2個を剥いて切る */
        const potato1 = new Potato();
        potato1.peel();
        potato1.cut();
        const potato2 = new Potato();
        potato2.peel();
        potato2.cut();

        /** カレーのルーを溶かす */
        const curryBase = new CurryBase();
        curryBase.dissolve();
    }
}
Main.cookingStart();

クラス図

画面全体 (4).png

これを見ると、

使う側のクラス(Mainクラス)が

使われる側のクラスを3つも知っていることになります。

使う側と使われる側の依存性が高いといえます。

この場合、使われる側のクラスのメソッド名などを修正した際、

使う側のクラスも修正しなくてはいけません。

after

今度はfacade patternを使って書いてみます。

ソースコード

class Onion {
    cut() {
        console.log('玉ねぎが刻まれました');
    }
}
class Potato {
    peel() {
        console.log('じゃがいもの皮をむきました');
    }
    cut() {
        console.log('じゃがいものをきりました');        
    }
}
class CurryBase {
    dissolve() {
        console.log('ルーを溶かしました');
    }
}

class Chef {
    cook() {

        /** 玉ねぎ2個を刻む */
        const onion1 = new Onion();
        onion1.cut();
        const onion2 = new Onion();
        onion2.cut();

        /** じゃがいも2個を剥いて切る */
        const potato1 = new Potato();
        potato1.peel();
        potato1.cut();
        const potato2 = new Potato();
        potato2.peel();
        potato2.cut();

        /** カレーのルーを溶かす */
        const curryBase = new CurryBase();
        curryBase.dissolve();        
    }
}

class Main {
    static cookingStart() {
        const chef = new Chef();
        chef.cook();
    }
}

Main.cookingStart();

クラス図

画面全体 (5).png

なんということでしょう。

先ほどMainクラスは3つのクラスのことを知っている必要がありましたが、

今は1つ(Chefクラス)だけ知っていればOKとなりました。

匠(facade)のお陰で随分疎結合な設計となりました。

PotatoやCurryBase等のクラスのメソッド名などを修正しても、

使う側のクラス(Main)は修正する必要はありません。

すばらしいですね。

まとめ

facade patternは、

使う側と使われる側を疎結合にする

デザインパターンでした。

そうすることにより、

クラス修正による影響を使う側がうけないので、

修正に対して強くなります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away