サーバサイドHTMLテンプレートからの脱却のススメ

Web開発者の悩みを軽減！ クライアントサイドでのHTMLテンプレート管理 第1回

　PHPのSmartyやフレームワークが提供しているHTMLのViewエンジン（LaravelのBladeなど）、RubyのERBのようなHTMLテンプレートを使ったWebシステムでは、こんな問題に遭遇します。「HTMLのデザインや文言をちょっと変えるくらいすぐにできないものか」「デザインやUIをリッチにしたいが、PHPやRubyなどサーバ側の言語が分からないから直せない」。また、このような課題から、想定より時間がかかり、スケジュールが遅れたり、作業する担当者には、どのようなスキルをもった人（エンジニアなのかデザイナなのか）をアサインするかで困ったりするケースがあるようです。そこで、今回は、筆者の経験をもとに、このような問題がどうして発生するのか？ さらに、改善方法として、クライアントサイドでのHTMLテンプレートの利用について紹介します。

対象読者

• サーバサイド開発者や、フロントエンド開発者
• 技術マネジメント、プロジェクトマネージャ等
• Webアプリ・システム開発に参加する方全般

Web開発現場では、どんな問題があり、どのような改善方法があるのか

　一つのサイトを作る際には、プログラマ、デザイナ、そして、コンテンツなどを決めるプランナー、サポートなどさまざまな担当者が関わり、コミュニーションを取りながらできあがっています。

　そのできるあがるサイトにも複数の用途があり、例えば、ツールとしての機能、キャンペーンなどの広告ページ、説明や問合せなどのサポートページなどがあります。さらに、一つのサイトであっても必ずしも一つの目的だけにはとどまらず、用途はさまざま広がっています。したがって、ある程度大きなサイトであれば、一つのWebシステムと言えるでしょう。

　現在のWebシステムでは、サーバ側でプログラムを使ってHTMLを作成する手法がもっとも主流な方法と言えるでしょう。しかし、現在では少々問題が生じてしまっているのも事実です。

　今回は、これまでのサーバサイドでHTMLを生成する方法の流れやその利点、新たに生じる問題がどうして生まれてしまったのか、そして、それを改善する方法の一つとして、クライアントサイドでのHTMLを生成する手法を紹介し、それがどう有効なのかを説明します。

　次回は、実際にクライアントサイドでHTMLをどのように生成すれば、それぞれの担当者がメンテナンスしやすくなるのかの具体的な方法を紹介します。

サーバサイドHTMLの進化の流れ

　筆者は、2000年くらいからWebアプリに関わっていますが、当初はWebシステム開発の方が難しいという認識があり、HTML自体のデザインはそれほど重視されていませんでした。

　しかし、徐々にデザインが重視されるようになり、プログラムと、デザインや文言などの要素はだんだんと分離して管理される必要が出てきました。

　このときの分離はまだ、HTMLファイル自体でそれぞれの役割を分離していることが多く、HTMLが、「動的か」「静的か」かどうかで役割がおおよそ分担されていました。

　「動的」とは、サーバ側のプログラムを利用してHTMLを生成する場合で、「静的」とは、作成したHTMLファイルをそのまま、プログラムを通さず表示する場合です。

　動的なHTMLの場合には、そのHTMLコーディングをするのは、プログラムを利用することからもサーバサイドプログラマの仕事とおおよそ決まっていました。

　そして、動的なHTMLの場合にはそれほど、凝ったデザインやUIを求められるケースも少なかったため、HTMLと多少のCSS、JavaScriptの知識があれば十分でした。

　JavaScriptやCSSを駆使したサイトはブラウザの互換性問題もあり、現在ほど使えなかったことも理由の一つにあります。

　このときの主流な方法が、HTML内にプログラムを記述する方法で、PHPやJSP（Java）などです。特にPHPは使いやすく、しかも簡単なことから急速に普及しました。

　しかし、動的ページはあくまで機能が動くことが重要であって、それ以外の要素はあまり重視されていなかったと言えるでしょう。

　そして、インターネットが一般コンシューマにも当たり前のように使われる現在では、ECサイトやブログ、そしてSNSなど、だんだんと、動的ページでもサイトの見せ方にこだわり出すようになり、動的ページ内であっても、プログラムとデザイン要素をより効率的に分割して管理できる必要が生じてきました。

　そのため、HTMLとプログラムをできるだけ分離していこうという流れが現在まで続いていて、そのための手法が「サーバサイドHTMLテンプレート」という手法です。

　このサーバサイドHTMLテンプレートは、図1に示すように進化しています。

図1　HTMLテンプレートへの進化の流れ

　本来、HTMLの中にプログラムが書ける言語として普及したPHPであっても、SmartyといったHTMLテンプレートが非常に多く使われるようになったり、JavaであればJSFと言ったように、それぞれできるだけ、HTML内にあるプログラム要素をなくそうとする進化がありました。

　また、HTMLの仕様内でできるだけ記述できるようなテンプレートも多少ありましたが、ループや分岐などの構造的機能が使えない、もしくは非常に機能が限定されることからあまり浸透せず、より高機能、もしくはよりHTMLの記述量が少ないなど、サーバサイド側の言語や文化に応じて効率よく開発できるような進化を続けています。

　例えば、Node.jsで使われているJadeや、Rubyなどで使われているSlimなどは、HTMLテンプレートであってもタグ（"<"や">"）すら記述しない流れになっています。

　また、PHPでLaravelフレームワークで使われているBladeといったテンプレートのように、HTMLの中にある程度プログラムが記述できるようにし、実装者が独自に決めたルールによってそれらの自由度を制御する流れもあります。​

　また、Webシステムを構築する際には、図2のような流れでプロジェクトが進んで行くことが多いです。

　HTMLテンプレートを使うケースでは、企画から開発までの流れはおおよそ、図2のような流れで進んでいる場合が多いと思います。

図2　Webシステム開発プロジェクトの流れ

　このように、プログラムを構築する前に、どのような画面があり、その画面はどのような機能があるかなどを事前に定義します。

　そのため、実際にHTMLを記述するフェーズはシステム開発のフェーズであり、また入力、出力などを伴うため、機能の実装と密接な関係にあります。

　一般的には、このように工程毎にスケジュールがあり、進捗していくプロジェクトを、ウォーターフォール型のプロジェクトと呼ばれます。

　ウォーターフォールプロジェクト管理の場合、前工程が大切なため、どんどん後工程は遅れる傾向にあり、そして、リリースは延期されないために、後工程になればなるほど、時間的制約が大きくなっていきます。そのような都合もあり、当初予定定義されていた画面の機能が変わる、デザインが変わるなどの変更は最小限にする必要がありました。

　そして、システム開発はより効率的に、より短期間に、という傾向が進み、その結果、HTMLテンプレートは、開発者が短い時間で作業ができるように進化を続ける必要があったわけです。