第二回 Typescriptでデザインパターン: Bridge Pattern

第二回はBridge Patternを実装してみます。

Bridge Patternとは

Bridge Patternは機能と実装を分け、それらを「橋渡し」する事で設計の柔軟性を確保する為のパターンです。
Bridge パターン Wikipedia

Bridge Patternを実装するには

TypescriptでのBridge Patternの実装はinterfaceと抽象クラスが必要となります。Typescriptでは抽象クラスがありません。今回は以下の様な実装にして擬似的に抽象クラス的なものを実現しています。

class Pattern{
  //略
  draw(canvas:HTMLCanvasElement){
    throw new Error("not yet implemented.");
  }
}

Patternをインスタンス化してdrawを呼ぶと死にます。この実装の場合実行時にエラーを吐く事になるので、コンパイル時に型チェックなどをするTypescriptの恩恵を受けられません。

Bridge Patternの実装

何を作るか

図形を描画するShapeと、Shapeをルールにしたがって動かすPatternを作ってみます。
今回Shapeは四角形と円にしました。
Patternは左右移動とランダム移動を作りました。

ソースはこちら
https://gist.github.com/4494073

動作は以下。

Bridgeパターンの何がおいしいか

この図形描画の機能に、図形を追加したい場合どうすればよいでしょうか?簡単ですね。Shapeをimplementsしたクラスを作れば良いです。Pattern側には何も影響を与えません。Pattern側も同様に、動きのバリエーションを増やす時、Shapeの事を考えなくて済みます。「橋渡し」の仕組みによって互いに疎である事を実現していますね。

終わりに

今回もTypescriptのクラス、インタフェースの仕組みによって自然と設計、実装が出来ました。可読性の面でも、jsにコンパイルされた方はprototypeとか__extendsとか色々余計なキーワードが出てきてややこしく感じます。Typescriptの方はclassの定義や継承関係などもはっきり書かれていて簡潔なため読みやすいです。

また、仕様を変更した時にコンパイルエラーによって事前にエラーを何度か発見する事が出来ました。昔はalertやconsole.logやらChomeのDeveloper Toolsなどで実行しながら挙動を追う事をしていました。Typescriptならコンパイルの際に色々と検査してくれるので凄く助かります。

次回はComposite Patternを実装してみたいと思います。