LoginSignup
14
15

More than 5 years have passed since last update.

非AJAXなWEBサービスのAJAX化を強いられたときに知っておくと良さそうなライブラリ

Last updated at Posted at 2014-03-13

ちょっとだらっとした文章になりそうです。よろしくお付き合いください。さて・・・

例えば、ショッピングサイトかなんかでTOPページがあって、その中にNew Itemsのパーシャルがあって、商品の追加頻度が高くて顧客から即時性が求められているんだけど、TOPページはNew Items 込み込みでサーバサイドでHTML一枚でがっつり書き出される設計になっていたとします。そうしますと、New ItemsのリロードのためにTOPページ全体のリロードが必要になるわけで、じゃあJSでページ全体のオートリロード仕込むか、いやいやそんなの色んな事情でありえないわけですから、そこはAjax化して部分リロードでいこうぜとなるわけです。

ここで検討されるAjax化の設計手法は、普通は2つでしょう。

ひとつめ。

New Itemsをtext/htmlとしてサーバからもらう。

つまりサーバサイドでHTMLを生成する、ということです。
具体的には、サーバサイドで、New Items用にパーシャルテンプレートを切り出して、routeとcontroller::method()を新規に追加するって感じですね。

ふたつめ。

New ItemsのDOMに必要なデータだけをapplication/jsonとしてサーバからもらう。

つまりクライアントサイドでHTMLを生成する、ということです。
具体的には、クライアントサイドで、jQuery-templateでもAngularJSでもなんでも使ってNew Items部分のテンプレを埋め込んでおき、Ajaxで受け取ったJSONをアサインしてレンダリングするといいでしょう。あ、こちらもrouteとcontroller::method()を追加することになるでしょう。

(みっつめのハイブリッドな方法として、初回用のJSONをtext/htmlの一部として書き出しておくというやり方もありますね。私はやったことないですが)

さて、両者を比較すると、
手軽さ という点では前者、
APIの汎用性 という点では後者、
がそれぞれ優位になりそうです。

私としては後者を推します。設計としてキレイですし、場合によっては、APIのオープン化を提案する(=新しいお仕事を生み出す)ための布石にもなったりしますから。ま、それはいいとして・・・

さて、前者ではなく後者を選択した場合、jQuery, AngularJS ゴニョゴニョに加えて、もうひとつ面倒ごとが増えます。サーバ側のアプリケーションフレームワークにバンドルされたテンプレートエンジンは通常フィルター関数を持っていてそれを使っている箇所があるでしょうから、それをJSによる実装で置き換えなければなりません。

例えば、コントローラで
$datetime = '2014-03-13T12:34:56.888Z';
としてアサインされた値をテンプレートエンジンで、

<?php echo date('Y年n月d日 h:m', strtotime($datetime)); ?>

なんて感じで書き出していた場合、ちょっと大変くさいですね。date(・・・)の部分をサーバサイドで計算してJSONで渡してもいいですがそうするとAPIとしての汎用性がガクッと落ちてしまいます。

そこで、phpjsの登場です。(本題)

https://github.com/kvz/phpjs
PHPの強力な関数群をそのまんまのインターフェイスでJSで利用できるんですから手っ取り早い。これを使ってJSで書き直せば楽チンですね。うれしい。

ちなみに、Python Djangoにも似たようなのがありますね。
https://github.com/dryan/django-filters-js
(Rubyは見つけられませんでした...)

言っても、やっつけ的なアプローチではありますが、選択肢としておさえておくといいでしょうね。
今夜は早く帰れるかもしれません。

以上であります!


告知

というか宣伝ですが、このエントリーも関係してますが、

2chまとめ巡査長β

http://j.inthemaking.net/
というのを作ってみました。PCでも見れますがスマホ用です。
よろしければ暇つぶしに使って感想いただければ嬉しいです。

14
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
15