Webサイトを構築する場合にテンプレートを使用してページをデザインするのは、とても人気のある方法です。Webページで使用するテンプレート設計はテンプレートの展開タイミングで次の2つに分類することが出来ます。
- サーバーサイドテンプレート
- クライアントサイドテンプレート
クライアントサイドテンプレートの特徴
サーバーサイドテンプレートは 実装としては 一般的に PHP や JSP、 FreeMarker、ASP を使用することから、ほとんどの場合サービスの実装言語に依存します。クライアントサイドテンプレートは JavaScript を使用しますのでサービスの実装言語には依存しません。ブラウザのJavaScriptの差異があり互換性の点についてはについてはjQueryのようなJavaScriptの動作の差異を吸収するフレームワークがあるように互換性についての問題は解消されています。クライアントサイドテンプレートを使用したサイトはサービスの実装言語を、変更する場合にはテンプレートを書き換える必要がなく、技術トレンドの変化に追従しやすいと考えられます。
クライアントサイドテンプレートはサーバーサイドテンプレートのテンプレート展開処理の負荷をクライアントにシフトします。サーバーサイドテンプレートより多くのユーザを1つのサーバーで対応することが出来ます。最近のスマートフォンは高性能になり、Javascriptの実行エンジンの速度もV8エンジンの登場に影響され大幅に効率が改善されたことから、テンプレート展開自体はテンプレートフレームワークの実装にもよりますが、大した負荷にはなりません。従って、同時アクセスの多いサービスで高いクライアントマシンの性能を活かすことでサーバー台数を少なく抑えることの出来る手法と考えられます。
クライアントサイドテンプレートはサービス見た目とデータをより明確に分離することが出来ます。このことは、サービスをAPIとして再利用することを可能とします。また、キャッシュの空間効率を改善します。
クライアントサイドテンプレートの方式
クライアントサイドのテンプレートの方式について評価します。
A. テンプレートをHTMLに<script>で埋め込む方式
HTMLにscriptタグを使用して埋め込み、DOMからid でテンプレートテキストを取得してこのテキストに対してプレースホルダの展開処理を行い innerHTML で 追加します。ブラウザが<script>要素のコンテンツをレンダリングしないため、ページレイアウトが崩れません。script タグの中で 実質的にHTMLのタグをエスケープせずにそのままで記述することが出来ます。
<script id="tmpl-row" type="text/x-yos-template">
<tr class="row">
<td class="name">{{=name}}</td><td class="value">{{=value}}</td>
</tr>
</script>
B. テンプレートをHTMLと別のリソースで定義してロードする方式
ロードする HTMLテンプレートとは別にHTMLファイルで記述して、XHR(XMLHttpRequest)でロードする手法です。ロードしたテキストに対してプレースホルダの展開処理を行い innerHTML で 追加します。複数のHTMLページから共通利用できますが、HTTPリクエストの回数が増えます。HTTP/2では複数リソースのロード性能を改善できますが、まだHTTP/2が普及していないので、この手法では一般的にはロード時間が長くなります。
評価
Bの方式は共通化が行えることからメンテナンス性が高いように見えますが、スタイルシートによって見た目を分離したテンプレートのスニペットでは共通化できるケースが少なく逆にリソースの参照関係が複雑になってしまうと考えられ、ページ毎に独立した方がHTMLファイルの依存関係を単純にすることが出来ますので、メンテナンス性がよくなることは無いと考えていいでしょう。したがってYOSBITSはAの方式を推奨します。B方式はバッドプラクティスと考えて良いでしょう。