pugでPHPを無理やり使うための4つの技

2017-07-30

pug は基本静的サイトを作るテンプレートエンジンなので、PHP などをいれることは想定していません。なので公式にはフォローしていないため、普通に pug のなかに PHP などプログラムを書こうとしても書けません。

プログラムをガッツリ書くことは正直厳しいかなと思うのですが、ちょっと使うぐらいなら使えるかなという技がいくつかあるので記事にしてみます。

pug&php

pug の include を使う

pug には include の機能があるので、それを使って PHP ファイルを include してしまおうという作戦です。

//コンパイル前
section
  div
    include _include.php

//コンパイル後
<section>
  <div>
    <?php
      echo 'pug is pretty';
    ?>
  </div>
</section>

include は pug ファイルを include するのに基本使いますが、html でも php でもなんでも include 出来ます。

この方法は見やすいですし、良いところもあるのですが、弱点もあります。例えば、pug で include するので、PHP が欲しいところそれぞれの include 用の PHP ファイルを作らなければいけないこと。ファイルだらけになります。

あとは、pug での include なのでインデントが増えてしまうところ。ヒアドキュメントなどを使っているとインデントが増えることによる弊害は起こるのかなと思います。

ドット.を使って

pug は要素名のあとにドット. を付けてあげてその後に続けて書くと pug としてコンパイルせずに出力してくれます。それを利用します。

//コンパイル前
section
  div.
    <?php
      echo 'pug is pretty';
    ?>

//コンパイル後
<section>
  <div>
    <?php
      echo 'pug is pretty';
    ?>
  </div>
</section>

ドット. なので若干見づらいことを除けばそれなりに使えます。ただ pug なのでインデントを規則通りしっかり取らないとコンパイルしてくれません。

section
  div.
    <?php
  //これだとインデントの規則を守っていない
  echo 'pug is pretty';
    ?>

div のあとにドット. をつけているので、div のインデントよりも後ろになるように書かないとコンパイルエラーが出ます。あくまでも pug の語法に即してということです。

//コンパイル前
section
  div.
    <?php
      include 'include.php';
      get_my_html();
    ?>

//コンパイル後
<section>
  <div>
    <?php
      include 'include.php';
      get_my_html();
    ?>
  </div>
</section>

インデントのみ意識して普通に PHP を書くだけなので、PHP の include も使えて応用範囲が広いです。関数などを使うことで、include ファイルだらけになることも防げそうです。

縦棒|を使って

ドット. では少し見にくいのですが、縦棒| を使うと割りかし見やすいです。

//コンパイル前
section
  div
    |<?php
    |  echo 'pug is pretty';
    |?>

//コンパイル後
<section>
  <div>
    <?php
      echo 'pug is pretty';
    ?>
  </div>
</section>

ドット. と同じくインデントを守らなければいけませんが、縦棒| があるので少しだけ見やすい気がします。pug における正しい縦棒| の使い方じゃないのですが分かりやすいです。

ただ、縦棒| を書き続けてプログラムを書くのはキツイので、PHP の include を使って最低限だけ書くようにしたほうが完結に済みます。

//コンパイル前
section
  div
    |<?php
    |  include 'include.php';
    |  get_my_html();
    |?>

//コンパイル後
<section>
  <div>
    <?php
     include 'include.php';
     get_my_html();
    ?>
  </div>
</section>

テキストの箇所に書く

イマイチ正式名称がわかりませんが、下の例みたいな感じで書くとちゃんと PHP としてコンパイルしてくれます。

//コンパイル前
section
  div <?php echo 'pug is pretty'; ?>

//コンパイル後
<section>
  <div><?php echo 'pug is pretty'; ?></div>
</section>

pug でタグ内に入れるテキストを書く箇所は < や > をエスケープせずにそのまま出力してくれるので、PHP として使えます。

少しだけ使いたい部分があるときなんかは便利です。

まとめ

タイトルにもありますが、あくまでも無理やり使う方法です。使うことでファイルの管理がしにくくなりますし、面倒くさくなります。

「pug 使いたい！でもどうしても PHP も使いたい！」というとき限定かなと思います。

使ったことはないのですが「jade-php」という npm のプラグインもあるようです。jade というのが気になることと、あまり独自な感じの語法を増やしていくのはいろいろと弊害があるので何とも言えませんが、もっと楽したい場合はありかもしれません。

参考：jade-php | npm