初めてPugを使った時、変数の設定や、mixin等があってとても便利だと思ったのですが、 出来るハズだろうことが公式ドキュメントに書いておらず、戸惑ってしまうことがありました。 (じっくり読めばサンプルコードから汲み取れるものはあるのですが。。)
そこで今回は、当時迷ったことをtipsとして紹介します。
変数の定義と使い方
変数の定義は簡単です。
Pug
//- 変数定義
- var dog = 'wan-wan'
//-
一度に複数定義するなら、
ハイフンの次の行以降で、ネストを深くします
-
var cat = 'nya-'
var pig = 'bo-'
//- 変数はこのように使います
p dog : #{dog}
p cat : #{cat}
p pig : #{pig}
//- もちろんJavaScriptの中でも指定可能です
script.
var dog = '#{dog}';
結果
<p>dog : wan-wan</p>
<p>cat : nya-</p>
<p>pig : bo-</p>
<script>var dog = 'wan-wan';</script>
配列の定義と、要素の取り出し方
次に配列の定義と、要素の取り出しです。
Pug
//- 配列は変数と同じくvarを使います
-
var animalsArr = [
'dog', 'cat', 'wolf', 'lion'
]
//- 配列なのでキーを[]で囲む
p animalsArr[2] : #{animalsArr[2]}
結果
<p>animalsArr[2] : wolf</p>
オブジェクトの定義と、要素取り出し方
//-
変数や、配列と同じようにvarを使います。
指定方法はJavaScriptと同じです。
-
var dogObj = { name: 'dog', cry: 'wan-wan' }
var animalsObj = [
{ name: 'cat', cry: 'nya-' },
{ name: 'wolf', cry: 'woo-' },
{ name: 'lion', cry: 'gao-' },
]
//-
使い方はいくつかのパターンがあります
これもJavaScriptと同じように指定することができます
p dogObj : #{dogObj.name}は#{dogObj.cry}と鳴く。
p animalsObj[0] : #{animalsObj[0]['name']}は#{animalsObj[0]['cry']}と鳴く。
p animalsObj[2] : #{animalsObj[2].name}は#{animalsObj[2].cry}と鳴く。
結果
<p>dogObj : dogはwan-wanと鳴く。</p>
<p>animalsObj[0] : catはnya-と鳴く。</p>
<p>animalsObj[2] : lionはgao-と鳴く。</p>
内部的な複数行の文章
Pugでは改行やインデントに意味があります。 Pugでは、行頭はタグ名でなければならないというルールがあるため、 単に改行するだけでは、エラーになってしまいます。
とはいえ、長い文章を1行でつらつらと書き連ねるのもありですが、 適度に改行を入れた方がソースが見やすくなります。
長い文章の場合、どのように指定すればよいでしょうか。 その解決方法を示します。
Pug
p
| このように、行の先頭にパイプを指定すると、
| 文章を複数行に分けて書くことができます。
p.
タグの末尾に「.」を付けると、
文章を複数行に分けて書くことができます。
scriptタグや、styleの指定に便利です。
結果
<p>
このように、行の先頭にパイプを指定すると、
文章を複数行に分けて書くことができます。
</p>
<p>
タグの末尾に「.」を付けると、
文章を複数行に分けて書くことができます。
scriptタグや、styleの指定に便利です。
</p>
タグの入れ子
文章で強調したい場合に、文字をタグで囲むことがあると思います。 本的にPugは、1行に1つのタグというルールがあるので、 インラインタグをそのようにしていしなければいけないのでしょうか。
実はその対応方法もあります。
#[tag 文字列]という形式で指定します。
Pug
p
| 文章の中でspanタグ等を使いたい場合、
| #[span (囲いたい文字列)]とすると、
| "(囲いたい文字列)"がspanタグの中に入ります。
| b、em、codeタグ等は、この指定を使うと便利です。
p
| このように
| タグをそのまま使うこともできます。
p
| 短縮タグ自体も入れ子にすることができます。
| #[span #[b #[em こんな感じ]]]です。
結果
<p>
文章の中でspanタグ等を使いたい場合、
<span>(囲いたい文字列)</span>とすると、
"(囲いたい文字列)"がspanタグの中に入ります。
b、em、codeタグ等は、この指定を使うと便利です。
</p>
<p>
<span>このように</span>
タグをそのまま使うこともできます。
</p>
<p>
短縮タグ自体も入れ子にすることができます。
<span><b><em>こんな感じ</em></b></span>です。
</p>
以上です。 Pugは工夫すればとても便利なので、是非使いこなしてくださいね。