テンプレートエンジンjadeのmixinを使ってDRYを促進する。

jadeとは?

express.jsの標準テンプレートエンジンとして採用されているのが jade 。Rails上のerbとかもそうですが、うっかりすると同じようなテンプレートをいちいち繰り返して書いていることに気づいて、悲しい気持ちになるのだけど、jadeのmixinという機能を使うことで、全てではないけど悲しい事態がある程度解消できた、という話です。

mixin

リファレンスには、

Mixins allow you to create reusable blocks of jade.

と書いてあって、つまり、再利用可能なjadeブロックを作ることができる、ということ。

mixinを定義する

mixinを定義するには、

mixin name1
  block

mixin name2(args)
  block

のように、mixinキーワードを使う。定義したmixinを使うには、

+ name1
+ name2('foo')

のように、+mixin名という形で使う。 mixinの定義内には、jadeの構文が書けるし、jadeのブロックが渡せるので、

mixin article(title)
  .article
    h1= title
    block

と定義しておいて、

+article3('Title')
  p This is a description

とすると、

  
Title
  
This is a description

とレンダリングされる。

mixin適用前の悲しいテンプレート

jadeを使って作っているサイトで、mixinを知らずに書いていた残念なコードがこちら。

div.row-fluid
  div.span8.offset2
    div.row-fluid
      div.span6.well
        h3
          a(href='/labs/jscharts') JSCharts
        p.
          experiments using JSCharts.
      div.span6.well
        h3
          a(href='/labs/smoothiejs') Smoothie Charts
        p.
          experiments using Smoothie Charts.

    div.row-fluid
      div.span6.well
        h3
          a(href='/labs/chartjs') Chart.js
        p.
          experiments using Chart.js

リンク、タイトル、概要のセットで構成されたブロックが3つあるんだけど、同じ構造を3回繰り返し書いていて、DRYじゃない。

mixin適用後の美しい?テンプレート

↑のテンプレートにmininを定義してやって、DRYな形でリファクタリングしたコードがこちら。

// mixinの定義
mixin article(href, title, desc)
  div.span6.well
    h3
      a(href=href)= title
    p= desc

// mixin使用
div.row-fluid
  div.span8.offset2
    div.row-fluid
      +article('/labs/jscharts', 'JSCharts', 'experiments using JSCharts.')
      +article('/labs/smoothiejs', 'Smoothie Charts', 'experiments using Smoothie Charts.')

    div.row-fluid
      +article('/labs/chartjs', 'Chart.js', 'experiments using Chart.js.')

まったく同じコンテンツをレンダリングするjadeのコードが、よりシンプルかつエレガントになった。mixinをうまく使うことで、jadeテンプレートがDRYになることがわかる。実際にリファクタリングしたページは、こちらで公開しています。