PugでPHPを正しく出力する方法

pugはHTMLのテンプレートエンジンであり、phpを使うことはおそらく想定しないで開発されたものです。

しかし、開発プロジェクトによっては、pugを使いつつphpのタグも使いたいという場合もあるかもしれません。そのような時のために、pugでphpを使う方法をまとめてみました。

今回紹介する内容は、pugの中でphpタグを書き、正しい形式でコンパイルされることをゴールとしています。

HTMLタグの中でPHPタグを使う

一行の場合

// pug

div <?php echo "Pug"; ?>

// コンパイル後

<div><?php echo "Pug"; ?></div>

pugでタグの中にテキストを記述するようなシンプルな記法です。

複数行の場合

.（ドット）を使う方法

div.
    <?php
        echo "Pug";
    ?>

htmlタグの後に.（ドット）を書き、改行とインデントを開けてphpタグを書きます。

pugは.（ドット）の後に改行とインデントを開けることで、そのままの形でコンパイルしてくれます。その機能を利用した方法です。

|（パイプライン）を使う方法

div
    | <?php
    |    echo "Pug";
    | ?>

htmlタグを書いたら改行してインデントを開け、|（パイプライン）と半角スペースを書き、その後にphpタグを書きます。

href等の属性値の中でPHPタグを使う場合

a(href!= "<?php echo "Pug"; ?>") テキスト

普通は属性名="属性値"のように書くと思いますが、属性値の中でphpタグを使う場合は以下のように書きます。

属性名!= "属性値"

=の手前に!を、後ろに半角スペースを空けることで、属性値の中でphpタグを使えるようになります。

まとめ

pugの中でphpをたくさん使うと、どんどんコードが見にくくなってしまうので、includeなどを駆使して出来るだけ見やすいコードになるように心がけましょう。

また、pugは複雑なことをしなければ比較的簡単に扱うことが出来ます。もし使い方で迷ったら公式ドキュメントを見てみると意外と解決することもあるので、一度目を通してみてはいかがでしょうか。

Pug公式ドキュメント：https://pugjs.org/api/getting-started.html