クライアント側でのHTMLテンプレートのみで制御する方法
先ほど紹介した方法では、HTMLテンプレート内にサーバ側の処理も含まれているため、
- 実際にはサーバ側で完全にHTML部分の変更をしていないとはいえない、
- ロジック結果をHTML内に埋めるための処理が入ってしまい、ファイル全体としては、まだ、サーバサイド側とクライアント側で責任の境界線が曖昧になる要素を残している
など、根本的な問題は解決しているとはいえません。
そこで、本節では、
- HTMLテンプレートファイルではサーバサイドでのロジックが含まれることがない
- ロジック部分はREST APIのように分離し、ファイル単位でサーバとクライアントで完全に分ける
ための流れを説明します。REST APIというと、データのリクエストとレスポンスという双方向でのデータの流れを考えなくてはいけなくなるので、少々難しい部分もありますが、まずはGETメソッドであれば作業をしやすいはずですので、その流れを説明します。
まず。先ほどのHTMLからサーバ部分の実装箇所を削ります。ただし、それ以外のコードでは変更点はなく、リスト6のようになります。
<!DOCTYPE html>
<html lang="ja" ng-app="main">
<head>
<meta charset="UTF-8">
<title>STEP2 - AngularJS</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="PageController">
<!-- 省略（ リスト1(4)のBODY配下と同様の内容 ）-->
</html>
JavaScriptの方は多少変わりますが、基本的にはリスト6のようにあまり違いはありません。
var module = angular.module('main',[]);
function PageController($scope,$http){
//（1）$httpというサービスを使う
$http({
method: 'GET',
url: 'rest.php'
}).then(function(response) {
$scope.user = response.data.user;
});
};
module.controller('PageController',['$scope','$http',PageController]); //（2）$httpを追加
（1）では$httpという引数が追加されています。この$httpはjQueryでの$.ajaxと同じような機能を提供しています。
この引数は、（2）で宣言しているために利用できるものです。このあたりの仕組みがAngularJSを少々近寄りがたいものにしていますが、あまり気にしないで進めてください。GETリクエストでなれていけば、クライアント側での作業はPOSTの場合もほぼ同じなため、どちらでも問題なく実装できるはずです。
これで、サーバサイドHTMLでのテンプレート処理も、HTML内にサーバ側でのデータ定義もなくなりました。サーバ側の事情によってフロントエンドが影響を受けることもなくなりますので、双方のシンタックスがかぶってしまうということはなくなります。
従って、より自由に（＝サーバサイドを気にすることなく）JavaScript側のフレームワークを選べるようになるのです。
今後の進め方
今回紹介したのは、値の差し込みとINPUT要素などへのデータ設定のみですが、もちろん分岐処理や繰り返し処理も可能です。
これらの利用方法を調べる時の感触を確認しながら調査すると、具体的にどのようなフレームワークがよいかなど具体的な判断基準も持ちやすくなると思いますので、是非、興味を持った方はご自分で調べて見てみることをおすすめします。
このように役割の分離が進むと、サーバサイドエンジニア、フロントエンドエンジニア、HTMLでのデザイナや文言等のメンテナンスをする人がいても、きれいに分かれて作業ができるようになってきます。結果、クライアントサイドの担当者がサーバサイドの技術がわからないとHTMLが修正できない、ということもなくなっているはずです。逆に、サーバサイドの担当者がクライアント側での変更のたびに作業が発生するということもなくなるために、お互いがスムーズに進められるはずです。
今回は、ここまでの状態を作ることが目的です。これ以降は、それぞれの専門知識を生かして実装していけばよいはずです。
ただし、必ずしもクライアント側のHTMLテンプレートが万能なわけでもなく、サーバ側でのテンプレートの方が優れていることもあるのも事実です。たとえば、HTMLの部品化のような機能はサーバ側でのテンプレートエンジンのほうが便利な場合があります。
また、SEOの観点でいえば、サーバサイドでHTMLを生成する方がアドバンテージがあります。
現在では、スマホサイトなどではjQuery MobileやAngularJSのようにJavaScript側で表示を作っているサイトも多く、それらのサイトでも検索エンジンは正しく情報を見つける必要性があるため、だいぶ改善してきているようです。ただし、どこまで正しくクロールされるかは、そのページの作り方にも影響します。まずは、
- SEOが必要ないサイト（たとえば、クロールをブロックしたいコンテンツやログイン後のページ）でだけクライアント側テンプレートを導入する
- SEOが必要な部分だけをサーバ側で対応する
など、変則的な対応が必要になるかもしれません。
最後に
運用を考えたときに、知識が高い人にあわせた技術の最適化をするのではなく、より広い目線で最適化することが大切です。
そのとき、技術や知識がある人にとってはむしろ、後退したと思えることもあるかもしれません。また、かならずしも二者択一でもないので、現場に応じた運用設計をしていく必要があります。
その際に、自分が担当する領域以外の方がどのようなことをやりにくいと感じているのか、もしくはやりやすいと感じるかなど少しでも広く紹介できればと思いました。今回紹介した内容は筆者の経験に基づいて記述していますので、読者それぞれのケースでは当てはまらない場合などもあるかもしれませんが、皆様にとって少しでもご参考になればうれしく思います。
