別HTMLファイルの読み込みにも対応した軽量なJavaScriptテンプレートエンジン「fragment.js」
fragment.jsは外部HTMLの読み込みに対応したJavaScriptテンプレートエンジンです。
Webアプリケーションが広まるのにつれて必要になっているのがテンプレートエンジンです。HTML内にテンプレートとして記述するケースが多いですが、今回は外部ファイルとしてHTMLを定義できるfragment.jsを紹介します。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.00.20.1364215450.png)
サンプルです。外部のHTMLファイルを読み込んで表示しています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.00.31.1364215454.png)
HTMLファイルの内容はこのようになっています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.00.38.1364215457.png)
JSONPを読み込んでそのままレンダリングに使うこともできます。
fragment.jsでは同じドメイン内に保存したHTMLファイルを読み込んで表示したり、JSONと合わせて内容を変えて描画します。JSONPと組み合わせて外部コンテンツを表示させるのにも使えます。
fragment.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
JavaScriptによるコンテンツレンダリングとサーバサイドでのデータ取得によるレンダリングとを分ける決め手になるのは、Webクローラーにクローリングして欲しいか否かになります。例えばGoogle、Facebookのクローラーなどです。
JavaScriptによるレンダリングではSEO的には殆ど意味がないと考える方が良いでしょう。またユニークなURLを持たない場合、Facebookのいいね数も意図した集計にならない可能性もあります。ログイン必須でそうした数値を気にする必要がなければ、JavaScriptを積極的に使っていくべきです。