テキストエリアに入力されたCSVを加工してファイルに出力する方法

# 目的
エクセル(CSV)で受領したデータに対して何らかの加工を行うことがよくありますが、毎回手作業で項目を追加したり抽出したりするのは手間です。また、エクセルマクロで実現するのもコストが掛かりますし、Javaも実行環境を意識しなければならず面倒です。
その為、Javascriptで実現できたらと思うことが多いため、そのベースとなるプログラムを作成しました。
以下のプログラムをコピペするだけでテキストエリア内の内容を加工してファイルに出力することが出来ます。

# プログラム
## 内容
加工のサンプルとしてcsvをカンマで分割してからスペース区切りに変換しています。
この変換を行なっているループ処理内で適切な加工に変換してください。
（私は、Insert文を作成したり、リリース時のコマンド一覧を作成したりしています。）
## 画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/204260/0aed307b-3cdc-d358-0da0-b87a18e19934.png)
## プログラム
```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
    <script type="text/javascript">
        /**
        * ボタンクリック処理
        */
        function clickBtn() {
            //テキストエリアから値を取得
            const textareavalue = document.getElementById('textarea').value;
            //ファイル名
            const filename = document.getElementById('text').value;
            //テキストエリアに値がない場合
            if (textareavalue === "") {
                document.getElementById("span1").textContent = "テキストエリアが未入力です。";
                return;
            }
            //ファイル名に値がない場合
            if (filename === "") {
                document.getElementById("span1").textContent = "ファイル名が未入力です。";
                return;
            }
            //1行ずつに分割
            var textareavaluesplit = textareavalue.split("\n");
            var result = "";
            //行数分処理
            for (var i = 0; i < textareavaluesplit.length; i++) {
                //値がない場合
                if (textareavaluesplit[i] === "") {
                    continue;
                }
                //カンマ区切り
                var textareavaluespli2 = textareavaluesplit[i].split(",");
                console.log(textareavaluesplit[i]);
                //分割数分処理
                for (var j = 0; j < textareavaluespli2.length; j++) {
                    //値がない場合
                    if (textareavaluespli2[j] === "") {
                        continue;
                    }
                    //1回目以外の場合スペースを追加
                    if (j !== 0) {
                        result = result + " ";
                    }
                    result = result + textareavaluespli2[j];
                }
                result = result + "\n";
            }
            console.log(result);
            // 項目に値を設定
            document.getElementById("span1").textContent = result;
            // ファイル出力
            outputFile(result, filename);
        }

        /**
        * ファイル出力処理
        * @param {string} value ファイルに出力する値
        * @param {string} filename ファイル名
        */
        function outputFile(value, filename) {

            var blob = new Blob([value], { "type": "text/plain" });

            // Internet exproerの場合
            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(blob, filename);
            } else {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        }
    </script>

    <title>Convert to space from CSV tool</title>
</head>

<body>
    <h1>Convert to space from CSV tool</h1>
    <table>
        <tr>
            <td>変換する値</td>
        </tr>
        <tr>
            <td><textarea id="textarea" cols="60" rows="20"
                    placeholder="変換する値を入力入力してください。&#13;&#10;-例-&#13;&#10;AAA,BBB,CCC&#13;&#10;DDD,,FFF,GGG&#13;&#10;XXXX,Y,ZZ"></textarea>
            </td>
        </tr>
        <tr>
            <td>ファイル名</td>
        </tr>
        <td><input id="text" type="text" name="name" size="30"></td>
        <tr>
            <td><input type="button" value="ボタン" onclick="clickBtn()" /></td>
        </tr>
    </table>
    </br>
    </br>
    <div id="span1"></div>
</body>

</html>
```
## 注意
本番システムに組み込めるほどのセキュリティを意識したプログラムではありません。