ハッシュの管理が劇的に楽になるjQueryライブラリ uriAnchor

こんにちは、SPA開発の経験も流行りのJavaScriptフレームワークの実装経験もない、コーダーの小林です。

昨今は西を向いても東を向いてもSPA、SPAと騒がしく、はてブやQiitaを覗くと毎日JavaScriptフレームワークのTipsや推奨記事が目を引きます。
企業サイトやキャンペーン系がメインになりがちなつみきのコーダーチームは、まだ本腰を入れてAngularJSやBackbone.jsの導入に取り掛かれていないので、そういった案件をこなす際に使うライブラリは未だjQueryメインになります。

が、いくらなんでもそれだけじゃあ頼りない。
せめて複雑なページの状態管理を簡単に行えるようにしたい。

そんななか、オライリーのSPA本を読んでいて見つけたのが、このuriAnchorです。

なぜハッシュの管理にわざわざライブラリを使うのか。

ハッシュはhtmlのアンカーリンクを使うだけで簡単に変更ができるシンプルなシロモノです。
そのため、Ajaxコンテンツにおいてハッシュをデータバインディングに利用するといった手法は、これまでにも頻繁に使われてきたようです。
history apiなんぞをいじらずとも、ブラウザの「戻る」「進む」に対応できるのも利点かと思います。

しかしただページを切り替えるだけならまだしも、フォームの表示やら一覧件数の数変更やら、制御したい状態の種類が増えれば増えるほど手書きのアンカーリンクでは扱いづらくなっていきます。uriAnchorはそういった複数のデータをハッシュに持たせる、またそれらを取得するといった手間を超カンタンにしてくれます。

uriAnchorの使い方

ハッシュの設定と取得するための2種類のメソッドを覚えれば、すぐに使いこなせます。

$.uriAnchor.setAnchorでハッシュを設定する。

$.uriAnchor.setAnchor()を実行すればハッシュが設定されます。
ハッシュの内容は同メソッドの引数に指定したオブジェクトが整形されます。
以下公式からサンプルコードを引用します。

$.uriAnchor.setAnchor({
  page : 'profile',
  _page : {
    uname   : 'wendy',
    online  : 'today'
  },
  slider  : 'confirm',
  _slider : {
    text   : 'hello',
    pretty : false
  },
  color : 'red'
});

気をつける点は、階層構造を持つオブジェクトの場合、子オブジェクトは親のプロパティ名にアンダースコアを付けたものを別途設定する必要があるということでしょうか。

$.uriAnchor.setAnchor()を指定のボタンのクリックイベント内に記述すれば、クリック時にハッシュ変更を行うといった制御が可能です。

$.uriAnchor.makeAnchorMapでハッシュを取得する。

複雑なハッシュを取得しオブジェクトに整形するためのメソッドも当然用意されています。
$.uriAnchor.makeAnchorMapがそれです。

これは引数ナシで実行するだけでオブジェクトを返してくれますので、それを変数などに格納してページ状態を変更するような処理を、別途行ってあげればいいと思います。

動作テスト

2つのメソッドをテストできるボタンを用意しました。

まとめ

個人的な体験として、はじめてAjaxコンテンツのコーディングを行った際に、クリックイベント内にそのままページ遷移処理を書いてしまったためネストがヤバくなり、運用がしんどくなるという経験を過去にしました。

その後解決策を探していてハッシュの利用に行き着きましたが、先に書いたとおりコンテンツの制御が複雑になればなるほどハッシュの管理も大変になってきますので、この手のシンプルなライブラリで補強して、運用を楽にしていきたいですね。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