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

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

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

まとめ

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

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

ポートフォリオ・お問合せはこちら