Jadeのテンプレートをextends&blockで継承したら便利に開発できた

HTML・CSS

今回テンプレートエンジンJadeのextendsとblockとIncludes機能を案件で使用したので紹介します。

背景

ページ数が多い案件を担当し、ヘッダー・フッターなどの共通部分を１ファイルで管理したかったのですが、
PHP・SSIの利用ができませんでした・ω・
その点サーバー環境を気にしなくてよいJadeを使用してみました！！

Jade概要

Jadeとはなにか＋基本的な使い方は過去のTipsNoteの記事にまとめられてます。↓
Jadeのテンプレートを触ってみた

参考サイト↓
公式リファレンス
 公式のレポジトリでリンクされている日本語のチュートリアル

こちらも参考に↓
Jadeの記法について

Jadeのメリット

モジュール切り分けによりメンテナンスが楽になった
記述がEmmet（HTMLやCSSの記述・編集を強力にサポートするプラグイン）の省略記法（idやclassの付け方など）と似ていたので導入しやすかった
HTMLの閉じタグ抜けによるレイアウト崩れのミスが減った
HTMLの構造が見やすく、変更しやすくなった

Jadeのデメリット

Jadeコンパイルするための環境設定にちょっと時間かかった
Jadeの学習コストがかかった
Jade使用しない人に引き継ぎにくい

実際にextendsとblockとIncludesを使ってJadeテンプレート機能を使ってみる

コードを見ながらのほうがわかると思うので、実際にコードを記述しその後解説します。

今回はこのようなファイル構成で書いてみます。

layout.jade（雛形になるテンプレート、index.jadeでextendsさせて使用します）
header.jade（headerモジュールのファイル、layout.jadeにIncludesで組み込ませます）
footer.jade（footerモジュールのファイル、layout.jadeにIncludesで組み込ませます）
index.jade（index.htmlとして最終的に生成される元のファイル）

Jadeファイルを実際に書いてみる

layout.jade

doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible' content='IE=edge')
    meta(name='viewport', content='width=device-width,user-scalable=yes,initial-scale=1.0')
    meta(name='robots', content='index,follow')
    meta(name='format-detection', content='telephone=no')
    block title
    block meta
    link(rel='shortcut icon', href='/favicon.ico')
  body
    include /header
    block body
    include /footer

header.jade+footer.jade

【header.jade】

header
  p ここはheader.jadeです

【footer.jade】

footer
  p ここはfooter.jadeです

index.jade

extends /layout
block title
  title index.jadeファイルのタイトルが入ります
block meta
  meta(name='description', content='index.jadeファイルのディスクリプションが入ります')
block body
  #content
    p ここはindex.jadeのコンテンツです

生成されるindex.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
    <meta name="robots" content="index,follow">
    <meta name="format-detection" content="telephone=no">
    <title>index.jadeファイルのタイトルが入ります</title>
    <meta name="description" content="index.jadeファイルのディスクリプションが入ります">
    <link rel="shortcut icon" href="/favicon.ico">
  </head>
  <body>
    <header>
      <p>ここはheader.jadeです</p>
    </header>
    <div id="content">
      <p>ここはindex.jadeのコンテンツです</p>
    </div>
    <footer>
      <p>ここはfooter.jadeです</p>
    </footer>
  </body>
</html>

解説

extendsについて

index.jadeの①行目に

extends /layout

という記述があります。
extends /layoutという記述で、layout.jadeをテンプレートとして継承するという宣言になります。
(/layoutはパスを表していて、index.jadeと同じ階層にあるlayout.jadeを呼び出しています)

blockについて

index.jadeとlayout.jadeにはそれぞれ
block ~ブロック名~
という記述があります。

layout.jadeには

block title
block meta
block body

という記述があり、
index.jadeでは

block title
  title index.jadeファイルのタイトルが入ります
block meta
  meta(name='description', content='index.jadeファイルのディスクリプションが入ります')
block body
  #content
    p ここはindex.jadeのコンテンツです

という感じにblockの中に記述を書き足します。
これをindex.htmlに展開させるとlayout.jadeの各blockの部分にindex.jadeで記述された中身が上書きされます。