Improve this page

CSVデータをテーブル化

01 April 2020 MichaelCurrin MichaelCurrin

このチュートリアルでは、JekyllでCSVを読み込みデータをHTML tableにレンダリングする方法を示します。

このアプローチは：

  • CSVの最初の行をHTML tableのヘッダとして使用します。
  • 残りの行をtableのボディにします。
  • 元のCSVの列の順序を保持します。
  • 参照される_任意_の有効なCSVを処理するのに十分な柔軟性を有します。

列の名前は特定のものである必要はなく、何列あってもかまいません。
このチュートリアルの秘訣は、行データを反復処理するときに、_最初の行_を取得して、ヘッダ名を取得できることです。

以下の手順に従って、作成者のサンプルCSVをHTMLテーブルに変換します。

1. CSVを作成

Jekyllがピックアップできるように、Data filesディレクトリにCSVファイルを作成します。簡単なpathとCSVデータを以下に示します：

_data/authors.csv

First name,Last name,Age,Location
John,Doe,35,United States
Jane,Doe,29,France
Jack,Hill,25,Australia

これでJekyllで以下のようにするとデータファイルが有効になります：

{{ site.data.authors }}

2. テーブルを追加

テーブルを表示したいHTMlもしくはマークダウンファイルを選択します。

例えば：table_test.md

---
title: Table test
---

行を調べる

最初の行を取り出し、inspectフィルタを使用してどのように見えるかを確認します。

{% assign row = site.data.authors[0] %}
{{ row | inspect }}

結果は次のような_hash_ (キーと値のペアで構成されるオブジェクト)です。

{
  "First name"=>"John",
  "Last name"=>"Doe",
  "Age"=>"35",
  "Location"=>"United States"
}

Jekyllは、元のCSVに基づいて、実際にここで順序を_保持する_ことに注意してください。

行の解凍

簡単な解決策は、キーで行の値を検索するときにフィールド名をハードコードすることです。

{{ row["First name"] }}
{{ row["Last name"] }}

しかし解決法は_いかなる_CSVでもできるよう特定の列名でない方が好ましいです。
そこでrowオブジェクトをforループで反復処理します：

{% assign row = site.data.authors[0] %}
{% for pair in row %}
  {{ pair | inspect }}
{% endfor %}

これにより、以下が生成されます。各ペアの最初のアイテムは_key_、二つ目は_value_です。

["First name", "John"]
["Last name", "Doe"]
["Age", "35"]
["Location", "United States"]

テーブルヘッダ行を作成

一つのテーブル行(tr)にテーブルヘッダ(th)タグのtableを作成しました。ヘッダ名はpairの最初のエレメント(at index 0)で見つけています。まだ必要でないため、二つ目のエレメントは無視しました。

<table>
  {% for row in site.data.authors %}
    {% if forloop.first %}
    <tr>
      {% for pair in row %}
        <th>{{ pair[0] }}</th>
      {% endfor %}
    </tr>
    {% endif %}
  {% endfor %}
</table>

現時点では、2行目以降のコンテンツは表示されません。これは_first_行に対してtrueを返し、それ以外の場合はfalseを返すforloop.firstを使用しているためです。

tableデータ行の追加

このセクションではtableにデータ行を追加します。値を取得するためにpairの二つ目のエレメントを使用します。

便宜上、tablerowタグを使用してレンダリングします - これは forループのように機能しますが、内部データはtrおよびtdHTMLタグでレンダリングされます。残念ながら、ヘッダー行に相当するものはないため、前のセクションと同様に、完全に書き出す必要があります。

---
title: Table test
---

<table>
  {% for row in site.data.authors %}
    {% if forloop.first %}
    <tr>
      {% for pair in row %}
        <th>{{ pair[0] }}</th>
      {% endfor %}
    </tr>
    {% endif %}

    {% tablerow pair in row %}
      {{ pair[1] }}
    {% endtablerow %}
  {% endfor %}
</table>

上記のコードで、次のようなTableが完成します。

First name Last name Age Location
John Doe 35 United States
Jane Doe 29 France
Jack Hill 25 Australia

これでJekyllでCSVをHTML tableに変換できるようになりました。

Next steps

  • Change the field names in the CSV.
  • Choose a different CSV.
  • Add CSS styling to your table.
  • Render the table using a JSON or YAML input file.
Next