今回テンプレートエンジン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で記述された中身が上書きされます。
includesについて
includesについては過去のTipsNoteに記述されています↓
Jadeのテンプレートを触ってみた
今回はheader部分とfooter部分は全ページ共通で反映させる想定でextendsさせるlayout.jadeに記述しました。
include /header include /footer
まとめ
extendsさせるファイルにはmetaや全ページ共通するモジュールを入れておき、 ページによって入ったり入らなかったりするようなモジュールはincludesでページごとに入れて開発すると、かなり時間短縮されました！＼(^o^)／
変数やif文も使用できるので、案件で使用する機会があったら使っていきたいです！！