Pugでのコーディングに関するお話
仕事と暮らし
Pugってなに？
Pugと聞くと犬を思い浮かべる人が多いでしょうが、正解です。犬です。
でも、このPugはただの犬ではありません。
シンプル且つ効率的にコーディングするための、HTMLテンプレートエンジン犬です。
インデントベースの記述で、HTMLをより簡潔に書くことができます。
と、おふざけはここまでにして説明していきましょう。
Pugのインストール
Node.jsがインストールされている環境で、以下のコマンドを実行するとPugを利用できます。
npm install -g pug-cliまたは、プロジェクトのローカル環境にインストールする場合は以下のコマンドを使用します。
npm install --save-dev pugPugの基本構文
では、ここからは実際にPugで書くとどんな感じになるのか、またそれがHTMLに変換されるとどうなるのかをお見せしたいと思います。
1. 要素の記述
Pugでは、HTMLタグをインデントを使って階層的に記述できます。
こんな感じです。
doctype html
html
head
title Pugについて
body
h1 こんにちは、Pug！
p これはPugで書かれたHTMLです。上記のコードは以下のHTMLに変換されます。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは、Pug！</h1>
<p>これはPugで書かれたHTMLです。</p>
</body>
</html>2. 属性の記述
属性はカッコ () を使って記述します。
a(href="https://example.com" target="_blank") リンクテキスト変換するとこうなります。
<a href="https://example.com" target="_blank">リンクテキスト</a>3. クラスとID
クラスは「.」、IDは「#」で指定します。
div.container
h1#main-title タイトル
p.text 説明文変換すると
<div class="container">
<h1 id="main-title">タイトル</h1>
<p class="text">説明文</p>
</div>4. ネスト
要素を階層化したい時は、インデントでネストします。
nav
ul
li: a(href="#") ホーム
li: a(href="#") サービス
li: a(href="#") お問い合わせ5. 変数とループ
これが便利！変数やループを利用できます。
- var items = ['Apple', 'Banana', 'Cherry']
ul
each item in items
li= item変換後
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>いかがだったでしょうか。
どことなく書き方がCSSやSCSSに似て書きやすそうですよね。
Pugを使うことで、HTMLをより簡潔かつ効率的にコーディングできます。
特に、テンプレートエンジンとして利用する場合、変数やループの活用がかなり便利です。
ぜひ、皆さんもプロジェクトでPugを活用してみてください！
山口県育ちの音楽大好きおっちゃんです。10年ほど関東にいましたが、Uターンで地元山口に帰ってきました。山口のことや、Webのことなど、さまざまな情報を共有していければと思います。どうぞ何卒よろしくお願いいたします。
REC.