[pushState] jquery.pjaxなクライアントとExpress4＋ECTなサーバサイドのWebアプリサンプル

jquery.pjaxとは、ブラウザ履歴をプログラムから操作できるHTML5のAPI「pushState」を便利に実装したjqueryプラグインです。ajaxを使ったWebアプリでは、画面遷移が発生しないのでサクサク動くというメリットがある反面、画面が変化してもURLが変わらないためにSEOで不利というのがデメリットでした。しかしHTML5のpushStateのお陰でそのデメリットもやっと解消されることになりました。jquery.pjaxを使えば、pushStateを簡単に使うことができます。
今回ご紹介するのは、jquery.pjax.js (クライアントサイド) と express4 (サーバサイド) を使ったpjaxなWebアプリの超簡単なサンプルです。

jQuery:要素が画面に現れたらイベントを発生させる

たとえば縦長の画面をスクロールして、ある特定の要素が画面に入ったときにイベントを発生させたいときには、jQueryプラグインのjquery.inviewを使うと便利です。

[jQuery]大量の要素を高速に追加する方法

jQueryで大量の要素を動的に追加するときに最もパフォーマンスが高い方法を調べてみました。

jQuery高速化コーディングテクニック

コードの書き方ひとつでjQueryを使用したアプリは劇的に高速になります。
高速化の効果が特に高かったコーディング方法をメモしておきます。

※今回使用したブラウザ
Chromium バージョン 32.0.1700.107 Ubuntu 13.10

jQuery本体だけでアコーディオンメニュー

メニューを折りたたんだり開いたりする、いわゆる「アコーディオンメニュー」（トグルメニュー）は、jQuery本体だけで実現できます。

jQuery本体だけでドロワーメニュー

アプリのUIレイアウトデザインでは、DIVやTABLE、IFRAMEを使ってフレームを切ったりしてついつい複雑にしてしまいがちですが、少しでもシンプルでスッキリした画面レイアウトにするには、メニューやアイコンなどの直接メインコンテンツに関係ない部分を「ドロワーメニュー」式にするのが良いでしょう。ドロワーメニューというのは、マウスを置いたりするとニュルッと横などから出てくる、例のスライドメニューのことです。ドロワーメニューを使えば、少しでも画面を広く使うことができます。
以下はそのサンプルコードです。