テンプレートエンジンとは
HTMLやメール本文などの文字列のひな型である「テンプレート」に、プログラミング的な機能(変数、条件分岐、ループなど)を組み込み、「データモデル」から得たデータを使って文字列である「成果ドキュメント」を作成する仕組みのことを「テンプレートエンジン」と言います。
テンプレートエンジンの構成
テンプレートエンジンは主に「ソーステンプレート」、「データモデル」、「成果ドキュメント」で構成されています。
ソーステンプレート
HTMLやメール本文などの文字列のひな形です。
ソーステンプレートの記述には、PHPやPythonなどのプログラミング言語や、
Jinja2、EJS、Thymeleafなどの専用に設計されたテンプレート言語を使います。
データモデル
ソーステンプレートに埋め込む具体的なデータを保持する部分です。
ソーステンプレートとは分離しており、「DBMS」、「XML」、「CSV」、「JSON」、「スプレッドシート」など様々な形式で管理されています。
成果ドキュメント
ソーステンプレートとデータモデルを組み合わせて生成されるドキュメントを指します。
Webアプリケーションの場合は、ブラウザに表示されるHTMLページ、メールの場合は送信されるメール本文など、用途に応じてHTML、テキスト、PDFといった様々な形式で生成されます。
使用するメリット
表示内容とコードの分離ができる
表示内容はソーステンプレート、データ部分はデータモデルに書き分けることができます。
こうすることで、デザイナーは表示内容、プログラマーはコードの部分を書くように役割分担することができます。
効率化
ソーステンプレートを使いまわすことができるため、同じレイアウトや処理を作り直す必要がないため作業効効率が上がります。
保守性の向上
修正や追加をする際、デザインを変更する場合はソーステンプレートを、データの場合はデータモデルを変更するだけで良いので保守性が上がります。
代表的なテンプレートエンジン
最後によく使われるテンプレートエンジンをプログラム言語ごとにまとめました。
Java
JSP
Java Server Pagesの略で、HTMLの中にJavaのコードが書けるようなります。
サーバー上でServletに変換して実行します。
Thymeleaf
フレームワークのSpring Bootと組み合わせて使います。
HTMLに「th:属性」を使ってJavaのデータを埋め込むことができます。
JavaScript
EJS
Embedded JavaScriptの略で、JavaScriptのようにHTMLを書けるようになります。
HTMLの中にJavaScriptのコードを埋め込むことができ、をヘッダーとフッターで分割して管理することができます。
Handlebars
HTMLの中に「{{ 変数 }}」のようにデータを埋め込んで表示できます。
条件文やループを使うことができます。
Pug
HTMLを短く書くことができます。
閉じタグが不要になるなどHTMLのコード量を減らすことができるので、人気があります。
Python
Jinja2
FlaskやFastAPIなどのフレームワークで使われます。
HTMLと (デザイン)とPython(ロジック)の部分を分けて管理することでコードを見やすくすることができます。
PHP
Smarty
PHPで古くから使われています。
HTMLとPHPのHTML(デザイン)とPHP(ロジック)の部分を分けて管理することができます。
おわりに
テンプレートエンジンについて解説いたしました。
無料のプログラミングスクール「テクドリ」の卒業生のインタビュー動画を、インスタグラムほか公式SNSにて公開中！
