テンプレートとは独自のMVC 構造を持つ処理系である

お前はいったい何を言ってるんだ？

はじめに

私がこの事に気がついたのは 自分の Web サイト を Hugo で構築していた際に、テンプレートそれ自体が複雑怪奇になるの防ぐために使っていたテクニックが、

あれ、これ MVC（Model-View-Controller） じゃね？

と気が付いたのがきっかけでした。

そしてこの事は 広く知られた方がより良いテンプレート実装につながる と思ったのと、あと実際に この考えに基づいて実装したテンプレートは複雑怪奇にならなかった ので、今回はその辺りのことを順を追って解説したいと思います。

テンプレートとはただデータを流し込む View ではない

最初に順を追って説明して行くと、まず Web Application におけるテンプレートとは、

ただ データを流し込んで表示するための View である

と捉えがちなのですが、実際にはこれは異なっています。

特にこれは Hugo などの Static Site Generator などで顕著だと思われるのですが、Static Site Generator や普通の Web Application などの テンプレートは、実際には次の様な要素を含んでいます：

1. サーバやページなどの内部状態による 表示内容の分岐
2. テンプレート内部での 新たなデータ構造の生成
3. テンプレートに渡された 変数などの単純な流し込み

そして具体例としては （1）は ログイン状態に依るナビゲーションメニューでのリンクを if 文で切り替える こと、（2）に関しては テンプレートで JSON-LD を記述する と言った事、 （3）に関してはシンプルに テンプレート変数で渡されたデータをただ流し込むこと などが上げられます。

そしてここまでで述べたことで勘が良い方は気づかれるかもしれませんが、先程上げた三つの例の内、 純粋な View と言えるのは（3）だけ で、（1）に関しては データに基く表示の分岐 である 情報表示のための Controller の要素 が、（2）に関しては テンプレートに渡されたデータから新たな別のデータを生成する などの Model の要素 がそれぞれ含まれています。

つまりこれらの事を総合すると、

テンプレートとは 単なるデータ表示のための View

ではなく、実際には、

テンプレートとは独自の MVC 構造を持つ独立した処理系である

と私は考えています。

テンプレートの実装が複雑怪奇となる本当の理由

さてここまでで私の言いたいことはほぼすべて言い切ったのですが、実際にこの考えに基くと 何故、テンプレートが複雑怪奇になるのか？ と言うのが見えてくると思います。

私たち開発者は、特に一人で Web Application を実装していると、

テンプレートってだたの View じゃろ

と油断して 色々な要素を詰め込んで実装しがち であると私は考えていますが、これこそが テンプレートが複雑怪奇になる原因で、最近ではこの話をあまり聞かないものの、これはかつて Controller にあれこれと詰めすぎた Fat Controller などと呼称される、 MVC 構造がキチンと分離されてない問題そのもの である、と私は考えています。

また Fat Controller は メンテナンス性や拡張性の低下が問題視されていた のですが、 テンプレートで Fat Controller を作り込んでいる と言う事は、まさにこの手の問題を テンプレートに招き入れていることそのもの ですし、こう言った 隠れた要因がテンプレートの実装を難しくしている原因 だと思われます。

そのため私は上記の事が テンプレートが元となる Web Application とは別の独立した処理系 と言える証拠であり、この事柄こそ テンプレートの実装 と言う行為が、元の Web Application とは異なった、サーバ上のデータを表示する独自の Application を実装することだ と考えています。

複雑なテンプレートに立ち向かうためにすべきこと

まずこれは今回の記事で述べてきた様に、

テンプレートとは独自の MVC 構造を持つ独立した処理系である

と認識することが最初の一歩であり、次にすべきこととしては、

1. テンプレート内での条件分岐を極力シンプルに保てる様にテンプレートを分ける
2. テンプレート内で新たなデータ構造を生成する場合にも適宜テンプレートを分ける
3. テンプレートの出力結果に対してテストをキチンと書く

と言った辺りです。

つまり私たち開発者が テンプレートのメンテナンス性を下げてしまう事を防ぐ には、普段から Server-side や Client-side の開発で行っている ような、適切な粒度でのファイル分けやテストの記述 と言った様なことを テンプレート実装に際しても同じ様に行う ことが必要になる、と私は考えています。

また上記の意識してテンプレート実装を行うことは ベースとなる Web Application の構造を綺麗に保つことに繋がる と思いますし、テンプレート実装で MVC を意識した知見を貯める ことで、 よりメンテナンスが行ないやすい Application を実装できる様になるのではないか、 とも私は考えています。

と言う事で今回の話は以上です

今回の話は短かいワリには書くのに結構苦戦したんですが、まぁそれは良いとして今回の話は自分の中ではかなり有益な気づきで、この考えを無意識に行っていた結果、 Hugo のテンプレートが複雑怪奇になるのを防いでいたんだなーと思う次第です。

また私は最近 自分の Web サイト の改修作業をしているのですが、今回この記事を書くことによって自分の考えがより整理された感があるので、この知見をより生かして自分の Web サイトを改修できたらいいなーと思ってます。とは言え私の Web サイトはアクセス数が少ないんですけどね。色々と引っ越したりなんだかんだしてたらアクセスが激減したって言う。

まぁそんな感じで今回の知見が他の方に生かされると私としては幸いです。はい。

更新履歴

• 2020-10-08: 表現を微調整
• 2020-10-08: 初版