JavaScriptデザインパターンを学ぶ 第2版

第8章. JavaScriptのMV*パターン

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

オブジェクト設計とアプリケーションアーキテクチャは、アプリケーション設計の2つのプリンシパルである。前章では、前者に関連するパターンを取り上げた。この章では、3つの基本的なアーキテクチャパターンを復習する：MVC（Model-View-Controller）、MVP（Model-View-Presenter）、そしてMVVM（Model-View-ViewModel）だ。過去には、これらのパターンはデスクトップやサーバ側のアプリケーションを構造化するために多用されていた。今ではJavaScriptにも適応されている。

現在これらのパターンを使っているJavaScript開発者のほとんどは、MVC/MV*のような構造を実装するために様々なライブラリやフレームワークを利用することを選択しているため、これらのパターンを古典的なものと比較して、これらのソリューションがMVCの解釈においてどのように異なるかを比較する。

注

MVC/MVVMをベースとした最新のブラウザベースのUIデザインフレームワークの多くでは、モデルレイヤーとビューレイヤーを簡単に見分けることができる。しかし、第3のコンポーネントは名前も関数も異なる。したがって、MV*の*は、異なるフレームワークで第3のコンポーネントがどのような形をとるかを表している。

車々間通信

MVCは、関心事の分離を通じてアプリケーションの構成改善を促すアーキテクチャ・デザインパターンである。ビジネスデータ（モデル）とUI（ビュー）を分離し、第3のコンポーネント（コントローラ）が伝統的にロジックとユーザ入力を管理する。 Trygve Reenskaugが Smalltalk-80（1979年）に取り組んでいたときに初期化したパターンで、当初はModel-View-Controller-Editorと呼ばれていた。MVCは後に1995年のデザインパターンで詳しく説明された：Elements of Reusable Object-Oriented Software（再利用可能なオブジェクト指向ソフトウェアの要素）」（別名「GoF」本）で詳しく説明され、MVCの普及に一役買った。

スモールトーク80 MVC

オリジナルのMVCパターンが何を解決しようとしていたのかを理解することは不可欠だ。なぜなら、MVCパターンはその起源以来、かなり大きく変化してきたからだ。1970年代、GUIはほとんど存在しなかった。セパレーテッド・プレゼンテーション（Separated Presentation）という概念は、現実世界のアイデアをモデル化したドメイン・オブジェクト（例えば、写真や人物）と、ユーザのスクリーンにレンダリングされるプレゼンテーション・オブジェクトを明確に分ける手段として有名になった。

Smalltalk-80のMVC実装はこの概念をさらに進め、アプリケーション・ロジックをUIから分離することを目指した。アプリケーションのこれらの部分を切り離すことで、アプリケーションの他のインタフェースにモデルを再利用することも可能になるという考えだ。Smalltalk-80のMVCアーキテクチャには、注目に値する興味深い点がいくつかある：

• モデルはドメイン固有のデータを表し、UI（ビューとコントローラ）には無関心だった。モデルが変更されると、モデルはそのオブザーバーに通知する。 ...