グローバルナビのカレント処理を静的にexpress + jadeでやってみた

express使ってみよー！という思いつきからやってみた。

導入

まずはデモを作るのにherokuにNode.js乗せましょうということで、 こちらの記事を参考にさせて頂きました。

Node.js + Express を Heroku で動かすまでの手順まとめ

上記を読めばラクラクインストール！なんて上手くいくわけなかった。 色々調べてみるとWin環境だと皆さん同じ所ではまっているみたいで、 何度か心が折れかけましたがエラーメッセージ追っかけていってうまくいった。

ではさっそくexpressをいじり倒す。

ぱぱっとできたのがこちら。ついでにTwitterBootstrapも入れてみた。

ソース

https://github.com/yotanote/express_test

デモ

http://test-express.herokuapp.com/

解説

• routes/index.js

/*
 * GET page.
 */

var TITLE = 'hello world';
var navData = [{
    path : '/',
    str  : 'Entrance',
}, {
    path : '/lounge/',
    str  : 'Lounge',
}, {
    path : '/studio/',
    str  : 'Studio',
}, {
    path : '/editroom/',
    str  : 'Edit Room',
}, {
    path : '/gear/',
    str : 'Gear',
}];

exports.entrance = function(req, res){
    res.render('entrance', {
        title : TITLE,
        currentNav : 0,
        navData : navData
    });
};

exports.lounge = function(req, res){
  res.render('lounge', {
        title : TITLE,
        currentNav : 1,
        navData : navData
    });
};

exports.studio = function(req, res){
  res.render('studio', {
        title : TITLE,
        currentNav : 2,
        navData : navData
    });
};
exports.editroom = function(req, res){
  res.render('editroom', {
        title : TITLE,
        currentNav : 3,
        navData : navData
    });
};
exports.gear = function(req, res){
  res.render('gear', {
        title : TITLE,
        currentNav : 4,
        navData : navData
    });
};

• views/layout.jade

ページ構造の共通テンプレート

!!! 5
html(lang="ja")
  head
    block head
    meta(charset='UTF-8')
    title= title
    link(rel='stylesheet', href='/css/bootstrap.css')
    link(rel='stylesheet', href='/css/custom.css')
  body(data-spy="scroll", data-target=".bs-docs-sidebar")

block header
  .navbar.navbar-inverse
    .navbar-inner
      .container
        a.brand(href="./index.html")
        .nav-collapse.collapse
          ul.nav
            - navData.forEach(function (o, i) {
              - if (i == currentNav)
                li.active
                  a(href=o.path) #{o.str}
              - else
                li
                  a(href=o.path) #{o.str}
            - })

block main-visual

block content

• views/entrance.jade

上記のlayout.jadeの継承先

block main-visual
  .jumbotron.masthead
    .container
      h1#logo= title
      p #{title}

block content
  div.location-bar
    p Entrance

馴染みがあるメソッド使える&JSで色々できるからJSerとしてはなかなか便利！

デモを見るとヘッダーのナビが遷移するごとにカレントの表示が変わっていると思います。 この処理は今現在どこにいるのかをroutes/index.js内のcurrentNavプロパティに持たせ、 その値をjade側に渡し、views/layout.jadeのforEachで取得し対象の値に対しカレントを付与しています。

普段クライアントサイド側のJavaScriptを弄ってる自分としてはHTMLパース前にJSが動くこと自体が新鮮！

Railsみたいな感じですが所感としては変数持たせるところはRailsより簡潔な感じがしましたね。 単純にRailsに比べてファイルの数が少ないというのもありますが。。。 ejsからjadeに変わったということもあり、なかなかに変態度（謎）が増しています。

デモのHTMLソース見るとワンライナーになっていて見難いので後々直さなくちゃですね。

まとめ

• express + jadeで楽にモジュールシステムとか作れちゃう
• heroku使うときはMac環境じゃないと心が折れる

これを期にexpressをベースにアプリをガツガツ作ろう！