Pugを使って配列、オブジェクトをhtmlに出力する方法

Title

Pugを使って配列、オブジェクトをhtmlに出力する方法

Date

2018-12-15

Tags

リストなど大量の情報をまとめて html ファイルに出力する方法について書きます。

エクセルで企業リストに企業名、リンク先などの情報が記載された原稿を渡されたときなど、エクセルからのコピペでは疲弊してしまうので、pug を使って一気に html 化してしまおうという話です。

データの用意

まずは、エクセルから以下のような形に成型します。

[
  { name: 'google', url: 'http://www.google.com' },
  { name: 'yahoo', url: 'http://www.yahoo.co.jp' },
  { name: 'qiita', url: 'https://qiita.com/' }
];

pug ファイルの作成

先ほど用意したデータを以下のように pug ファイルを作成します。

//- pug
- var lists = [
    {name:"google",url:"http://www.google.com"},
    {name:"yahoo",url:"http://www.yahoo.co.jp"},
    {name:"qiita",url:"https://qiita.com/"}
  ];

ul
  each list, index in lists
    li
      a(href=list.url target="_blank")=list.name

出力後 html ファイル

pug ファイルを gulp などで html に変換します。(説明は割愛)

すると、以下の html ファイルができます。

<!-- html -->
<ul>
  <li><a href="http://www.google.com" target="_blank">google</a></li>
  <li><a href="http://www.yahoo.co.jp" target="_blank">yahoo</a></li>
  <li><a href="https://qiita.com/" target="_blank">qiita</a></li>
</ul>

まとめ

リストの数が多ければ多いほど威力を発揮してくれると思います。

コピペがしんどい時にぜひ。

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。