JavaScript設計パターン(ファザードパターン)

2021-04-18

概要

今回はJavaScriptの設計パターン「ファザードパターン」について解説します。

ファザードパターンって何

大きく複雑なオブジェクト群をひとまとめにして、利用者にそれを意識させないデザインパターン
のことです。

ちなみにfacadeは「(建物の)正面、(しばしば実体よりりっぱな事物の)見かけ、外見」という意味になります。

サンプルコード

以下はアコーディオンをファザードパターンで実装したサンプルコードになります。

複数の処理をひとまとめに

アコーディオンをクリックした時の挙動は、「開く」「閉じる」だけでなく、aria属性も切り替えていきます。
これらをそれぞれで定義していくのは煩雑になる原因になりえます。こちらの関数からこの関数に、と追っていくうちに元の関数の処理内容をわすれる、なんてことがありえます。

ファザードパターンを使用することで、一つの入り口(今回はfacadeオブジェクト)から引数を設定することだけを意識させます。処理はmoduleAccordionで完結させます。

このように複雑な処理を隠蔽し、シンプルなインターフェイスを提供することができます。

モジュールパターンとの併用も多い

ファザードパターン単体である必要はなく、モジュールパターンと併用することもできます。
上記であげた例でもモジュールと組み合わせています。

デメリット

デメリットも存在します。

例えば、複雑な複数の処理をひとまとめにすると、シンプルな入り口なのに中身の動きがとても複雑になっている可能性があります。 これは、もし処理の変更が必要になった場合のメンテナンスが大変になってしまいます。

チームの理解度によっては別パターンであったり、関数の粒度を考えたりする必要があります。
どれにしても、定義する処理の大きさを適度に保つことが重要です。

結論

複雑な処理をまとめ、シンプルな入り口を提供するファザードパターンは、処理を意識せず使用できるパターンになります。
それゆえに中の処理を暗黙に容認していることになり、動作しなくなった際の修正は難しくなっているなんてこともありえます。

適度に粒度を保ち、チーム内でどこまで定義すればわかりやすいのかを考える必要があります。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店