JavaScript/jQueryで同じ処理をできる限りスマートにしたい。

お世話になります。
外部CSVデータを読み取り、カテゴリごとに別けてslickに書き出すという処理をしております。
その際、CSVを書き出すときに同じ処理を繰り返し記述しています。
この処理をスマートに出来ないでしょうか？

html
1<head>
2<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
3<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
4
5<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
6<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
7<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
8</head>
9
10<body>
11    <div id="slick_1" class="slick_box">
12        <ul class="slider">
13        </ul>
14    </div>
15    <div id="slick_2" class="slick_box">
16        <ul class="slider">
17        </ul>
18    </div>
19    <div id="slick_3" class="slick_box">
20        <ul class="slider">
21        </ul>
22    </div>
23</body>

Javascript
1$(function(){    
2    //slider
3    function sliderInit(){
4        $(".slider").slick({
5            autoplay: false,
6            dots: false,
7            arrows:true,
8            centerMode: true,
9            centerPadding: '10%',
10            slidesToShow: 1,
11            slidesToScroll: 1
12        });
13    }
14
15    //CSV書き出し
16    function readCsv(data) {
17        var csv = $.csv.toArrays(data);
18        var insert_1 = '';
19        var insert_2 = '';
20        var insert_3 = '';
21        $(csv).each(function() {
22            if (this.length > 0 && this[0] === 'カテゴリ1') {
23//                insert_1 += '<li>';
24                insert_1 += '<div>' + this[0] + '</div>';
25                insert_1 += '<div>' + this[1] + '</div>';
26                insert_1 += '<div>' + this[2] + '</div>';
27                insert_1 += '<div>' + this[3] + '</div>';
28                insert_1 += '<div>' + this[4] + '</div>';
29                insert_1 += '<div>' + this[5] + '</div>';
30                insert_1 += '</li>';
31            } else if (this.length > 0 && this[0] === 'カテゴリ2') {
32                insert_2 += '<li>';
33                insert_2 += '<div>' + this[0] + '</div>';
34                insert_2 += '<div>' + this[1] + '</div>';
35                insert_2 += '<div>' + this[2] + '</div>';
36                insert_2 += '<div>' + this[3] + '</div>';
37                insert_2 += '<div>' + this[4] + '</div>';
38                insert_2 += '<div>' + this[5] + '</div>';
39                insert_2 += '</li>';
40            } else if (this.length > 0 && this[0] === 'カテゴリ3') {
41                insert_3 += '<li>';
42                insert_3 += '<div>' + this[0] + '</div>';
43                insert_3 += '<div>' + this[1] + '</div>';
44                insert_3 += '<div>' + this[2] + '</div>';
45                insert_3 += '<div>' + this[3] + '</div>';
46                insert_3 += '<div>' + this[4] + '</div>';
47                insert_3 += '<div>' + this[5] + '</div>';
48                insert_3 += '</li>';
49            } else{
50                return false;
51            }
52        });
53        $('#slick_1 .slider').append(insert_1);
54        $('#slick_2 .slider').append(insert_2);
55        $('#slick_3 .slider').append(insert_3);
56        sliderInit();
57
58    }
59    var csvfile = 'data/case_bio.csv'; 
60    $(function(){
61        $.get(csvfile, readCsv, 'text');
62    });
63});

csv
1カテゴリ1,01,見出し01,ニーズ01,アプローチ01,成果物01
2カテゴリ1,02,見出し02,ニーズ02,アプローチ02,成果物02
3カテゴリ1,03,見出し03,ニーズ03,アプローチ03,成果物03
4カテゴリ2,01,見出し01,ニーズ01,アプローチ01,成果物01
5カテゴリ2,02,見出し02,ニーズ02,アプローチ02,成果物02
6カテゴリ2,03,見出し03,ニーズ03,アプローチ03,成果物03
7カテゴリ3,01,見出し01,ニーズ01,アプローチ01,成果物01
8カテゴリ3,02,見出し02,ニーズ02,アプローチ02,成果物02
9カテゴリ3,03,見出し03,ニーズ03,アプローチ03,成果物03

m.ts10806

2021/10/07 20:53 編集

jQuery以外にも使ってるライブラリ、プラグインがあるのでしたらご提示ください。可能な限りコピペで再現できるように。 ※http下でないと動かないはずなのでその辺も配慮いただけたらと

yukalino

2021/10/08 00:29 編集

ご指摘ありがとうございます。質問内のhtml部分を修正しております。

行動規範の内容に同意します

回答3件

ベストアンサー

こんなんで、どないでっか？

