ステップアップのためのJavascriptデザインパターン入門(1)

ステップアップのためのJavascriptデザインパターン入門(1)

普段Javascriptをよく書いているのですが、設計が今の自分の弱点だなぁと思い、
積読になっていた JavaScriptデザインパターン – オライリー・ジャパン を引っ張りだして勉強したことを紹介していきます。

内容に関して何か間違いや問題があったらご指摘ください。

デザインパターンとは

デザインパターン – wikipedia

“ソフトウェア開発におけるデザインパターン(型紙(かたがみ)または設計パターン、英: design pattern)とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。”

デザインパターンというのは、テンプレートの様なものと考えるとわかりやすいかもしれませんね。
また、Javascriptデザインパターンでは次のように提唱されています。

  • パターンは実績のある解決策である。
  • パターンは簡単に再利用できる。
  • パターンは表現力が豊かである。

但し、パターンは枠組みを定義するものであって、根本的な解決策ではないということを知っておかなければなりません。

デザインパターンを導入することは何が良いの?

デザインパターンを利用する場合、次の様な利点があります。

  • パターンを再利用することによって、大問題に発展する可能性のある小さな問題を未然に防ぐ。
  • パターンは一般化された解決策であるため、1つの問題に限らず、さまざまな問題に幅広く応用できる。
  • パターンを利用すると、繰り返しを防ぐことでコード全体量を減らせる場合がある。
  • パターンがもたらす語彙によって開発者のコミュニケーションが円滑になる。
  • 使用頻度の高いパターンは、そのパターンを使用した開発者たちの経験をフィードバックさせることで改良できる。
  • 素敵なスパゲッティコードを書く機会が減る。

これらはJavascriptだけではなく、プログラミング言語にデザインパターンを用いる場合に共通して言えることです。

デザインパターンの種類

デザインパターンは数多くの種類がありますが、大きく分けると次の様に分けることができます。

  • 生成に関するデザインパターン
  • 構造に関するデザインパターン
  • 振る舞いに関するデザインパターン

それぞれ詳しく見て行きましょう。

生成に関するデザインパターン

オブジェクトを作成する仕組みについて着目します。
主なパターンは、コンストラクタ、ファクトリ、アブストラクト、プロトタイプ、シングルトン、ビルダーなど。

構造に関するデザインパターン

オブジェクト間の関係性をわかりやすくするために使われます。
主なパターンは、デコレータ、ファサード、フライウェイト、アダプタ、プロキシなど。

振る舞いに関するデザインパターン

システム内の異なるオブジェクト間の通信を改善し簡素化することに着目します。
主なパターンは、イテレータ、メディエータ、オブザーバ、ビジターなど。

 

少し駆け足でしたが、次回以降それぞれのデザインパターンを個別に見ていきます。

[aside type=”boader”]

ステップアップのためのJavaScriptデザインパターン入門」記事一覧

[/aside]

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.