このページを改善する

CSV データをテーブル化する

2020年4月1日 MichaelCurrin MichaelCurrin

このチュートリアルでは、Jekyll を使用して CSV を読み取り、データを HTML テーブルとしてレンダリングする方法を説明します。

このアプローチでは、

  • CSV の最初の行を HTML テーブルのヘッダーとして使用します。
  • 残りの行をテーブルの本文に使用します。
  • 元の CSV から列の順序を保持します。
  • 参照される *任意* の有効な CSV で動作するのに十分な柔軟性を備えています。

列の名前や列の数を指定する必要はありません。このチュートリアルのポイントは、行データを反復処理するときに、*最初の行* を取得して展開し、ヘッダー名を取得できることです。

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

1. CSV を作成する

Jekyll がそれを取得できるように、データファイルディレクトリに CSV ファイルを作成します。サンプルパスと 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 }}

結果は、次のような *ハッシュ*（キーと値のペアで構成されるオブジェクト）になります

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

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

行を展開する

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

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

しかし、列名を事前に指定することなく、*任意* の CSV で機能するソリューションが望ましいです。そのため、for ループを使用して row オブジェクトを反復処理します

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

これにより、以下が生成されます。各ペアの最初の項目は *キー* で、2 番目の項目は *値* になります。

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

テーブルヘッダー行を作成する

ここでは、テーブルヘッダー（th）タグで構成される単一のテーブル行（tr）を持つテーブルを作成します。ヘッダー名は、pair から最初の要素（インデックス 0）を取得することで見つけます。値はまだ必要ないため、2 番目の要素は無視します。

<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 行目以降のコンテンツは表示しません。これは、forloop.first を使用することで実現します。これは、*最初の* 行では true を返し、それ以外の場合は false を返すためです.

テーブルデータ行を追加する

このセクションでは、テーブルにデータ行を追加します。ここで、pair の 2 番目の要素を使用して値を見つけます。

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

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

上記のコードを使用すると、完全なテーブルは次のようになります

名 姓 年齢 場所
John Doe 35 アメリカ合衆国
Jane Doe 29 フランス
Jack Hill 25 オーストラリア

これで、Jekyll を使用して CSV を HTML テーブルに変換できるようになりました。

次のステップ

  • CSV のフィールド名を変更します。
  • 別の CSV を選択します。
  • テーブルに CSS スタイルを追加します。
  • JSON または YAML 入力ファイルを使用してテーブルをレンダリングします。
次へ