発展めざましいフロントエンド界隈。
最近は ES6構文で描いたものを Babel でトランスパイルしたり、 React を使うことが多く、 JavaScript をそのまま実行させるというケースはほとんどなくなってきました。
そんな中、 HTML をレンダリングするのもコンパイラを通したほうが都合が良い場合が増えています。というのもコンパイルを通すことでエラーがわかり、ヒューマンエラーが減るため作業効率が良くなるという部分が上げられます。 今回は JavaScript と相性のいいテンプレートエンジンをご紹介します。
Pug とは
Pugは Node.js 環境で動作する HTML テンプレートの一種です。
以前 Jade という名前でしたが、名前が変わり Pug となりました。
Pug の特徴はなんと言ってもその簡潔な構文。
- HTML タグ名を書くだけ。余計なマークアップ記号は不要。 div はタグ名も省略可能。
- 閉じタグ不要。入れ子構造はインデントを入れるだけ。
という、不要な記号をできるだけ取り払った仕様です。
インストール
Pug は Node.js 環境で動作するとは先程もいいました。
その為まずは Node.js をインストールしておく必要があります。
Node.js のインストールは簡単で、公式サイトへ移動し、モジュールをダウンロードするだけです。
ここまでできたら Pug のインストールを行うことが可能です。
とは言っても、やることはとてもシンプルです。ターミナルを開いて以下のコマンドを実行しましよう。
npm i pug-cli -g
これで後は version 等を確認するコマンド等を実行し、問題なく表示されればインストールは完了です。
簡単な使い方
例として下のようなテンプレートを
doctype html
html(lang="ja")
head
meta(charset="utf-8")
style(src="css/style.css")
script(src='js/index.js')
title Pug テスト
body
h1.sitettl Pug テストサイトタイトル
#contents
h2.content_ttl メインタイトル
pug を通すことで下のように出力されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style src="css/style.css"></style>
<script src="js/index.js"></script>
<title>Pug テスト</title>
</head>
<body>
<h1 class="sitettl">Pug テストサイトタイトル</h1>
<div id="contents">
<h2 class="content_ttl">メインタイトル</h2>
</div>
</body>
</html>
HTML より見やすく感じられると思います。
JavaScript を記述可能
テンプレート内に JavaScript を入れこめるので、変数や for 文を使ったプログラムでのテンプレート出力が可能です。
- for (var i = 0; i < 3; i++) li= i
<li>0</li> <li>1</li> <li>2</li>
各種フレームワークで
Node.js で動作させるのが基本ですが、フロントエンドフレームワークのRiot.jsではデフォルトで対応ており、プラグインを使うことでReactなどでも使用可能です。
まとめ
Pug を使う利点として
- 直感的にわかりやすい
- コンパイルが通れば、必ずブラウザでパースできる HTML が出力される（タイポの心配がない）
と言うものが上げられます。
HTML を直接書くよりもメリットが大きいです。ぜひ試してみてください。
