@nqounetです。

JavaScriptのサンプルページでは、Grapnelというrouterを使っていたのですが、その後、もっとお気に入りのライブラリを見つけました。

私にとっては、シングルページのウェブアプリを作るのには欠かせないものです。

今日はそのライブラリを紹介したいと思います。

JavaScriptのディスパッチャーの決定版

JavaScriptでシングルページアプリを作るなら、何かしらのページ遷移が必要だと思いますが、そういう時には、このライブラリがピッタリです。

• ramiel/router.js

Router.js is a simple yet powerful javascript plugin to handle hash fragment in order to route requests
ramiel/router.js

Router.jsでどんなことができるか

Router.jsはhashchangeイベントで動作しますので、普通にリンクをクリックすることで動作を切り替えることが可能になります。

（このライブラリの機能からすると好ましくはないのですが、）ハローワールドをRouter.jsで書くと、例えば以下のようになります。

1
2
3
4
5
6
7

<a href="#/hello">ハローワールド</a>
<script src="router.js"></script>
<script>
var router = new Router;
router.add('#/hello', hello);
function hello(){alert('Hello, World!')}
</script>

Router.jsの使い所としては、その名の通り、主にページ切り替えになると思います。

hashchangeイベントの特性上、同じリンクを何度クリックしても最初の1回だけしか動作しないので、同じリンクでリロードになることがありません。

処理をまとめて書く

スクリプトから参照できるプレースホルダが使えるので、ページの切り替え処理をまとめて書いておくこともできます。以下のサンプルではjQueryも使っています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<ul>
    <li><a href="#/show/page1">1ページ目</a></li>
    <li><a href="#/show/page2">2ページ目</a></li>
    <li><a href="#/show/page3">3ページ目</a></li>
</ul>
<div id="page1" class="js-page">1ページ目の中身</div>
<div id="page2" class="js-page">2ページ目の中身</div>
<div id="page3" class="js-page">3ページ目の中身</div>
<script src="router.js"></script>
<script src="jquery.js"></script>

1
2
3
4
5
6

var router = new Router;
router.add('#/show/:id', function(req) {
    var id = req.get('id');
    $('.js-page').hide();
    $('#' + id).show();
});

この例では:idの部分にpage1やpage2などが入りますので、対応するdivを表示するようにしています。

このルーティングの定義は、DOM形成前でも可能なので、jQuery(document).ready()の中で定義しなくても問題ありません。

404エラー

ウェブサイトを作っていると悩むのが404エラーです。

ですがご安心ください。

そんなエラーもRouter.jsで処理できます。

1
2
3
4
5
6

router.add('#/hello', function() {
    alert('Hello');
})
.errors(404, function(err, href) {
    alert('not found')
});

コレでURLの直打ち対策も万全です。

最初のページへリダイレクト

高度なアプリになると、ログインのような処理も必要になってきます。

そうすると、最初はログインページを表示したいのですが、もちろんそういう場合にも対応できます。

1
2
3
4
5
6
7
8
9

router
  .add('#/login', routeLogin)
  .add('#/index', routeIndex)
  .add('#/logout', function(){
    session.expire();
    router.redirect('#/login');
  });

router.run('#/login');

ルーティングの定義は.で繋げて書けますので、沢山のルートもそれほど苦にはならないと思います。

そして、準備ができたらrunで好きなルートへ飛ばすことができます。

また、redirectも可能なので、フォームのポスト後に別のページヘ飛ばすようなこともできます。

もちろん万能ではない

コレでもまだ一部の機能しか紹介していませんが、本当にいろいろな機能があります。

しかし、全てをRouter.jsでやろうとするとハマります。

大きなページ遷移のみをこのライブラリで実装して、ページ内の各機能はhashchangeを使わないライブラリで作るのが良いでしょう。

そうしないと、思わぬところでページ遷移が発生して困ることになります。（経験者談）

Router.js最高

JavaScriptは本当に色々なライブラリが充実していて、気に入ったものを見つけるのは大変です。

結構似たような用途のライブラリも多数（特にポップアップ系とかお知らせ系とか）あるので、使ってみて気に入ったライブラリは、ブログに書いたりしてちゃんと残しておきたいですね。

• ramiel/router.js