サーバーサイドテンプレート：Jinja2とHandlebars

サーバーサイドテンプレートは、ブラウザーに送信する前にサーバー上で HTML を生成します。最初のバイトから SEO に適したマークアップを提供でき、JavaScript がなくても動作し、クライアントサイドレンダリングだけで起きる「JavaScript の読み込みが終わるまでページが空白になる」問題も回避できます。

Jinja2 は Python のデファクトスタンダードのテンプレートライブラリで、Flask、Django（組み込みまたは jinja2 バックエンド経由）、Pelican、mkdocs などで使われています。{% %} タグにロジックを、{{ }} に式を記述します。変数には <h1>{{ title }}</h1>、ループには {% for item in items %} のように使います。

Handlebars は最も広く使われている Node.js テンプレートライブラリで、トランザクションメール（SendGrid、Mailgun）や Express 経由の SSR でよく利用されます。式には {{ }}、ブロックには {{# }} を使います。{{#each items}}<li>{{name}}</li>{{/each}} のように記述します。

どちらのエンジンも、デフォルトで変数の出力を自動エスケープします。name = "<script>" のとき、{{ user.name }} は "&lt;script&gt;" を出力し、XSS を無効化します。常に自動エスケープを利用し、明示的な raw フィルター（Jinja: {{ x|safe }}、Handlebars: {{{x}}}）は信頼できる HTML に対してのみ使用してください。

Jinjaでは、子テンプレートに {% extends "base.html" %} を記述し、ベーステンプレートに {% block content %}{% endblock %} を記述します。Handlebarsでは、部分ブロックを使って {{#> layout }}{{/layout}} を記述します。ベースレイアウトで構造を一度定義し、ページごとに可変領域を埋められます。

Jinjaでは {% include "header.html" %}、Handlebarsでは {{> header}} を使います。どちらも別のテンプレートを現在のテンプレートにインラインで組み込みます。パーシャルは大規模なコンポーネントライブラリを構成する基本要素であり、ページやレイアウトに組み合わせて使います。

Jinjaのフィルターは {{ price|currency }}、Handlebarsのヘルパーは {{currency price}} のように記述します。どちらも値に対してフォーマット関数を呼び出せます。プロジェクト固有の変換（日付のフォーマット、複数形処理、リンク生成など）には、独自のフィルターやヘルパーを定義します。

Jinjaでは {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}、Handlebarsでは {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}} のように記述します。クライアント側のJSでコンテンツを表示・非表示にするのではなく、データに応じてテンプレートを分岐できます。

どちらのエンジンもテンプレートを関数に事前コンパイルし、リクエストごとにその関数を呼び出します。コンパイルは一度だけで、レンダリングは高速です。非常にトラフィックの多いサイトでは、同一ページを再レンダリングするのではなく、エッジ（Varnish、Cloudflare）でレンダリング済みの出力をキャッシュします。

テンプレートをi18nライブラリと組み合わせます。PythonではJinja2 + Babel、NodeではHandlebars + i18nextを使います。テンプレートには翻訳キー（{{ t "welcome" }}）を記述し、i18n層が適切な言語の翻訳を解決します。これにより、1つのテンプレートを多言語でレンダリングできます。

Modern frameworkには、それぞれ独自のテンプレート形式があります。ERB（Rails）、Twig（Symfony）、Blade（Laravel）、Razor（.NET）、Slim/Haml（より簡潔な記法）などです。基本的なパターンは同じで、構文が異なります。バックエンドの言語とエコシステムに合ったエンジンを選びます。

テンプレートは従来のサーバーレンダリング型サイトに適しています。よりインタラクティブなアプリでは、Next.js（React）、Nuxt（Vue）、SvelteKitなどのフレームワークによって境界が曖昧になります。これらはサーバー上でテンプレートをレンダリングしつつ、同じコンポーネントをクライアント側でハイドレーションしてインタラクティブ性を実現します。

Jinja2やHandlebarsのようなテンプレートエンジンで、自動エスケープがデフォルトの動作になっているのはなぜですか？

サーバーサイドテンプレートエンジン（PythonのJinja2、JSのHandlebars、その他のスタックのERB/Twig/Blade）は、変数、ループ、条件分岐、パーシャル、継承を使ってサーバー上でHTMLを生成します。自動エスケープは、デフォルトでXSSから防御します。多言語サイトではi18nライブラリと組み合わせます。テンプレートが基盤となり、その上に現代的なフレームワークがハイドレーションを重ねます。