Pugで覚えておくと便利なコーディング方法まとめ（機能編）
最終更新日： Update!!
HTMLテンプレートエンジンのPugですが、前回記事「HTMLテンプレートエンジンのPugを導入するまで」では導入までの流れと基本的なコーディング方法を紹介しましたが、今回はPugを活用するための便利な機能をまとめていきたいと思います。
ここまでくるとよりプログラミングっぽくなってきましたね、このほかにもいろんな機能があるようなのですが、詳しくは公式サイトのドキュメントを見ていただくのが早いかと思います。慣れるとかなりコーディングスピードが上がりそうですね！
1. 変数定義・ミックスイン
プログラミングでは基本となる変数を扱ったり、Sassなどではおなじみのミックスインも使うことができます。特有の記述方法になりますので慣れるまでは大変ですが、基本的には同じような感じで記述することになります。 変数を定義し出力する- var variable = 'Hello World!!'
p #{variable}
// 出力結果
<p>Hello World!!</p>
ミックスインを定義し出力する
mixin navigation nav ul li ナビメニュー1 li ナビメニュー2 li ナビメニュー3 +navigation // 出力結果 <nav> <ul> <li>ナビメニュー1</li> <li>ナビメニュー2</li> <li>ナビメニュー3</li> </ul> </nav>ミックスインで引数を使用する
mixin navigationItem(arg)
li= arg
nav
ul
+navigationItem('ナビメニュー1')
+navigationItem('ナビメニュー2')
+navigationItem('ナビメニュー3')
// 出力結果
<nav>
<ul>
<li>ナビメニュー1</li>
<li>ナビメニュー2</li>
<li>ナビメニュー3</li>
</ul>
</nav>
2. 要素のループ
同じ要素を繰り返す場合はループさせることが可能です。ループさせるにはいくつかの方法がありますが、全く同じものを繰り返す、順番によってテキストを変える、などそれぞれにあった内容を選択するようにしましょう。 for文でループさせるul
- for (var i = 0; i < 3; i++) {
li リスト
- }
// 出力結果
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
while文でループさせる
- var n = 0; ul while n < 3 li= n++ // 出力結果 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>each文でループさせる
ul each val in ['one','two','three'] li= val // 出力結果 <ul> <li>one</li> <li>two</li> <li>three</li> </ul>
3. 外部ファイルのインクルード
PHPやSSIのように外部ファイルをテンプレートとしてファイル内にインクルードさせることができます。ページの共通部分がたくさんある場合はメンテナンス性が向上します。ファイル先頭にアンダースコアをつける必要はないですが、目印としてつけておくと管理しやすくなります。ここでは下記のファイル構成を想定しています。index.pug _includes ┣ _header.pug ┣ _main.pug ┗ _footer.pugではそれぞれのファイルをみていきます。 【index.pug】
doctype html html(lang="ja") head meta(charset="utf-8") link(rel="stylesheet" href="./style.css") title サンプルコーディング body include _includes/_header.pug main p コンテンツ include _includes/_footer.pug【_includes/header.pug】
header h1 H1テキスト nav ul li ナビ1 li ナビ2 li ナビ3【_includes/footer.pug】
footer span.copyright COPYRIGHT ALL RIGHT RESERVED.これらそれぞれのPugファイルがインクルードされて1つのHTMLになりますと、このような形になります。 【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<title>サンプルコーディング</title>
</head>
<body>
<header>
<h1>H1テキスト</h1>
<nav>
<ul>
<li>ナビ1</li>
<li>ナビ2</li>
<li>ナビ3</li>
</ul>
</nav>
</header>
<main>
<p>コンテンツ</p>
</main>
<footer><span class="copyright">COPYRIGHT ALL RIGHT RESERVED.</span></footer>
</body>
</html>
4. 条件分岐
プログラミングではおなじみの条件分岐もif文やcase文のような形式で記述することができます。javascriptの感覚でコーディングできるのでイメージしやすいかと思います。 if文を使った条件分岐- var value = 'hoge' if value === 'hoge' p 値は「hoge」です else p 値は「hoge」ではありません // 出力結果 <p>値は「hoge」です</p>case文を使った条件分岐
- var num = 5
case num
when 0
p No count
when 1
p 1st count
default
p #{num} counts
// 出力結果
<p>5 counts</p>
ここまでくるとよりプログラミングっぽくなってきましたね、このほかにもいろんな機能があるようなのですが、詳しくは公式サイトのドキュメントを見ていただくのが早いかと思います。慣れるとかなりコーディングスピードが上がりそうですね！
この記事を書いた人
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories