0%

Programmingプログラミングナレッジ

Posted:2019.10.10

javascriptで外部のCSVファイルを読み込んでデータをHTML上に展開する

先日クライアントワークで、CSVで管理しているデータをサイト上に表示させたいというような要件があり、いろいろ調べてみるとjavascriptで出来そうという情報が見つかったので試してみました。CSVとは半角コンマで区切られた値のことで、詳しくはこちらの記事「データ分析や登録などで使用するCSVファイルを扱う時の注意点まとめ」でもまとめていますのでご参考に。

 

今回は、外部ファイルとして別のディレクトリにあるCSVファイルをHTTPで読み込み、その値をHTML上で確認できるように表組みでまとめていきます。ここではサンプルとしてこのようなデータのCSVファイルを使っています。

【CSV】

名前,性別,年齢,血液型,趣味
山田,男性,35,A,ドライブ
田中,女性,29,B,読書
中村,男性,47,AB,ゴルフ
村本,女性,38,O,料理

 

この値がそのまま表組みで表示されるようなイメージですね。フロントエンドでデータを取扱う際には、一般的にはJSON形式が多いかと思いますが、CSVでは文字列として扱うので、データを加工するために少し手間をかける必要があります。それでは早速コードを見ていきます。

(参考記事)
「fetch APIで外部のJSONデータを取得する」
「外部のJSONデータをjQueryを使ってHTMLへ出力する」

 

XMLHttpRequestで外部CSVデータを読み込む

まずは外部のCSVデータを読み込むところから見ていきます。確認用として値の出力先に適当なHTML要素を作成しておきます。そしてCSVを読み込む処理を書いていきます。CSVを読み込むのにHTTP通信で行いますが、今回は、XMLHttpRequest()を使います。XMLHttpRequestのイベントハンドラである、「open()」の第一引数にはHTTPのリクエストメソッドのGETを指定し、第二引数には送信するソースファイルのURLを指定します。第三引数は「true」を指定すると非同期通信とすることができます。続けて「send()」でリクエストを送信します。

【HTML】※一部抜粋

<div id="output_csv"></div>

 

【javascript】

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

function getCsvData(dataPath) {
 const request = new XMLHttpRequest();
 request.addEventListener('load', (event) => {
  const response = event.target.responseText;
  outputElement.innerHTML = response;
 });
 request.open('GET', dataPath, true);
 request.send();
}

getCsvData('./example.csv');

 

リクエストがロードされた時に、「responseText」でレスポンスの中身である文字列を返すようにします。この中にはCSVのデータが文字列として含まれています。これら一連の処理を関数として定義しておきます。ここでは引数にCSVファイルのパスを指定できるようにしています。

 

この処理を実際にブラウザで確認してみます。HTML上にはCSVのデータが文字列として出力され、コンソールでもCSVの値が確認することができます。ちなみにXMLHttpRequestでHTTP通信を行う場合には、ローカルファイルですとクロスオリジンの制約でエラーとなりますので、localhostを起動したり、ウェブサーバー上で確認するようにします。

javascriptで外部のCSVファイルを読み込んでデータをHTML上に展開する

 

 

CSVの文字列から配列に変換

先ほどのコードでCSVデータを取得できましたが、データとしては1つの文字列となっているので、データを加工する場合にはいろいろと不便です。そこでCSVデータを文字列から配列に変換していきます。ここでは配列変換用に新たな関数を定義し、先ほどの関数内で呼び出すようにしていきます。

【javascript】

const outputElement = document.getElementById('output_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();
}

function convertArray(data) {
 const dataArray = [];
 const dataString = data.split('\n');
 for (let i = 0; i < dataString.length; i++) {
  dataArray[i] = dataString[i].split(',');
 }
 outputElement.innerHTML = dataArray;
}

getCsvData('./example.csv');

 

文字列を配列に変換する関数では、まず空の配列を用意していき、その中に値を入れていることで配列に変えていきます。今は1つの文字列となっていますので、まずは改行文字である「\n」で分割します。これがCSVでの表組みの行単位になります。そして各行ごとに、カンマごとにデータをバラバラにしていき、1つづつ配列に代入していきます。これで配列データが出来上がります。ブラウザ上に出してみると、見た目は文字列と変わりませんが、コンソールではきちんと配列型のデータになっているのが確認できます。

javascriptで外部のCSVファイルを読み込んでデータをHTML上に展開する

 

 

CSVデータを表組みでHTML上に出力

データが配列になったので、あとは値に対してHTMLとして出力する処理を繰り返していきます。過去記事「javascriptで配列を扱う時によく使うメソッド#2【配列データに対して繰り返し処理を行う】」でまとめています「forEach()」メソッドを使います。今回は表組みでの出力を行いますので、HTML側にtable要素を用意しておき、trとtdタグで囲まれる形で出力していきます。入れ子になっているのは1つ目のループで行単位の処理を行い、2つ目で値ごとの処理をしている形になります。

【HTML】※一部抜粋

<table>
 <tbody id="output_csv"></tbody>
</table>

 

【javascript】

const outputElement = document.getElementById('output_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();
}

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;
}

getCsvData('./example.csv');

 

ブラウザで確認してみると、このような形でエクセルなどの表計算ソフトと同じような表組みで表示されているのが確認できます。HTMLタグも出力されているのがわかります。

javascriptで外部のCSVファイルを読み込んでデータをHTML上に展開する

 


 

今回は外部のCSVデータを読み込んで、値をHTML上に展開していく方法をまとめました。JSON形式とは異なり、CSVの場合にはエクセルなどの表計算ソフトで管理できますので、クライアントさんにとっては扱いやすいのかもしれません。ただし、javascriptで処理する場合には少し手間になるので、ぜひ覚えておきたいですね。

 

(参考にさせて頂いたサイト)
JavaScriptでCSVファイルを読み込む方法

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】