JavaScriptでCSVを取り込み表示する(HTML)

こんにちは。

プログラム学習中のdynaです。

今回は、JavaScriptでCSVを取り込んで、HTMLに表示したいなーと思ったので、その備忘録です。

（※検索すると、沢山情報が出てきますので、分かりやすいように自分用のメモになります。）

取り込むCSV


都道府県,コード,郵便番号
三重県,24,430-7467
徳島県,36,594-0729
奈良県,29,101-1920
島根県,32,137-2592
宮崎県,45,505-5288
愛媛県,38,506-6251
大阪府,27,062-9971
鳥取県,31,323-6482
奈良県,29,921-7888
宮崎県,45,252-0880

都道府県,コード,郵便番号

三重県,24,430-7467

徳島県,36,594-0729

奈良県,29,101-1920

島根県,32,137-2592

宮崎県,45,505-5288

愛媛県,38,506-6251

大阪府,27,062-9971

鳥取県,31,323-6482

奈良県,29,921-7888

宮崎県,45,252-0880

こんな感じのCSVファイルを読み込んで、HTML上（ブラウザ上）に反映させたいと思います。

※このCSVはダミーテキストです。

出来上がり形式

手順としては、

・XMLHttpRequest();でCSVの取り込み
・取り込んだ内容を配列に格納
・格納した内容を、HTMLの表示用にする

という流れで作成するようです。

1. XMLHttpRequestでCSVの取り込み
2. 取り込んだCSVを配列に格納する
3. 配列をHTMLのtableにする
4. 全体のコード

XMLHttpRequestでCSVの取り込み

まずは外部ファイルのCSVを取り込むためにXMLHttpRequest()を使います。

XMLHttpRequest()とはサーバーとブラウザ間でデータの送受信をするときに使用されます。

サーバーに指定ファイルをリクエストして、その結果を受け取れるという流れですね。

ちなみに、ローカルで上記を実行するとクロスオリジンエラーが出るので、私はxammp上で試し実行しています。

HTTP リクエストを送るには、 XMLHttpRequest オブジェクトを作成し、 URL を開いてリクエストを送信します。トランザクションが完了すると、オブジェクトには結果の HTTP ステータスコードやレスポンスの本文などの有益な情報が格納されます。
引用元：https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

実際のコードで関連部分だけ抜粋して書いてみます。


  // HTTPでファイルを読み込む
  let xhr = new XMLHttpRequest(); 
  //取得するファイルの設定
   xhr.open("GET",'TestData.csv',true);
  //リクエストの要求送信
   xhr.send(null);

// HTTPでファイルを読み込む

let xhr = new XMLHttpRequest();

//取得するファイルの設定

xhr.open("GET",'TestData.csv',true);

//リクエストの要求送信

xhr.send(null);

それぞれ何やってるんだろう?と思ったので、調べた事を記載していきます。

XMLHttpRequest()オブジェクトの作成

上記内容は、new で XMLHttpRequest()オブジェクト を作成しています。

その後、openメソッドで各設定、CSVデータの指定をしています。

XMLHttpRequest.openでの指定

XMLHttpRequest.openについてはこちらを参考にしています↓


XMLHttpRequest.open(method, url[, async[, user[, password]]])

XMLHttpRequest.open(method, url[, async[, user[, password]]])

参考：https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/open

method・・・使用する HTTP リクエストメソッド。 "GET", "POST", "PUT", "DELETE" など。

