【JavaScript】csvで日付順リスト生成

今回は、CSVを使用したリスト作成方法をご紹介します！

早速、今回作成したデモになります。

DEMO

次に、今回作成したデモの全体コードになります。

HTML

<div id="test">
  <section>
    <h2>リスト一覧</h2>
    <div class="test-list"></div>
  </section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery.csv.js"></script>

jquery.csv.jsは下記をコピーしてください。

jQuery.extend({
  csv: function (delim, quote, lined) {
    delim = typeof delim == "string" ? new RegExp("[" + (delim || ",") + "]") : typeof delim == "undefined" ? "," : delim;
    quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"') + "]") : typeof quote == "undefined" ? '"' : quote;
    lined = typeof lined == "string" ? new RegExp("[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;
    function splitline(v) {
      var arr = v.split(delim),
        out = [],
        q;
      for (var i = 0, l = arr.length; i < l; i++) {
        if (q = arr[i].match(quote)) {
          for (j = i; j < l; j++) {
            if (arr[j].charAt(arr[j].length - 1) == q[0]) {
              break;
            }
          }
          var s = arr.slice(i, j + 1).join(delim);
          out.push(s.substr(1, s.length - 2));
          i = j;
        } else {
          out.push(arr[i]);
        }
      }
      return out;
    }
    return function (text) {
      var lines = text.split(lined);
      for (var i = 0, l = lines.length; i < l; i++) {
        lines[i] = splitline(lines[i]);
      }
      var last = lines.length - 1;
      if (lines[last].length == 1 && lines[last][0] == "") {
        lines.splice(last, 1);
      }
      return lines;
    };
  }
});

CSS

#test section{margin-top:30px}
#test section h2{font-size:calc(3.2rem * 0.75);margin-bottom:10px;}
#test section .test-list{margin-top:10px}
#test section .test-list dl{display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:1px solid #dcdcdc;margin-bottom:5px;margin-top:0;position:relative;padding:10px 5px}
#test section .test-list dl:last-child{margin-bottom:0}
#test section .test-list dl::before{content:"";width:4px;height:4px;border-radius:50%;background:#111;position:absolute;top:50%;left:10px;transform:translateY(-50%)}
#test section .test-list dl dd{margin-right:10px;margin-left:0;padding-left:20px;width:100px}

HTMLとCSSについては、説明を省略します。

CSV

20210515,タイトル,https://~
20220304,タイトル,https://~
20220404,タイトル,https://~
...

使用したCSVはこの順番になります。

JS

$(function () {
  let csv;
      target = '.test-list';
      path1 = 'CSVのパス';
      insert = '';
  $.when(
    $.ajax({
      url: path1
    }).done(
      function (data) {
        csv = $.csv()(data);
      })
  ).done(function (data) {
    let result = csv.sort(function (a, b) {
      return (a[0] < b[0]) ? 1 : -1;
    });
    for (let i = 0; i < result.length; i++) {
      function toDate(str) {
        let arr = (str.substr(0, 4) + '/' + str.substr(4, 2) + '/' + str.substr(6, 2)).split('/');
        return new Date(arr[0], arr[1] - 1, arr[2]);
      };
      let DateList = result[i][0];
          DateListCON = toDate(DateList);
          DateY = (DateListCON.getFullYear());
          DateM = (DateListCON.getMonth() + 1);
          DateD = (DateListCON.getDate());
          chkYYYYMM = result[i][0].substring(0, 6);
          DateListCONALL = DateY + '.' + DateM + '.' + DateD;
          dd_day = '
' + DateListCONALL + '
';
          dt_title = '
' + result[i][1] + '
';
        insert += dd_day;
        insert += dt_title;
    }
    $(target).append(insert);
  });
});

JSはこんな感じになります。
難しい部分はないため、ざっくりと部分的に説明します。

let result = csv.sort(function (a, b) {
      return (a[0] < b[0]) ? 1 : -1;
    });

まずは、ここでcsvリストを日付順に並び替えを行います。
並び替えをしているため、csv上で日付順がバラバラになっていても問題ありません。

function toDate(str) {
      // 年月日変換
        let arr = (str.substr(0, 4) + '/' + str.substr(4, 2) + '/' + str.substr(6, 2)).split('/');
        return new Date(arr[0], arr[1] - 1, arr[2]);
      };
      // 描画
      let DateList = result[i][0];
          DateListCON = toDate(DateList);
          DateY = (DateListCON.getFullYear());
          DateM = (DateListCON.getMonth() + 1);
          DateD = (DateListCON.getDate());
          DateListCONALL = DateY + '.' + DateM + '.' + DateD;
          dd_day = '
' + DateListCONALL + '
';
          dt_title = '
' + result[i][1] + '
';
        insert += dd_day;
        insert += dt_title;

次に、ここで年月日変換と描画部分を追加しています。

$(target).append(insert);

最後に出力をすれば完成になります。

普段は、WP等のCMSを利用することが多いとは思いますが、WPは導入しなくてもいいな～っとなった場合には、管理が楽で便利ですよね！