LoginSignup
6
0

More than 1 year has passed since last update.

TemplateView & TransformView

Last updated at Posted at 2022-12-16

16.TemplateView & TransformView.png

Web アプリケーションにおける Template View は、HTML テンプレートに Domain Model のエンティティ (または Transaction Script のクエリ結果) 群を流し込んで、ページを出力する方法です。多くの Web フレームワークが採用していて、わざわざ改めて説明することはないかもしれません。

Template View パターンを用いる目的は、プログラミングを避けることです。ビューの役目はモデルのデータ表示ですが、そのとき、本質と無関係なプログラムを同じところに混ぜて書くと、余計なことのせいでミスを起こしやすくなります。同時に意識する責務の凝集度が低くするのは、良くないプログラミングですね。本質と無関係なレイアウトの心配は、静的な HTML を書くだけで済むように、テンプレートエンジンを使って済ませるのが賢いやり方です。

Web フロントエンドでも、React は JavaScript の中に XHTML を入れ込んだような、JSX という拡張構文をサポートしました。もともと React は JavaScript だけで仮想 DOM を構築するビュー技術でしたが、レイアウトのためにプログラムコードを保守するのがとても面倒でした。静的な XHTML を書ききって、その中に値やコンポーネントをはめ込んでいく JSX を使えば、サーバーサイドの Template View と全く同じメリットを得られます。MVC は時代を超えて GUI に共通する特徴です。

Template View の弱点は言語構文が単純すぎることです。インラインで書ききれるような、ちょっとしたヘルパー機能を使って、値を表示に適した形式に変換するようなレベルの工夫は推奨されます。しかし、表示のオンオフ程度では済まない、段階的な手続きが必要な判断は実際にあります。JSP や PHP は、テンプレートの中にちょっとしたスクリプトを書くこともできますが、テンプレート構文のディレクティブと埋め込みスクリプトだけで頑張ってしまうと、「賢すぎるビュー」アンチパターンに陥ります。

Template View の弱点を補うために、複雑な事情を持つモデルを扱うときは Transform View を併用します。Transform View は、ひとつの単位データモデルを扱います。内部のプログラムでモデルに自由にアクセスし、プログラム言語のパワーをフルに活用して、最終的にレイアウトで使える部分ビューを得る方法です。得られるものは、HTML の <div>〜</div> ブロックかもしれないし、React 仮想 DOM の構造物かもしれません。

ユーザー入力のバリデーション結果をフィードバックできる Web フォームは、かなり複雑なデータモデルを扱います。要素タイプによって、データをどのような HTML 表現にするか、エラーをどう添えて表示するかが異なります。要素の選択、属性の有無、内部ノードは?、配置は水平か垂直か... テンプレート構文でそんな事情を全て表現する方が難しいですね。割り切って Transform View ブロックとしてプログラミングで暑かった結果だけを利用する方が賢いでしょう。

Web ページには、機能の主題と関係のないビジュアル要素も多く含まれます。ひとつのテンプレートの責務がいくつもの雑多な事情を抱えるのは負担です。主題でないデータモデルの視覚化を隠蔽し、複雑なモデルを変換した結果だけをもらってはめ込むアイデアは、そうした事情の整理にも活用できます。<aside> セクションに、実は中身が案外ややこしいい React コンポーネントを持ってきて、はめ込むだけで済ませるのは楽ですね。

PoEAA 本の解説はサーバーサイドのプレゼンテーションに特化していますが、MVC についての本質的な考え方は、現代の複合的なでも活きてきます。

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0