diff
1  //CSV書き出し
2  function readCsv(data) {
3    var csv = $.csv.toArrays(data);
4-   var insert_1 = '';
5-   var insert_2 = '';
6-   var insert_3 = '';
7-   $(csv).each(function() {
8-     if (this.length > 0 && this[0] === 'カテゴリ1') {
9-       insert_1 += '<li>';
10-       insert_1 += '<div>' + this[0] + '</div>';
11-       insert_1 += '<div>' + this[1] + '</div>';
12-       insert_1 += '<div>' + this[2] + '</div>';
13-       insert_1 += '<div>' + this[3] + '</div>';
14-       insert_1 += '<div>' + this[4] + '</div>';
15-       insert_1 += '<div>' + this[5] + '</div>';
16-       insert_1 += '</li>';
17-     } else if (this.length > 0 && this[0] === 'カテゴリ2') {
18-       insert_2 += '<li>';
19-       insert_2 += '<div>' + this[0] + '</div>';
20-       insert_2 += '<div>' + this[1] + '</div>';
21-       insert_2 += '<div>' + this[2] + '</div>';
22-       insert_2 += '<div>' + this[3] + '</div>';
23-       insert_2 += '<div>' + this[4] + '</div>';
24-       insert_2 += '<div>' + this[5] + '</div>';
25-       insert_2 += '</li>';
26-     } else if (this.length > 0 && this[0] === 'カテゴリ3') {
27-       insert_3 += '<li>';
28-       insert_3 += '<div>' + this[0] + '</div>';
29-       insert_3 += '<div>' + this[1] + '</div>';
30-       insert_3 += '<div>' + this[2] + '</div>';
31-       insert_3 += '<div>' + this[3] + '</div>';
32-       insert_3 += '<div>' + this[4] + '</div>';
33-       insert_3 += '<div>' + this[5] + '</div>';
34-       insert_3 += '</li>';
35-     } else{
36-       return false;
37-     }
38-   });
39-   $('#slick_1 .slider').append(insert_1);
40-   $('#slick_2 .slider').append(insert_2);
41-   $('#slick_3 .slider').append(insert_3);
42+   $('.slick_box').each(function() {
43+     const categoryId = $(this).attr('id').replace('slick_', '');
44+     const rows = csv.filter(([category]) => category === `カテゴリ${categoryId}`);
45+     const items = rows.map(values =>
46+       $('<li>').append(values.map(v => $('<div>').text(v)))
47+     );
48+     $('.slider', this).append(items);
49+   });
50    sliderInit();
51  }

投稿2021/10/08 00:51

編集2021/10/11 05:18

退会済みユーザー

総合スコア0

yukalino

2021/10/08 05:12 編集

ありがとうございます。ここまで短くできることに驚きました。不勉強でmapやアロー関数の使い方が全くわからないので、これを期に使い方を勉強したいと思います。

yukalino

2021/10/08 08:05 編集

重ねての質問で申し訳ないのですがもし可能であれば、 ①カテゴリ名が文字列の場合（カテゴリ名＝slickのID名）の対応方法 ②$('<div>')の各項目ごとのクラス指定をする方法　※各<li>内のn番目の<div>は同一のクラスになる感じです。 ③配列のn番目を飛ばすさせない方法を教えていただければ幸いです。

m.ts10806

2021/10/09 07:36

既に退会されたようなので何もレスポンスないかと。回答内容消して退会したので非常にたちの悪い行為です。

yukalino

2021/10/09 12:56

そのようですね、教えていただきありがとうございます。

行動規範の内容に同意します

コピペで現状再現できないので未検証ですし、ループばかりでお世辞にも（パフォーマンス的に）スマートとは言えませんが、数字が固定のようなので見た目短くするのは難しくはないです。

js
1const list = [1,2,3]
2
3
4$insert = [];
5for (i of list) { //初期化
6  $insert[i] = '';
7}
8$(csv).each(function () {
9  if (this.length === 0) {
10    return true;
11  }
12  for (i of list) {
13    if (this[0] === 'カテゴリ' + i) {
14      $insert[i] += '<li>';
15      for (this_i = 0; this_i <=5; this_i++) {
16        $insert[i] += '<div>' + this[this_i] + '</div>';
17      }
18      $insert[i] += '</li>';
19    }
20  }
21});
22for (i of list) {
23  $('#slick_' + i + ' .slider').append($insert[i]);
24}

もしくは「カテゴリn」と捉えて

js
1$insert = [];
2$(csv).each(function() {
3	if(this.length === 0){
4		return true;
5	}
6	num = this[0].replace('カテゴリ','');
7	if(!$insert.indexOf(num)){
8		$insert[num] = '';
9	}
10  	$insert[num]  += '<li>';
11      for (this_i = 0; this_i <= 5; this_i++) {
12        $insert[num] += '<div>' + this[this_i] + '</div>';
13      }
14    $insert[num]  += '</li>';
15});
16
17for(i in $insert){
18	$('#slick_'+i+' .slider').append($insert[i]);
19}

投稿2021/10/07 21:34

編集2021/10/07 21:57

m.ts10806

総合スコア80875

yukalino

2021/10/09 05:34 編集

ありがとうございます。 forで回す方法もあるのですね。参考になりました。質問文を修正しておりますので、再度ご確認いただけましたらともいます。

行動規範の内容に同意します

BAをつけさせていただいた方が回答を消されてしまったので、頂いた回答を転記させていただきます。

JavaScript
1    //CSV書き出し
2    function readCsv(data) {
3        var csv = $.csv.toArrays(data);
4        $('.slick_box').each(function() {
5            const categoryId = $(this).attr('id').replace('slick_', '');
6            const rows = csv.filter(([category]) => category === `カテゴリ${categoryId}`);
7            const items = rows.map(values =>
8                    $('<li>').append(values.map(v => $('<div>').text(v)))
9                );
10            $('.slider', this).append(items);
11        });
12        sliderInit();
13    }
14    var csvfile = 'data/case_bio.csv'; 
15    $(function(){
16        $.get(csvfile, readCsv, 'text');
17    });    
18