【JS】JS で テスト用の超簡易なCSVデータ生成ツールを作ってみる

JavaScript

■ はじめに

https://dk521123.hatenablog.com/entry/2022/11/24/230044

で、
「CSV/TSVテストデータを自動的に作るツールを作ることを考えている。」
って言ったので、とりあえず、プロトタイプを作ってみた。

「超簡単」とは書いたが、それでもそれなりのコード量になった、、、

目次

【１】サンプル
【２】課題

【１】サンプル

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="mainForm">
  <div id="div0">
    <textarea id="testData" name="testData" rows="6" cols="100"></textarea><br />
  </div">
  <hr>
  <div id="div1">
    <input id="itemName1" name="itemName1" class="inputText" type="text" maxlength="20" size="20" placeholder="Enter your header item">
  </div>
</form>
</body>
<script>
var index = 1;

function canAddInput() {
  var canAdd = true;
  console.log("Check input values");
  const inputTexts = document.getElementsByTagName("input");
  for(let inputText of inputTexts) {
    console.log(`Value = ${inputText.value}`);
    if (!inputText.value) {
      canAdd = false;
      break;
    }
  }
  return canAdd;
}

function addRow() {
  if (!canAddInput()) {
    console.log("No need to add inputs any more");
    return;
  }
  
  console.log("Need to add input!!");
  index = index + 1;
  const newDiv = document.createElement("div");
  newDiv.setAttribute("id", `div{index}`);
  
  const newInput = document.createElement("input");
  newInput.setAttribute("id", `itemName${index}`);
  newInput.setAttribute("name", `itemName${index}`);
  newInput.setAttribute("class", "inputText");
  newInput.setAttribute("type", "text");
  newInput.setAttribute("maxlength", "20");
  newInput.setAttribute("size", "20");
  newInput.setAttribute("placeholder", "Enter your header item");
  newInput.setAttribute("value", "");
  newInput.addEventListener('blur', addRow);
  newInput.addEventListener('input', createData);

  const mainForm = document.getElementById("mainForm");
  mainForm.appendChild(newDiv);
  newDiv.appendChild(newInput);
}

function createData() {
  const maxRow = 5;
  const delimiter = ",";
  console.log(`Start to create data. ${maxRow} / ${delimiter}`);

  const inputTexts = document.getElementsByTagName("input");
  var headers = new Array();
  for(let inputText of inputTexts) {
    console.log(`Value = ${inputText.value}`);
    if (!inputText.value) {
      continue;
    }
    headers.push(inputText.value);
  }
  if (headers.length === 0) {
    console.log("No data");
    return;
  }
 
  console.log(`Creating... ${headers}`);
  var result = headers.join(delimiter) + "\n";
  for (var i = 0; i < maxRow; i++) {
    for (var j = 0; j < headers.length; j++) {
      if (j !== 0) {
        result = result + delimiter;
      }
      let randomValue = Math.random().toString(36).substring(2, 12);
      result = result + randomValue;
    }
    result = result + "\n";
  }
  
  console.log(`Created... ${result}`);
  const textArea = document.getElementById("testData");
  textArea.value = result;
}

const inputText = document.getElementById("itemName1");
inputText.addEventListener('blur', addRow);
inputText.addEventListener('input', createData);
</script>
<html>

出力例 

id,name,remarks
g06n7hkcpb,jnokxzei34,ryh5n57xiy
uhzho9sh79,pr51yjjl9o,fybhit54i8
10uf7hzzzu,cdf9ijulsn,pj5wjp4aii
pqhur2tuhz,y61hko4qkk,mtknaqp41s
ooac8fvqp4,8a06g207p1,73vicmj3id

【２】課題

* 下記の課題を修正したサンプルについては、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2022/11/28/000000

課題１ 

* 区切り文字や最大行数が現状固定だが、
　可変にするために input タグを設けたいが
　inputタグを追加すると、
　動的にinputタグを生成する際の制御で使っている getElementsByTagName
　に含まれてしまう点
　（ループ内で制御できなくはないと思うが奇麗に書きたい）

 => querySelectorAll()を使えば奇麗に書けそう
 => querySelectorAll() については、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2022/11/21/000000

課題２ 

* データ型用のSelect Box（String/Number/Boolean）を設けたり、
　文字列数を指定したり、
　オプションとして固定値を指定できる作りになってもいいかも。

関連記事

DOM ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2011/01/07/012520
DOM ～ 基本編 / オブジェクト取得 ～
https://dk521123.hatenablog.com/entry/2022/11/21/000000
DOM ～ 基本編 / オブジェクト作成 ～
https://dk521123.hatenablog.com/entry/2022/11/19/000000
DOM ～ 基本編 / オブジェクト操作 ～
https://dk521123.hatenablog.com/entry/2011/01/09/155824
動的に生成したinputタグを考える
https://dk521123.hatenablog.com/entry/2022/11/24/230044
JS で ファイル出力するCSVデータ生成ツールを作ってみる
https://dk521123.hatenablog.com/entry/2022/11/28/000000