Pugのincludeとmixinの違いと使いわけについてまとめ

Pug2020.9.8

最終更新日：2020.9.8 Update!!

Pugにはいろんな便利機能がありますが、今回はその中でも比較的よく使う「include」とそれによく似た「mixin」について詳しい違いや使い分けについてまとめていきたいと思います。過去記事「Pugでページテンプレートの作成にextendsとblockを活用する」では、extendsを使ってページの大枠となるレイアウトを流用するケースについてまとめていますが、includeとmixinも併用することでより効率よくページコーディングを行うことができます。また、今回はサンプルとしてこのようなファイル構成を想定しています。

index.pug
components
　　┣ _header.pug
　　┗ _footer.pug

include：外部ファイルを読み込む

includeを使うと外部のPugファイルをインクルードして読み込むことができます。なのでファイルを分割して管理できるようになります。分割したファイルは先頭にアンダースコア（_）をつけることで、コンパイルされないようにしておくのを忘れないようにしましょう。ここではページテンプレートとなるPugファイルで、外部ファイルとして切り出した、ヘッダー用とフッター用のPugファイルをインクルードさせています。【index.pug】

include components/_header.pug
    main.
      ページのメインコンテンツです
include components/_footer.pug

このようにヘッダー部分とフッター部分を切り出しています。ファイルが長くなる場合や共通テンプレートが多くなる場合にはこのような設計がとても効果的です。【_header.pug】

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
  body
    header.
      ヘッダーコンテンツです

【_footer.pug】

    footer.
      フッターコンテンツです

コンパイルすると1つのHTMLにインクルードされた外部ファイルが読み込まれて合わさっているのが確認できます。【index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <header>ヘッダーコンテンツです</header>
    <main>ページのメインコンテンツです</main>
    <footer>フッターコンテンツです</footer>
  </body>
</html>

また、includeではPugファイルの他にもCSSファイルやプレーンテキストファイルなども読み込むことができます。下記ではstyleタグの中に、外部CSSファイルに記述されたCSSをそのまま読み込んでいる形になります。【_header.pug】

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style
      include css/style.css
  body
    header.
      ヘッダーコンテンツです

もちろんCSSは通常通りに記述できます。これがそのままHTML内に出力されるようになります。【style.css】

h1 {
  color: red;
}

コンパイルしたものを実際に確認してみると読み込んだCSSが出力されているのが確認できます。【index.html】※一部抜粋

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <header>ヘッダーコンテンツです</header>
............

これがincludeの機能になります。比較的、仕組みが理解しやすいのでよく使われているのではないでしょうか。PHPでも似たようなものがあり、ページテンプレートのフレームワークなどでも同じような使い方をするケースも多いですね。

mixin：関数を定義することができる

includeによく似ていますが、mixinは関数を定義して、それをPugファイル内で実行することができます。具体的にはこのようにファイル内でmixinとして関数を定義します。今回はグローバルナビのリストを出力する関数をサンプルとして作成してみました。【index.pug】

include components/_header.pug

mixin globalNavi(items, current)
  ul
    each item in items
      if current === item
        li.current= item
      else
        li= item

  main
    +globalNavi(['home', 'about', 'info', 'contact'], 'home')

include components/_footer.pug

mixinで関数を定義したら、改行とインデントを入れて出力する内容を記述していきます。ここではリスト形式で、引数で受けた値の分だけ繰り返すような形になっています。その際に引数で現在表示されているページを表す値も指定できるようにしておき、条件分岐で現在ページの場合には特定のclass名が振られるようにしています。定義したmixinはPugファイル内で「+」を入れることで呼び出すことができます。関数名を続けて記述し、受け渡す引数を入れていきます。これでコンパイルしてみると下記のように指定した値が出力されているのがわかります。【index.html】※一部抜粋

............
  <main>ページのメインコンテンツです
    <ul>
      <li class="current">home</li>
      <li>about</li>
      <li>info</li>
      <li>contact</li>
    </ul>
  </main>
............

また、mixinですが上記のようにPugファイル内で定義する方法以外にも、外部ファイルに定義したものをincludeで読み込むこともできます。読み込んだmixinは同じように、+のあとに関数名を記述することで呼び出すことができます。【index.pug】

include _mixin.pug
include components/_header.pug
    main
      +globalNavi(['home', 'about', 'info', 'contact'], 'home')
include components/_footer.pug

mixinの数が多くなってきたり、複数ページで使い回す場合などはこのように別ファイルにまとめてしまった方がいいかもしれませんね。【_mixin.pug】

mixin globalNavi(items, current)
  ul
    each item in items
      if current === item
        li.current= item
      else
        li= item

includeとmixinの使い分け

このようにincludeとmixinは似ているようですが詳しく見てみると異なる機能を持っています。どちらかというと基本的にはincludeの方がよく使う場面も多く、開発規模に関わらず、どんなプロジェクトでも相性がいいのではないでしょうか。その逆にmixinは少し複雑な構造や機能が求められる場合に効果を発揮しそうですね。個人的な意見になりますが、具体的にまとめますと次のような使い分けがいいかと思います。

include	外部のファイルをインクルードさせる、ファイル内容をそのまま出力する場合など
mixin	特定の処理をまとめた関数を呼び出す、ファイル単位で動的に処理を切り分けたい場合など

includeは静的な内容を、mixinは関数として処理を変えれるので動的な内容を出力するというのが大きな違いですね。何れにしてもPugの便利な機能の恩恵を受けるには両方理解した上で使いこなせるのがベストではないでしょうか。

今回はPugのincludeとmixinについて違いを詳しく見ていき、使い分ける方法についてまとめてみました。普段HTMLで書くことに慣れているとあまり意識しないですが、Pugを使うことでよりプログラミング的にHTMLコーディングを行うことになりますので、効率のよい書き方や、便利な処理などもより鮮明に見えてきます。そんな時にはPugの便利な機能を使いこなしてコーディングすることをお勧めします。ぜひ試してみてはいかがでしょうか。