pyてよn日記

一寸先は闇が人生

テンプレートエンジンとは何か？

Web アプリケーション テンプレートエンジン

　先日，Twitter で以下のようなことを呟きました．

　Web アプリケーションの構成・設計に関することで頭の中でごちゃごちゃになっていました．「プログラミング始めたての頃は Rails，Rails ばっか流れてきてた．最近はなんで『Web フレームワークはバックエンドで API を実装するため（だけ）のもので，フロントエンドと分けて実装する』という風潮があるの？」という疑問がずっと拭えず，かなりもやもやとしていました（この疑問はまだ解決していません）．

　そこで改めてそれぞれの利点をちゃんと理解しようと思い，手始めにテンプレートエンジンとは何か簡単に調べてみました．

テンプレートエンジンとは？

　テンプレートエンジンとは，

  • テンプレートと呼ばれる雛形
  • データモデル

を合成し，成果ドキュメントを出力するソフトウェアのこと（下図）．成果ドキュメントは文書・Web ページ（HTML）・ソースコードなどフォーマットは様々である．

　特に Web ページを出力するテンプレートエンジンを「Web テンプレートエンジン」という．Web テンプレートエンジンは，Web テンプレートとデータモデル（パラメータ．ひとまず変数だと考えれば良い．）を組み合わせて View（ブラウザにレンダリングされる HTML）を作る処理を行うソフトウェアである．

https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/TempEngGen015.svg/220px-TempEngGen015.svg.png

Wikipedia: テンプレートエンジンより引用

　以下，本記事では，「テンプレートエンジン」は「Web テンプレートエンジン」を指すものとする．

Web テンプレートエンジンで何ができる？

　ざっくり言うと，テンプレートエンジンを用いると，HTML にソースコードを埋め込み，バックエンドと HTML（フロントエンド）でデータをやりとりしたり，ロジックを埋め込むことができる．非常に分かり易い図があったので以下に示す．

https://azu.github.io/slide/2019/template-engine/img/view-datamodel.png

クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策より引用

Web テンプレートエンジンの利点

　テンプレートエンジンの利点としては，

  • 見た目（View）とロジックの分離
  • デザイナーとプログラマなど，編集する部分がはっきりするため，作業分担，チーム開発がしやすくなる．

などが挙げられる．

Web テンプレートエンジンの構成要素

　テンプレートエンジンは，以下の二つの要素を入力として Web ページ（HTML）を生成する．

  • Web テンプレート：成果ドキュメントである HTML の雛形．テンプレート言語が埋め込まれている HTML であり，純粋な HTML ではない．
  • データ：アプリケーション上で使われるデータ．典型的には，RDB から取り出したデータなどが挙げられる．

　Web テンプレートには，テンプレート言語と呼ばれるテンプレートエンジン専用の言語で書かれたソースコードが特別なタグにより埋め込まれている．Python のフルスタック Web フレームワーク，Django における Web テンプレートの例を以下に示した．

<body>
    <div class="page-header">
        {{ title }}
        {% if user.is_authenticated %}
        <span>{% user.name %}</span>
        {% endif %}
    </div>

    <div class="content container">
        {% block content %} {% endblock %}
    </div>
</body>

　{{ }}，{% %} がソースコードを埋め込むためのタグである（これらは「Django で用いられるテンプレートエンジンにおける」タグであり，テンプレートエンジンごとに異なるため注意）．これらのタグの中に，

  • if，for 文などの制御構文
  • バックエンドで処理したデータ（変数として埋め込む．DB から取り出されたデータなど．）

などを埋め込む．埋め込んだ状態ではただのテンプレートのため，最終的にはブラウザで表示できる様に HTML にコンパイルし，それがブラウザによってレンダリングされることで動的なコンテンツが実現される．

終わりに

　大雑把にテンプレートエンジンを解説してみた．概要は把握できたものの，力不足でセキュリティ面には触れることができなかった．Web アプリケーションの重要な部分であるセキュリティ（入力のバリデーション，Web テンプレートのコンパイルなど）まで触れてやっとテンプレートエンジンを理解したことになるのかなと思う．

　テンプレートエンジンについて理解が少し深まったので，これからの課題は

  • SPA との違い
  • SPA の利点（なんで React.js が良いの？）
  • サーバーサイドレンダリング（SSR）
  • SEO

について勉強することである．これらを学び，「SPA + API サーバ」，「一般の Web フレームワーク（テンプレートエンジンを用いたもの．Django，Rails など．）」，「これらの組み合わせ」などそれぞれの構成で作られる Web アプリケーションのメリット・デメリットを把握しながら Web アプリケーションで適切な技術選定ができるようになるのが最終的な目標である．

参考

　以下の記事が非常に分かりやすかった．テンプレートエンジンの基礎からテンプレートのコンパイルにおけるセキュリティに関する議論まで非常に分かりやすく書かれていた．

azu.github.io