Pugのmixinの引数をオブジェクト形式で設定する

Pugのmixinを作成する際、複数設定した引数の一部だけ使いたいということがあったので、オブジェクト形式で設定する方法を試してみます。

サンプルコード

今回はカード型のコンポーネントで、ブログの記事を出力する想定で試してみます。
まずは引数を用意する前のmixinです。

mixin item()
  .c-card
    a.c-card__link(href="#")
      .c-card__img
        img(src="sample.jpg" alt="")
      .c-card__tags
        .c-icon NEW
        .c-icon オススメ
      .c-card__title 記事名サンプル
      .c-card__body
        | 記事説明文テキスト記事説明文テキスト

mixinを使ってみます。

+item()

特に引数なども設定していないので、mixinの内容がそのまま出力されます。

<div class="c-card">
  <a class="c-card__link" href="#">
    <div class="c-card__img"><img src="sample.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">NEW</div>
      <div class="c-icon">オススメ</div>
    </div>
    <div class="c-card__title">記事名サンプル</div>
    <div class="c-card__body">記事説明文テキスト記事説明文テキスト</div>
  </a>
</div>

次に引数と初期値を通常通り設定してみます。

//-
  options
    link: 'リンク先',
    img: '画像パス',
    title: 'タイトル',
    body: '本文',
    tags: [タグリスト]

mixin item(link='#', img='sample.jpg', title='記事名サンプル', body='記事説明文テキスト記事説明文テキスト', tags=['NEW','オススメ'])
  .c-card
    a.c-card__link(href=link)
      .c-card__img
        img(src=img alt="")
      .c-card__tags
        - for (var x = 0; x < tags.length; x++)
          .c-icon #{tags[x]}
      .c-card__title #{title}
      .c-card__body #{body}

引数を指定しないパターンと指定するパターンで使ってみます。

+item()
+item('/', 'custom.jpg', 'タイトル設定テスト', '本文設定テスト', ['タグA', 'タグB'])

引数を指定した場合はその内容で出力ができるのを確認できました。

<div class="c-card">
  <a class="c-card__link" href="#">
    <div class="c-card__img"><img src="sample.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">NEW</div>
      <div class="c-icon">オススメ</div>
    </div>
    <div class="c-card__title">記事名サンプル</div>
    <div class="c-card__body">記事説明文テキスト記事説明文テキスト</div>
  </a>
</div>

<div class="c-card">
  <a class="c-card__link" href="/">
    <div class="c-card__img"><img src="custom.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">タグA</div>
      <div class="c-icon">タグB</div>
    </div>
    <div class="c-card__title">タイトル設定テスト</div>
    <div class="c-card__body">本文設定テスト</div>
  </a>
</div>

この引数の指定でも問題はないのですが、例えばタイトルのみ個別に設定したい、みたいなことができません。

この解決方法として、引数をオブジェクト形式にする方法を試してみます。
まずは試した際にうまくいかなかった例です。

//-
  options
  {
    link: 'リンク先',
    img: '画像パス',
    title: 'タイトル',
    body: '本文',
    tags: [タグリスト]
  }

mixin item(options)
  .c-card
    a.c-card__link(href=options.link)
      .c-card__img
        img(src=options.img alt="")
      .c-card__tags
        - for (var x = 0; x < options.tags.length; x++)
          .c-icon #{options.tags[x]}
      .c-card__title #{options.title}
      .c-card__body #{options.body}

引数を指定して実行します。

+item({
  link: '/',
  img: 'custom.jpg',
  title: 'タイトル設定テスト',
  body: '本文設定テスト',
  tags: ['タグA', 'タグB']
})

この場合は意図した形で出力できましたが、引数を指定していない場合にエラーになりました。

<div class="c-card">
  <a class="c-card__link" href="/">
    <div class="c-card__img"><img src="custom.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">タグA</div>
      <div class="c-icon">タグB</div>
    </div>
    <div class="c-card__title">タイトル設定テスト</div>
    <div class="c-card__body">本文設定テスト</div>
  </a>
</div>

mixin内での初期設定を追加します。

//-
  options
  {
    link: 'リンク先',
    img: '画像パス',
    title: 'タイトル',
    body: '本文',
    tags: [タグリスト]
  }

mixin item(options)
  //- オプションが設定されていない場合の初期設定
  - var options = options||{};
  - var link = options.link?options.link:'#';
  - var img = options.img?options.img:'sample.jpg';
  - var title = options.title?options.title:'記事名サンプル';
  - var body = options.body?options.body:'記事説明文テキスト記事説明文テキスト';
  - var tags = options.tags?options.tags:['NEW','オススメ'];

  .c-card
    a.c-card__link(href=link)
      .c-card__img
        img(src=img alt="")
      .c-card__tags
        - for (var x = 0; x < tags.length; x++)
          .c-icon #{tags[x]}
      .c-card__title #{title}
      .c-card__body #{body}

引数のないパターンとあるパターン、一部のみ変更するパターンをそれぞれ試してみます。

+item()
+item({
  link: '/',
  img: 'custom.jpg',
  title: 'タイトル設定テスト',
  body: '本文設定テスト',
  tags: ['タグA', 'タグB']
})
+item({
  title: 'タイトルのみ設定テスト',
})

これで各パターン意図した形での出力ができました。

<div class="c-card">
  <a class="c-card__link" href="#">
    <div class="c-card__img"><img src="sample.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">NEW</div>
      <div class="c-icon">オススメ</div>
    </div>
    <div class="c-card__title">記事名サンプル</div>
    <div class="c-card__body">記事説明文テキスト記事説明文テキスト</div>
  </a>
</div>

<div class="c-card">
  <a class="c-card__link" href="/">
    <div class="c-card__img"><img src="custom.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">タグA</div>
      <div class="c-icon">タグB</div>
    </div>
    <div class="c-card__title">タイトル設定テスト</div>
    <div class="c-card__body">本文設定テスト</div>
  </a>
</div>

<div class="c-card">
  <a class="c-card__link" href="#">
    <div class="c-card__img"><img src="sample.jpg" alt=""/></div>
    <div class="c-card__tags">
      <div class="c-icon">NEW</div>
      <div class="c-icon">オススメ</div>
    </div>
    <div class="c-card__title">タイトルのみ設定テスト</div>
    <div class="c-card__body">記事説明文テキスト記事説明文テキスト</div>
  </a>
</div>