url・・・リクエストを送信する URL (ここでいうとCSVファイルです）

async・・・操作が同期処理か、非同期処理かを表す。規定値はtrue（非同期）。falseの場合は同期処理として扱われる。

XMLHttpRequest.sendで要求の送信

XMLHttpRequest.sendで要求を送信します。

XMLHttpRequest の send() メソッドは、リクエストをサーバーに送信します。
リクエストが非同期の場合 (これが既定)、このメソッドはリクエストが送信されるとすぐに戻り、結果はイベントを用いて配信されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで戻りません。
引用元：https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/send


XMLHttpRequest.send(body)

XMLHttpRequest.send(body)

引数の規定値はnullです。

レスポンスの確認

先ほどのコードで以下を記載してみます。


//レスポンスの確認
xhr.onload = function (e) {
    if (xhr.readyState === 4) {//4は完了
        if (xhr.status === 200) {//Done
        console.log(xhr.responseText);
        } else {
        console.error(xhr.statusText);
        }
    }

//レスポンスの確認

xhr.onload = function (e) {

if (xhr.readyState === 4) {//4は完了

if (xhr.status === 200) {//Done

console.log(xhr.responseText);

} else {

console.error(xhr.statusText);

}

6行目のconsole.logで結果を確認できます。

ここまでで、レスポンスがちゃんと返っているのが分かりました。

では、xhr.onloadのコードの中に何が書いてあるか調べてみます。　

XMLHttpRequest.responseText


var resultText = XMLHttpRequest.responseText;

var resultText = XMLHttpRequest.responseText;

XMLHttpRequest の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。
引用元：https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/responseText

これがレスポンスですね。

そして、このレスポンスの進行状況を示す（?）のが、以下のredyState、statusのようです。

XMLHttpRequest.readyState

XMLHttpRequest.readyState プロパティは XMLHttpRequest (XHR) クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります。
引用元：https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState

値	状態	説明
`0`	`UNSENT`	クライアントは作成済み。 `open()` はまだ呼ばれていない。
`1`	`OPENED`	`open()` が呼び出し済み。
`2`	`HEADERS_RECEIVED`	`send()` が呼び出し済みで、ヘッダーとステータスが利用可能。
`3`	`LOADING`	ダウンロード中。`responseText` には部分データが入っている。
`4`	`DONE`	操作が完了した。

XMLHttpRequest.status

XMLHttpRequest.status プロパティは読み取り専用で、 XMLHttpRequest のレスポンスにおける数値の HTTP ステータスコードを返します。
リクエストが完了する前は、 status の値は 0 になります。 XMLHttpRequest がエラーになった場合も、ブラウザーはステータスとして 0 を返します。
引用元：https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/status

ここでXMLHttpRequest.statusが200なら完了とみなしています。

取り込んだCSVを配列に格納する

次は返ってきたCSVをHTMLに表示させるために、まず配列に格納します。


//CSVを配列に格納 dataArrはレスポンス
function csvArr(dataArr){
    let arr =[];
    let list = dataArr.split('\n');
    //帰ってきているレスポンスを配列に格納する
    for(let i = 0; i <list.length; i++){
        arr[i] = list[i].split(',');
    }
}

//CSVを配列に格納 dataArrはレスポンス

function csvArr(dataArr){

let arr =[];

let list = dataArr.split('\n');

//帰ってきているレスポンスを配列に格納する

for(let i = 0; i <list.length; i++){

arr[i] = list[i].split(',');

}

ここでは、読み込んだCSVの行ごとに分割して配列にします。

ここでconsole.logで表示してみると、以下になります↓

ちゃんと配列になってますね！！

配列をHTMLのtableにする

配列になったので、HTMLに表示用のコードにします。


//出力のタグを設定
function htmlWrite(dataList){
    let insert ="";
    dataList.forEach(element => {
        insert +='<tr>';
        element.forEach((childElement) =>{
            insert +=`<td>${childElement}</td>`;
        });
        insert +='</tr>'
    });
    
    //HTMLに出力
    output.innerHTML = insert;
}

//出力のタグを設定

function htmlWrite(dataList){

let insert ="";

dataList.forEach(element => {

insert +='<tr>';

element.forEach((childElement) =>{

insert +=`<td>${childElement}</td>`;

});

insert +='</tr>'

});

//HTMLに出力

output.innerHTML = insert;

}

ここは実は結構躓きました。

こちらのサイトを参考にさせていただいてます。

https://qiita.com/hiroyuki-n/items/5786c8fc84eb85944681

※いつもありがとうございます。

let insert でHTML出力の変数を作成して、forEachで配列の中身を<tr>をつけています。

また、さらに<td>をつけてHTMLに出力しています。

全体のコード


 <script>
        window.onload =function(){
        //出力場所を探す
        let output =document.getElementById("output");
        //CSVの指定
        getCsv('TestData.csv');

        //CSVの取り込み
        function getCsv(data){
            // HTTPでファイルを読み込む
            let xhr = new XMLHttpRequest(); 
            //取得するファイルの設定
            xhr.open("GET",data,true);
            //レスポンスの確認
            xhr.onload = function (e) {
                if (xhr.readyState === 4) {//4は完了
                    if (xhr.status === 200) {//Done or load
                    //console.log(xhr.responseText);
                    let responce = xhr.responseText;
                    csvArr(responce);
                    } else {
                    console.error(xhr.statusText);
                    }
                }
            };
           //リクエストの要求送信
           xhr.send(null);
        }

        //CSVを配列に格納 dataArrはレスポンス
        function csvArr(dataArr){
            let arr =[];
            let list = dataArr.split('\n');
            //帰ってきているレスポンスを配列に格納する
            for(let i = 0; i <list.length; i++){
                arr[i] = list[i].split(',');
            }
            //console.log(arr);
            htmlWrite(arr);//出力をtableに設定する
        }

        //出力のタグを設定
        function htmlWrite(dataList){
            let insert ="";
            dataList.forEach(element => {
                insert +='<tr>';
                element.forEach((childElement) =>{
                    insert +=`<td>${childElement}</td>`;
                });
                insert +='</tr>'
            });
            
            //HTMLに出力
            output.innerHTML = insert;
        }
    }
    </script>
    <body>
        <div class="main">
            <p>JavaScriptでCSVの取り込みサンプル</p>
            <p>リスト形式で出力します。</p>
            <table id="output">
            </table>
        </div>
    </body>

window.onload =function(){

//出力場所を探す

let output =document.getElementById("output");

//CSVの指定

getCsv('TestData.csv');

//CSVの取り込み

function getCsv(data){

// HTTPでファイルを読み込む

let xhr = new XMLHttpRequest();

//取得するファイルの設定

xhr.open("GET",data,true);

//レスポンスの確認

xhr.onload = function (e) {

if (xhr.readyState === 4) {//4は完了

if (xhr.status === 200) {//Done or load

//console.log(xhr.responseText);

let responce = xhr.responseText;

csvArr(responce);

} else {

console.error(xhr.statusText);

}

};

//リクエストの要求送信

xhr.send(null);

}

//CSVを配列に格納 dataArrはレスポンス

function csvArr(dataArr){

let arr =[];

let list = dataArr.split('\n');

//帰ってきているレスポンスを配列に格納する

for(let i = 0; i <list.length; i++){

arr[i] = list[i].split(',');

}

//console.log(arr);

htmlWrite(arr);//出力をtableに設定する

}

//出力のタグを設定

function htmlWrite(dataList){

let insert ="";

dataList.forEach(element => {

insert +='<tr>';

element.forEach((childElement) =>{

insert +=`<td>${childElement}</td>`;

});

insert +='</tr>'

});

//HTMLに出力

output.innerHTML = insert;

}

</script>

<body>

<p>JavaScriptでCSVの取り込みサンプル</p>

<p>リスト形式で出力します。</p>

</table>

</div>

</body>


body{
    width: 100%;
    margin: 0;
    font-size: 18px;
}
.main{
    width: 600px;
    margin: 50px auto;
}
table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: solid 1px #778ca3;
}
table tr:nth-child(2n+1) {
    background: #e9faf9;
}
table td {
    padding: 10px;
    border-bottom: solid 1px #778ca3;
}

body{

width: 100%;

margin: 0;

font-size: 18px;

}

.main{

width: 600px;

margin: 50px auto;

}

table {

width: 100%;

text-align: center;

border-collapse: collapse;

border-spacing: 0;

border-top: solid 1px #778ca3;

}

table tr:nth-child(2n+1) {

background: #e9faf9;

}

table td {

padding: 10px;

border-bottom: solid 1px #778ca3;

}

出力結果

これだけなのですが、色々勉強になりました・・・！

引き続き勉強したいと思います。

1人立ちまでの道のりは長いですね・・・( ；∀；)

<合わせて読みたい>

Three.js でテクスチャの貼り付け（地球を作ってみた）

Thee.js でテクスチャを読み込んだ記録です。