Webページ上でCSVデータを表示・検索するHTML/JavaScript

CSVファイルから読み込んだテーブルデータをWebページ上に表示して、テーブル内の文字を検索するための、HTML/JavaScriptを紹介します。
f:id:dskevin:20211128172158p:plain:h160

HTMLコード

以下の処理を行います。

検索ボックスで文字列を受取る
JavaScriptを実行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NPB 投手成績一覧 2009年～2021年</title>
</head>
<body>
    <h1>NPB 投手成績一覧 2009年～2021年</h1>
    <!--検索入力-->
    <form action="#">
    <input type="text" name="search" value="" id="search" />
    </form>
    <!--テーブル表示-->
    <table border="1" id="result">
        <tbody id="data_csv"></tbody>
    </table>
    <!--JavaScript-->
    <script type="text/javascript" src='./table_data_search.js'></script><!--JavaScriptを指定-->
    <script>
        getCsvData('http://127.0.0.1:5500/npb_stats_pitcher_utf8.csv');<!--CSVデータを指定-->
    </script>
</body>
</html>

JavaScriptコード

以下の処理を行います。

CSVファイルの読み込み
HTMLのテーブル形式に変換
レコード検索機能

// レコード検索処理
window.addEventListener( "DOMContentLoaded", 
    function(){
        const search = document.forms[ 0 ].search;
        const table = document.querySelector( "table" );
        const nohit = table.parentNode.insertBefore(document.createElement( "div" ), table.nextNode);
        nohit.textContent = "該当なし";
        nohit.style.display = "none";
        search.oninput = function(){
            const key = search.value.replace( /([\\\*\+\.\?\{\}\(\)\[\]\^\$\-\|\/])/g, "\\$1" );
            let hit = 0;
            [].forEach.call( table.rows,
                function( row, index ){
                    if( index==0 ){ return false }
                    row.style.display = [].some.call( row.cells,
                        function( cell ){
                            return ( new RegExp( key ) ).test( cell.textContent );
                        }
                    ) ? "table-row" : "none" ;
                    row.style.display=="table-row" ? hit++ : hit ;
                }
            );
            nohit.style.display = hit ? "none" : "block" ;
        }
    },
    false
);

const outputElement = document.getElementById('data_csv');

// CSVデータの読み込み
function getCsvData(dataPath) {
    const request = new XMLHttpRequest();
    request.addEventListener('load',
        (event) => {
            const response = event.target.responseText;
            convertArray(response);
        }
    );
    request.open('GET', dataPath, true);
    request.send();
}

// CSVデータをHTMLのテーブル形式に変換
function convertArray(data) {
    const dataArray = [];
    const dataString = data.split('\n');
    for (let i = 0; i < dataString.length; i++) {
        dataArray[i] = dataString[i].split(',');
    }
    let insertElement = '';
    dataArray.forEach(
        (element) => { insertElement += '<tr>';
            element.forEach(
                (childElement) => { insertElement += `<td>${childElement}</td>` }
            );
            insertElement += '</tr>';
        }
    );
    outputElement.innerHTML = insertElement;
}

表示イメージ

検索ボックスに値を入れるとその文字列を含む行が表示されます。

