Webページにデータを表示する場合には、表示すべきデータそのものよりも、それを整形し表示する為のHTML構文のサイズが大きくなるケースが多く見られます。 CSSの利用によりHTML構文の冗長性が低減されるとはいえ、やはり同様のHTML構文が繰り返されるのは避けられません。 そのような一定のフォーマットのデータを多数表示する場合に、テンプレート部分のみHTMLで記述し、データ部をJavaScript変数として定義し、 JavaScript処理によってHTML構文を完成する事で、HTML構文の冗長性削減が期待出来ます。

またこの手法を利用する理由としては、ソートなどの簡単な操作をサーバーを介さずに行うような、クライアント側でのデータ処理が容易に追加出来るという点にもあります。

• ファイルサイズとファイル数の削減
  本来なら数ページに渡る大量のデータを、現実的なサイズの1ページ内に収める事が可能です。データ量とページ数の削減により応答速度の向上と転送量の削減が望めます。
• データ操作の容易性
  抽出、並び替えなどのデータ操作が、HTMLのみで構成されたページよりも容易に行えます。
• JavaScript外部ファイルをデータファイルとして利用可
  一般的なPCブラウザでは、HTML/CSS/JSファイルをキャッシュとしてローカルに保存します。 そこで、頻繁に更新が行われるようなページの場合には、更新毎に1つの大きなJavaScriptデータファイルを変更するのではなく、更新部分だけを記述した小型の差分ファイルを用意する事も可能です。
• サーバー側アプリケーションとの親和性
  テンプレートに1つ1つデータを埋め込む処理と比較した場合、より軽い処理になりますので、処理コストの削減が見込めます。

• JavaScript動作環境必須
  当然ですが、JavaScriptがサポートされていない場合には動作しません。
• 初回(キャッシュ非適用時)のレスポンス
  単純な表示切替処理と比較した場合、データ処理の増加によりJavaScriptファイル自体のサイズが増加します。また大量のデータを一度に渡すゲースでは、回線やクライアントマシン性能に余裕が無い場合に、初回アクセス時のレスポンスの悪さが目立つ可能性もあります。
• 構成/レイアウトの制限
  原則としてはどんな構成/レイアウトでも可能ですが、それぞれの構成用に操作関数とデータフォーマットを用意する必要のあるケースが多くなる為、 実装コストを考えた場合、1ページは少数の構成である事が望まれます。
• JavaScriptデータ操作のリスク
  手動でデータの追加や変更を行う場合、一箇所でも間違ったJavaScript構文となっていると、全く表示されない可能性もある為、その分のリスクとコストが増します。

Name,Typeなどのヘッダ部分をクリックする事で、その項目でデータのソートを行います。ソート後は1ページ目に戻ります。 右上のページリンクは、数字はそれぞれのページへ、|<で最初のページ、<は前のページ、>は次のページ、>|は最後のページにそれぞれリンクしています。

またこのDemoにおいても、hash(Fragment-id: URLの#以降の文字列)での項目指定が可能になっています。