フロント側のルート処理が書けるjavascriptライブラリ「pagex」



ブラウザ側でルート処理が書けるjavascriptライブラリ「pagex」の紹介です

MVC等のWebフレームワークを使って開発をしている人ならRouteファイルは身近なものですが、" フロントエンド側で制御するRouteライブラリはないの?"と疑問に思ったことはありませんか?

'javascript route'で検索すると、SPA (シングル・ページ・アプリケーション)の需要が多いためか、ハッシュタグ ( # )ベースのルートライブラリが多くヒットします。

そのようなRoute事情ですが、URIベースの処理が書けるjavascript製ライブラリが「pagex」です。

pagexは よくあるMVCのWebフレームワークのrouteファイルの様に、各ページのフロント処理を書くことができます。

// http://URL
pagex('/', function(){
     // callback
});

// http://URL/article
pagex('/article', function(){
     // callback
});

// 実際に使うとこのような感じに
/*
pagex('/design/overhang', function(){
  swal('/design/overhanページ専用の処理!!');
});
*/

/design/overhang のページにアクセスした時の処理例


pagexで出来ること

 - ハッシュベースのルートではなく、URIベースの処理が書ける
 - 正規表現を使って細かいRoute処理が書ける
 

pagexのインストール

pagexのインストールはこちら(githubのリンク)から直接zipファイルをダウンロードしてプロジェクトフォルダに展開する方法と、コマンドライン上からnpm,bowerコマンドを使って導入が可能です。

# npmコマンドでダウンロードする場合
npm install pagex --save

# bowerでダウンロードする場合
bower install pagex 
<!-- ブラウザ上で読み込む場合 -->
<script src="/pagex/pagex.min.js"></script>


pagexの使い方

pagexはexpress.jsのrouteファイルをベースに作られており、node.jsであれば、"express"。PHPであれば"slim"や"Laravel"、Rubyであれば"sinatra"を使った経験がある人なら直感的にわかると思います。

pagexの機能は必要最低限のRoute周りの処理に絞られており、既存のWebサイトにも簡単に導入できます。

通常のRoute処理

// http://URL がアクセスされた時の処理
pagex('/', function(){
  console("it's working!!");
});

// パラメーターを受け取った時の処理
// e.x.p http://URL/article/1
pagex('/article/:id', function(id){
  console("/article/" + id + 'がアクセスされた時の処理');
  // output: /article/1がアクセスされた時の処理
});

ワイルドカード

// http://yourURL/design/なんでも
/*
  URIの第一セグメントに'design'が含まれていれば実行されます
*/
pagex('/design/*', function(){
    console.log("第一URIに'design'が含む場合");
});

正規表現

// 正規表現を使う場合

// http://URL/design/overhang
pagex(/^\/design\/overhang$/, true, function(){
   console.log("use regex");
});

// http://URL/design/[A-Xa-z0-9]
// /design/ + 第二セグメントが英数字の場合 * idパラメーター必見
pagex(/^\/design\/([A-Za-z0-9]+)/, function(id){
  console.log("Hello design " + id + "!");
});

// http://URL/design/[A-Xa-z0-9]
// /design/ + 第二セグメントが英数字の場合 * idパラメーター必見じゃない場合
pagex(/^\/design\/?([A-Za-z0-9]+)?/, function(id){
  console.log("Hello design " + id + "!");
});

 

Summary

以上がpagexの紹介でした。

pagexを使うと同じ処理を複数のファイルで書いたり読み込んだりする必要がなく、一本化できそうです。

機能の少ない静的ページなら 1ファイルに処理をまとめると メンテナンスがし易くなりそうですね!その他にもセグメント毎にちょっとしたアニメーションの挙動を変えたい時に使うと便利そうです。

稼働中のサイトにも簡単に組み込めるので、気になった人はゼヒ×2チェックしてみてください!

GitHub: franciscop/pagex

 

この記事のカテゴリ
プログラミング

この記事のタグ