やったこと

仕事する上でテストデータをDBに入れるのがエライ手間だったので、csvファイルからinsert文を生成するツールを作りました。
機能としては腐るほど作られてそうだし、「insert文にするくらいならDBに接続してインサートしてしまえよ！」って言われそうですが。。。
最初はそのつもりでしたが面倒になってinsert文作るまでに留めておきました。そのおかげでメソッド名がImportHogeHogeみたいになってますがご勘弁を。

今回は以下3点について理解が深まったと思います。
・htmlとJavaScriptの連携方法
・JavaScriptでファイル操作する方法

使用方法は各項目を入力して「SQL変換」ボタンをクリックするだけです。
注意として、csvファイルはヘダー付きのものを使用してください。ヘダーの値がテーブルの列名に対応するからです。

コード

ConvertCSV.html

<html>
<head>
    <title>csvファイルからinsert文</title>
    <script type="text/javascript" src="myscript.js"></script>
</head>
<body>
    <h1>csvファイルからinsert文</h1>
    <div>
        <table border="0">
            <tr>
                <th>
                    テーブル名
                </th>
                <td>
                    <input type="text" id="tableName" size="30" />
                </td>
            </tr>
            <tr>
                <th>
                    CSVファイル
                </th>   
                <td>
                    <input type="file" value="参照" id="csv">
                </td>
            </tr>
            <tr>
                <th>
                    DB選択
                </th>
                <td>
                    <form name="selectDbFrom" action="">
                        <input type="radio" name="db" value="Ora" id="ora" checked="checked" />
                            <label for="ora">Oracle</label>
                        <input type="radio" name="db" value="MS" id="ms" />
                            <label for="ms">SQL Server</label>
                    </form>
                </td>
                <td>
                    <input id="transSQL" type="submit" value="SQL作成" onclick="OnClickImport()">
                </td>
            </tr>
        </table>
    </div>
    <div>
        <TEXTAREA id="output" cols="150" rows="15"></TEXTAREA>
    </div>
</body>
</html>

myscript.js

//csvファイルをinsert文に直す。
//csvファイルは「参照」ボタンから選べる
//oracleかsqlserverか選べる
var reader = new FileReader();
var tableName = "";
var dbProv = 0;

//csvの読み込みが終わったらINSERT文作成開始
reader.addEventListener('load', TransSQL, false);

//"SQL作成"ボタンクリック時の処理
function OnClickImport() {
    var textArea = document.getElementById("output");
    var fileData = document.getElementById("csv").files[0];
    if (fileData == null) {
        textArea.value = "ファイルを選択してください";
        return;
    }

    //OracleかSQL Serverか
    var checkOra = document.selectDbFrom.ora.checked;
    var checkMS  = document.selectDbFrom.ms.checked;
    if (checkOra == true) {
        dbProv = 0;
    }
    else {
        dbProv = 1;
    }

    //insertするテーブル名取得
    tableName = document.getElementById("tableName").value;
    if (tableName.length == 0) {
        textArea.value = "テーブル名を入力してください";
        return;
    }
    reader.readAsText(fileData);
}

//振り分け用関数
function TransSQL() {
    if (dbProv == 0) {
        TransSQL_Ora();
    }
    else {
        TransSQL_MS();
    }
}

//oracle用のinsert文に変換する
function TransSQL_Ora() {
    var textArea = document.getElementById("output");
    var result = reader.result;
    var strLine = result.split('\n');

    //末尾の改行コードを取る
    for (var i = 0; i < strLine.length; i++) {
        strLine[i] = strLine[i].substr(0, strLine[i].length - 1);
    }

    var colNames = strLine[0];
    //INSERT文に変換
    var insertSql = "INSERT ALL \n";
    for (var i = 1; i < strLine.length-1; i++) {
        insertSql += "INTO " + tableName + " (" + colNames + ") \n";
        insertSql += "VALUES (";
        var colValues = strLine[i].split(',');
        for (var j = 0; j < colValues.length; j++) {
            if (j != colValues.length - 1) {
                insertSql += "'" + colValues[j] + "',";
            }
            else {
                insertSql += "'" + colValues[j] + "')\n";
            }
        }
    }
    insertSql += "select * from dual\n";
    insertSql += "commit";
    textArea.value = insertSql;
}

//SQL Server用のinsert文に変換する
function TransSQL_MS() {
    var textArea = document.getElementById("output");
    var result = reader.result;
    var strLine = result.split('\n');

    //末尾の改行コードを取る
    for (var i = 0; i < strLine.length; i++) {
        strLine[i] = strLine[i].substr(0, strLine[i].length - 1);
    }

    var colNames = strLine[0];
    //INSERT文に変換
    var insertSql = "BEGIN TRAN \n";
    insertSql += "INSERT INTO " + tableName + "(" + colNames + ") VALUES \n";
    for (var i = 1; i < strLine.length - 1; i++) {
        var colValues = strLine[i].split(',');
        insertSql += "(";
        for (var j = 0; j < colValues.length; j++) {
            if (j != colValues.length - 1) {
                insertSql += "'" + colValues[j] + "',";
            }
            else {
                insertSql += "'" + colValues[j] + "')\n";
            }
        }
        if (i != strLine.length - 2) {
            insertSql += ",";
        }
    }
    insertSql += "COMMIT";
    textArea.value = insertSql;
}

解説

//csvの読み込みが終わったらINSERT文作成開始
reader.addEventListener('load', TransSQL, false);

でファイルのロード完了を待ち、ロードが完了したらTransSQLというメソッドを呼び出します。

ファイルロードはOnClickImportメソッドの

reader.readAsText(fileData);

で開始します。
OnClickImportメソッドは「SQL作成」ボタンがクリックされたときに呼ばれます。
このメソッドでは各要素に必要な情報が入力されているかをチェックします。

TransSQLメソッドはCSVファイルをOracle用のinsert文に変換するか、SQL Server用のinsert文に変換するかをラジオボタンのチェック内容に応じて振り分けています。
振り分けた先のメソッドでinsert文へ変換を行い、テキストエリアに表示しています。

やってみて

デザインとか何も気にせず作りましたが、次はcss書いてかっちょいいやつ作りたいですね。
cssだとbootstrapをよく目にしますし、そちらを勉強してみたいと思います。
業務でコード書いても「もっとこう書いたほうがいい」という指摘を頂くことが少ないので、もし突っ込みどころがあればご指摘いただけると幸いです。

JavaScript CSVファイル→INSERT文変換

やったこと

コード

解説

やってみて