Pug extendでblockを「書き換え」ではなく「追加」する方法

pug(旧Jade)、便利ですよねえ。

css – scssと違って互換性がなく、htmlから乗り換える時にひと手間必要になるせいで浸透しづらいですが、一度慣れてしまうと離れられない魅力があります。

閉じタグ探し、もう要らない。最高

そんなpugの大きな特徴のひとつに「extend」があります。
これは、外部のpugファイルを呼び出しつつ、必要な箇所だけ書き換えることができるという代物。

pug extends の block 基本挙動

div.greeting
    block greeting
        p.sample こんにちは。

extend part.pug
div.greeting
    block greeting
        p.sample 私の名前はkuboです。

これをコンパイルすると、こんなhtmlになります。

<div class="greeting">
    <p class="sample">私の名前はkuboです。</p>
<div>

ちなみに、blockを呼び出しただけで特に何も書かずにいれば、デフォルトの状態が吐き出されます。

<div class="greeting">
    <p class="sample">こんにちは。</p>
<div>

サンプルはだいぶ簡単にしてしまったためメリットを感じづらいですが、これがもう少し複雑なパーツになってくると本領を発揮します。

例えばテンプレートhtmlならぬ「テンプレートpug」を持っておくことで、metaタグ変換漏れなどのヒューマンエラーを防ぎつつ、最初のテンプレート構築で爆速スタートダッシュを体験できますよ。

ただし、上記のように、blockの基本的な挙動ではblockの内容を部分的に書き換えることはできません。このやり方で仮に「こんにちは」を残したい場合、その部分もわざわざ書き起こしてあげる必要があります。

div.greeting
    block greeting
        p.sample こんにちは。

extend part.pug
div.greeting
    block greeting
        p.sample こんにちは。
        p.sample 私の名前はkuboです。

これでやっと、こういうコンパイル結果が得られます。

<div class="greeting">
    <p class="sample">こんにちは。</p>
    <p class="sample">私の名前はkuboです。</p>
<div>

でもこれ、ちょっと微妙ですよね？ 「テンプレート」の良さを発揮しきれていない気がします。

この場合の理想の挙動としては、書き換えた内容だけが反映されて後の内容はデフォルトのまま書き出されて欲しいところです。

blockに「書き換え」でなく「追加」する方法

そこで登場するのが「block append」です。「block」コマンド単体ではblockを丸ごと書き換えていたのに対し、こちらのコマンドではblockの末尾に内容を追加することが可能です。

extend part.pug
div.greeting
    block append greeting
        p.sample 私の名前はkuboです。きちんと挨拶できる子なんですよ。

こうすると、こういうコンパイル結果になります。

<div class="greeting">
    <p class="sample">こんにちは。</p>
    <p class="sample">私の名前はkuboです。きちんと挨拶できる子なんですよ。</p>
<div>

ちなみに「block prepend」もあります。appendが末尾に追加なのに対し、こちらは先頭に追加されます。

よく使われるのは「append」の方かなと思いますが

まとめ

というわけで、Pug extendでblockを「書き換え」ではなく「追加」する方法でした。

extendってテンプレートhtmlで使われることが多いので、本当はここから「私がふだん使っているdefault.pug(テンプレートhtml)」まで話を広げようと思っていたんですが、var(変数)とか他の話も入ってきて蛇足感が出てきてしまったのでばっさり切りました。default.pugについては今度別の記事で掲載しようと思います。

わりと使い勝手自信ありなのでぜひ紹介させてほしい

ネットの海からいらした方、必要な情報が提供できてたら幸いです。

それでは、お互いハッピーweb制作体験を。