1-6.icon-awesomes – CSV テーブルボディ

<!-- コンテナクラス名 / ファイル URL / テーブルクラス名 を入力 -->
<div 
  class="csv-table-tbody-loader" 
  data-csv-url="/wp-content/themes/wp-test/assets/csv/icon-awesome-plants.csv"
  data-table-class=""
>
  <table class="table-base">
    <thead>
      <tr><th colspan="3" class="bg-beige">植物</th></tr>
      <tr><th>slug</th><th>png</th><th>svg</th></tr>
    </thead>
    <tbody>
      <tr class="loading-row">
        <td colspan="3">CSVデータを読み込み中...</td>
      </tr>
    </tbody>
  </table>
</div>

<div 
  class="csv-table-tbody-loader" 
  data-csv-url="/wp-content/themes/wp-test/assets/csv/icon-awesome-files.csv"
  data-table-class=""
>
  <table class="table-base">
    <thead>
      <tr><th colspan="3" class="bg-beige">ファイル</th></tr>
      <tr><th>slug</th><th>png</th><th>svg</th></tr>
    </thead>
    <tbody>
      <tr class="loading-row">
        <td colspan="3">CSVデータを読み込み中...</td>
      </tr>
    </tbody>
  </table>
</div>
...

/* CSVデータ読み込み、テーブル生成 */
/* 汎用データ読み込み部 */
(function() {
  async function initCsvTableTbody() {
    const containers = document.querySelectorAll('.csv-table-tbody-loader');

    for (const container of containers) {
      const url = container.dataset.csvUrl;
      const customClass = container.dataset.tableClass;
      const table = container.querySelector('table');
      const tbody = container.querySelector('tbody');
      
      if (!url || !tbody) continue;

      if (customClass && table) {
        table.classList.add(customClass);
      }

      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const csvText = await response.text();

        if (csvText.trim()) {
          renderTbody(tbody, csvText);
        }
      } catch (error) {
        console.error('Fetch error:', error);
        if (tbody) {
          tbody.innerHTML = '<tr><td colspan="3">エラー: データの読み込みに失敗しました。</td></tr>';
        }
      }
    }
  }

  /* カスタム部：列定義、PNG、空フィールドスキップ指定 */
  function renderTbody(tbody, csvData) {
    const lines = csvData.match(/(".*?"|[^"\r\n]+)+(?=\r?\n|\n|$)/gs);
    if (!lines) return;

    tbody.innerHTML = '';

    // 列の定義（構造の可視化と保守性の向上）
    const COL_INDEX = {
      SLUG: 0,
      PNG: 1,
      SKIP: 2, // [2, 4, 5] 複数スキップの場合
      SVG: 3
    };

    lines.forEach((line, rI) => {
      if (!line.trim()) return;
      const rNum = rI + 1;

      const cells = [];
      const parts = line.match(/"([^"]*(?:""[^"]*)*)"|([^,]+)|(?<=,)(?=,)|(?<=,)(?=$)|(?<=^)(?=,)/g) || [];
      
      parts.forEach(p => {
        if (p.startsWith('"') && p.endsWith('"')) {
          cells.push(p.substring(1, p.length - 1).replace(/""/g, '"'));
        } else {
          cells.push(p);
        }
      });

      // 定義に基づいたデータ抽出
      const slug = (cells[COL_INDEX.SLUG] || "").trim();
      const cleanSvg = cells[COL_INDEX.SVG] || ""; 

      const bTr = document.createElement('tr');
      bTr.classList.add(`tr-${rNum}`);

      // 1列目: slug (tb-td-X行-1列`)
      const td1 = document.createElement('td');
      td1.classList.add(`tb-td-${rNum}-1`);
      td1.textContent = slug;
      bTr.appendChild(td1);

      // 2列目: PNG
      const td2 = document.createElement('td');
      td2.classList.add(`tb-td-${rNum}-2`);
      const pngPath = `/wp-content/themes/wp-test/assets/images/png/awesome/${slug}.png`;
      td2.innerHTML = `<img decoding="async" src="${pngPath}" alt="${slug}" width="24" height="24">`;
      bTr.appendChild(td2);

      // 3列目: SVG
      const td3 = document.createElement('td');
      td3.classList.add(`tb-td-${rNum}-3`);
      td3.innerHTML = cleanSvg; 

      bTr.appendChild(td3);
      tbody.appendChild(bTr);
    });
  }

  initCsvTableTbody();
})();