リストなど大量の情報をまとめて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

//- 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ファイルができます。

<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>

まとめ

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

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