コーディングでは普段からよく使っているPugですが、HTMLとは記法が異なるため思わぬところでエラーが出るケースがあります。今回はinputやbr、hrなど閉じタグを省略できる要素を扱う場合に発生する「a self closing element: 〜but contains nested content」のエラー対応についてまとめてみたいと思います。Pugではタグのネストを改行とインデントで表現するのですが、終了タグが省略される場合にはネスト構造にできないため、このようなエラーが発生します。それはタグのネストだけでなく、タグの中にテキストコンテンツを含める場合も同じです。また、Pugについての記法については過去記事などにもまとめていますのでご参考に。   （過去記事） Pugで覚えておくと便利なコーディング方法まとめ（記法編） Pugで覚えておくと便利なコーディング方法まとめ（機能編）   具体的によくあるのが、下記のようにinput要素に続けてテキストを配置する場合などです。この場合に本来はインライン上でinput要素とテキストを続けて記載したいところなのですが、Pugの解釈ではinput要素のなかにテキストコンテンツを入れるというものになるため、コンパイル時にエラーが発生します。

label
  input(type="checkbox" name="hoge") 選択肢テキスト

Error: input is a self closing element: <input/> but contains nested content.

  テキストをそのまま配置せずに、span要素などを使うという方法もあるのですが、今回はPugの仕様について知るためにあくまで要素を使わない対応方法でチェックしてみたいと思います。  

パイプライン記号を使った対応

まずは、一番わかりやすいのがパイプライン記号（|）を使う方法です。Pugではネストする際に改行を行う必要があるのですが、テキストなどのインラインコンテンツをコードの可読性を上げる目的などで複数行で記述したいときに、このパイプライン記号を用いることで実現することができます。以下のように要素に続くテキストを改行して配置し、テキストの先頭にパイプライン記号を置き、スペースを加えます。

label
  input(type="checkbox" name="hoge") 
  | 選択肢テキスト

  このようにすることでエラーが解消しコンパイルが通るようになり、次のように本来意図する構造でHTMLが出力されるようになります。

<label>
  <input type="checkbox" name="hoge"> 選択肢テキスト
</label>

  コードを見る限りではわかりやすいのですが、本来のパイプラインを使った記法の意図する使い方というよりはインラインのテキストとして扱うために代用するハック的な使い方になりますね。  

インラインテキスト内でのタグ補完を使った対応

先ほどのパイプラインを使った方法は少しハック的な形でしたが、本来Pugにはインラインのテキスト内でHTMLタグを扱うための補完機能が用意されているので、それを使う方法になります。どちらかというとこの方法が正攻法という感じですね。このタグ補完を使うことで、下記のようにテキスト内にインラインでタグをPugの記法で書けるようになります。書き方としては#記号と角カッコを使う形になります。

p テキストテキスト#[strong 強調テキスト] テキストテキスト

// もしくは

p.
  テキストテキスト#[strong 強調テキスト] テキストテキスト

  この機能を使って、対象のタグを含めたインラインテキストとして記述することができます。

label #[input(type="checkbox" name="hoge")] 選択肢テキスト

  ただし、いくつか注意点があり、タグ補完の記述は下記のようにブロック行の先頭では使えません。#記号がID属性の値を示すため、ID名と認識されるようですね。

// ブロックの先頭ではタグ補完構文は使えない
label 
  #[input(type="checkbox" name="hoge")] 選択肢テキスト

Error: "[input" is not a valid ID.

 

---

  タグ補完を使う方法が本来のPugの機能に沿った形にはなりますが、コード可読性の視点からは少しわかりにくいのと、記述も面倒になるので、個人的にはパイプラインを使う方法がオススメなのかなと思います。もしくはspanなどで必ずテキストはタグで囲むようにするかですね。コーディングでもよくある場面だと思いますので、Pugを扱う際にはぜひ覚えておきたいですね。   （参考にさせて頂いたサイト） Pug Plain Text Pug Interpolation