HTMLテンプレートエンジンのPugを導入するまで
フロントエンド周りでは作業効率化のためのいろんなツールが登場しています。今回はHTMLを作成するときに便利なテンプレートエンジンである「Pug」を導入するときの流れをまとめていきたいと思います。
Pugのパッケージをインストール
まず、Pugを使うにはNode.jsが必要になります。Node.jsのインストール方法などについて詳しくは過去記事「WEB開発環境（Mac OS）に必要な各種インストール方法まとめ（1）」にまとめていますので、こちらをご覧ください。 Node.jsはインストールされている状態で、Pugをインストールしていきます。今回はPugをコマンドラインで操作できるパッケージを使用していきます。下記コマンドを入力してnpmでインストールします。完了したらバージョンを表示させてチェックします。$ npm install -g pug // インストールされているか確認 $ pug --version
Pugを使ったHTMLコーディング
では、実際にPugを使ったコーディングをやっていきます。流れとしてはPugの記法で作成したpugファイルをコンパイルしてhtmlに変換するという流れになります。まずは基本の形でpug記法のコーディングをしていきます。 【sample.pug】doctype html
html(lang="ja")
head
meta(charset="utf-8")
link(rel="stylesheet" href="./style.css")
title Pugを使ったコーディング
body
div#wrap
header
h1.main_ttl.ttl タイトルタイトルタイトル
main
p テキストテキストテキストテキストテキストテキスト
footer
このようにPug記法 については特徴的ですが、主なルールとしては以下のような形になります。
1. doctype htmlでDOCTYPE宣言
2. タグ要素名はそのまま記述
3. 属性と値は要素の続けて（attr="value"）という形で記述
4. 要素ごとに改行する
5. インデントで入れ子の指定
6. 要素直後に半角スペースを入れてタグに入るテキストを入力
7. classやidは要素に続けて記述する
少し慣れるまで時間がかかりますが、慣れると閉じタグなども不要になるので正確に早くコーディングすることが可能ですね。
pugファイルをhtml形式にコンパイルする
Pugでのコーディングが終われば、「.pug」という拡張子で保存し、下記コマンドでコンパイルしhtmlに変換します。prettyオプションをつけることでタブなどを整形して出力してくれます。$ pug sample.pug // HTMLを整形して出力する場合 $ pug sample.pug --pretty先ほどのpugファイルがこんな感じでHTMLに変換されました。いつも通り見慣れた形になっていますね。ちなみにインデントを半角スペースとなるよう指定している場合はコンパイル時にエラーとなるのでインデントはハードタブ（タブになるよう）で設定しておく必要があります。 【sample.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style src="./style.css"></style>
<title>Pugを使ったコーディング</title>
</head>
<body>
<div id="wrap">
<header>
<h1 class="main_ttl ttl">タイトルタイトルタイトル</h1>
</header>
<main>
<p>テキストテキストテキストテキストテキストテキスト</p>
</main>
<footer></footer>
</div>
</body>
</html>
Pugを使うことで、HTMLコーディングがより早く正確に行うことができます。ですのでコーディングの効率化や工数の圧縮などに効果的なのではないでしょうか。このほかにも共通部分のインクルードやループなどもできるみたいなので、また別記事でまとめていきたいと思います。categories
- WordPress（61）
- JavaScript（49）
- Vue.js（48）
- CSS（46）
- jQuery（34）
- Nuxt.js（22）
- Sass（21）
- Gulp（17）
- webpack（16）
- PHP（14）
- HTML（14）
- GSAP（11）
- React（10）
- Vite（9）
- Pug（9）
- Laravel（8）
- Cordova（8）
- Linux（7）
- Next.js（6）
- Apache（5）
- Shopify（4）
- REST API（4）
- Node.js（4）
- Smarty（3）
- Git（3）
- JSON（3）
- その他プログラミング（3）
- Google Apps API（3）
- Bootstrap（3）
- 環境構築・システム（3）
- TypeScript（2）
- EJS（2）
- RMS（2）
- Docker（2）
- Instagram API（2）
- Excel VBA（2）
- SVG（1）
- Dart（1）
- ECカートASP（1）
- Markdown（1）
- AMP（1）
- Nginx（1）
- XML（1）
- shellscript（1）
- Ruby（1）
- MySQL（1）