年	チーム	背番号	選手名	防御率	試合	勝利	敗北	セーブ	ホールド	勝率	打者	投球回	被安打	被本塁打	与四球	与死球	奪三振	失点	自責点	WHIP	DIPS
2021	巨人	11	平内　龍太	14.40	3	0	1	0	0	.000	24	5.0	8	2	2	0	5	8	8	2.00	7.52
2021	巨人	12	デラロサ	2.83	46	1	0	7	13	1.000	175	41.1	38	3	12	2	34	15	13	1.21	3.43
2021	巨人	15	サンチェス	4.68	14	5	5	0	0	.500	317	73.0	82	13	23	3	54	40	38	1.44	5.02
2021	巨人	17	大竹　寛	3.86	4	0	0	0	1	.000	11	2.1	5	0	0	0	0	1	1	2.14	3.12
2021	巨人	18	菅野　智之	3.19	19	6	7	0	0	.462	465	115.2	90	15	25	7	102	41	41	0.99	3.85
2021	巨人	19	山崎　伊織	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	20	戸郷　翔征	4.27	26	9	8	0	0	.529	639	151.2	130	19	58	6	138	75	72	1.24	4.16
2021	巨人	21	井納　翔一	14.40	5	0	1	0	0	.000	26	5.0	11	3	1	0	5	8	8	2.40	9.52
2021	巨人	23	野上　亮磨	1.65	9	0	1	1	4	.000	63	16.1	8	1	6	0	15	3	3	0.86	3.00
2021	巨人	26	今村　信貴	2.71	17	3	4	0	0	.429	274	63.0	66	5	22	3	59	21	19	1.40	3.47
2021	巨人	30	鍵谷　陽平	3.19	59	3	0	1	15	1.000	182	42.1	39	5	18	0	30	19	15	1.35	4.51
2021	巨人	33	太田　龍	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	35	桜井　俊貴	5.40	29	1	0	0	6	1.000	145	33.1	35	7	16	1	20	20	20	1.53	6.09
2021	巨人	41	中川　皓太	2.47	58	4	3	1	25	.571	220	54.2	47	2	10	5	49	17	15	1.04	2.57
2021	巨人	42	メルセデス	3.77	17	7	5	0	0	.583	369	86.0	96	5	22	5	74	36	36	1.37	3.06
2021	巨人	45	畠　世周	3.07	52	4	3	1	11	.571	390	96.2	83	13	25	4	97	37	33	1.12	3.73
2021	巨人	46	鍬原　拓也	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	47	髙橋　優貴	3.39	27	11	9	0	0	.550	598	140.2	125	18	61	2	76	57	53	1.32	5.00
2021	巨人	49	ビエイラ	2.93	56	0	3	19	1	.000	228	55.1	38	3	26	1	64	18	18	1.16	2.98
2021	巨人	50	戸根　千明	4.82	29	2	0	1	0	1.000	161	37.1	25	4	24	3	36	20	20	1.31	4.75
2021	巨人	53	高梨　雄平	3.69	55	2	2	1	20	.500	171	39.0	34	2	21	5	47	17	16	1.41	3.07
2021	巨人	54	直江　大輔	4.91	4	0	1	1	0	.000	51	11.0	15	1	4	2	4	6	6	1.73	5.21
2021	巨人	56	伊藤　優輔	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	57	高木　京介	4.42	15	1	0	0	1	1.000	81	18.1	22	1	7	0	15	9	9	1.58	3.34
2021	巨人	58	山本　一輝	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	59	田中　豊樹	2.84	39	0	0	0	2	.000	152	38.0	22	5	20	1	37	13	12	1.11	4.38
2021	巨人	62	横川　凱	3.38	2	0	1	0	0	.000	37	8.0	9	2	2	0	9	4	3	1.38	4.87
2021	巨人	63	古川　侑利	18.00	1	0	0	0	0	.000	11	2.0	3	1	3	1	0	4	4	3.00	14.12
2021	巨人	64	大江　竜聖	4.09	47	0	0	0	13	.000	145	33.0	29	2	17	2	23	16	15	1.39	4.15
2021	巨人	90	戸田　懐生	0.00	3	0	0	0	0	.000	12	3.0	3	0	1	0	0	0	0	1.33	4.12
2021	巨人	91	井上　温大	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	92	沼田　翔平	7.71	2	0	0	0	0	.000	11	2.1	3	1	1	0	3	2	2	1.71	6.12
2021	巨人	95	堀岡　隼人	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-
2021	巨人	99	山口　俊	3.56	15	2	8	0	0	.200	337	78.1	66	6	37	3	83	34	31	1.31	3.49

　
なお、　上記のデータは、以下のサイトから取得しました。
読売ジャイアンツ投手成績 - プロ野球データFreak

まとめ

JavaScriptを使うことで、Webページ上の表示をユーザの操作に合わせて動的に変えられます。このとき、別のページに遷移する場合に比べて、動作が軽いのが特徴です。実際の業務において、社内の情報共有サイトにデータを載せる際に、このような検索機能を付けたところ好評でした。

また、これからHTML/JavaScriptを使ってみたいという方に向けて、環境の設定方法から実装までの様子を動画にまとめました。よければこちらもご確認ください。
youtu.be

本記事が皆様のお役に立てば幸いです。最後まで読んでいただき、ありがとうございました！

Kevin's Data Analytics Blog

データサイエンティスト、AIエンジニアを目指す方に向けて情報発信していきます。

Webページ上でCSVデータを表示・検索するHTML/JavaScript

HTMLコード

JavaScriptコード

表示イメージ

まとめ