Site icon Tips Note by TAM

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

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

背景

ページ数が多い案件を担当し、ヘッダー・フッターなどの共通部分を1ファイルで管理したかったのですが、
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で記述された中身が上書きされます。

includesについて

includesについては過去のTipsNoteに記述されています↓
Jadeのテンプレートを触ってみた

今回はheader部分とfooter部分は全ページ共通で反映させる想定でextendsさせるlayout.jadeに記述しました。

include /header
include /footer

まとめ

extendsさせるファイルにはmetaや全ページ共通するモジュールを入れておき、 ページによって入ったり入らなかったりするようなモジュールはincludesでページごとに入れて開発すると、かなり時間短縮されました!\(^o^)/

変数やif文も使用できるので、案件で使用する機会があったら使っていきたいです!!