さて、前回作ったJavaScriptの中身についての解説なのだが、自分でもよく分かっていないんで、解説と言うか覚書だ。
目次
前回記事
JavaScriptの話：CSVファイルからHTMLのテーブル表示する
参考
ソース全文はこちら
source – JavaScriptの話：CSVファイルからHTMLのテーブル表示する
利用させていただいた外部関数
csv.js: ES5 規定の JSON と同じインターフェースを持つCSVパーサ
注：内部処理で以下のサイトの「csv.js」と言うJavaScriptを利用しています。このJavaScriptはカンマ区切りのCSVを配列に分割してくれるとても便利な奴です。感謝(^^)/
解説
- 3行目：
クラスの要素を取得しています。
const csv2tableClass = document.getElementsByClassName('csv2table');
getElementByIdでidを取得、getElementsByClassNameでclassを取得です。
そんでもって、idとclassの違いだが、
getElementById
1ページ内にidは一つしか存在できない。
getElementsByClassName
1ページ内にclassは二つ以上存在できる。
実際のニュアンスはちょっと違うみたいだけど、今回必要だったのは上記の性質。
初めgetElementByIdで作っていたんだけど、複数テーブルに対応させるためにgetElementsByClassNameへ変更した経緯があります。
- 5行目：
クラスの要素を配列に変換しています。
const elements = Array.from(csv2tableClass);
getElementsByClassNameで取得できるのは配列だと初め思っていたのだが違ったらしい。
よく分からないのだがgetElementsByClassNameで取得できるのはHTMLCollectionと言う物で（コレクションって配列じゃないの？）、配列へ変換する必要があるらしい。そのための記述。
（最初「ループが動かない！？」と焦りました。）
- 9～10行目：
URL上のcsvファイルを読み込みます。
const src = elements[i].getAttribute('data-src');
const text = await (await fetch(src)).text();
最初に参考にしたプログラムではXMLHttpRequestと言う関数を使って長々やっていたのだが、ググったら最近は新しいfetchと言う関数でお手軽に同じことができるとの事。それがこれ。
ただ、このawaitの辺りが美しくないのは私の能力的な問題。
- 13行目：
csvテキストを配列に読み込む外部関数を使用しています。
think49様、(人”▽｀)ありがとう☆
const cells = CSV.parse(text);
単純にsplit(",")で「動いたー(^^)/」って言ってた過去の自分が恥ずかしい。そりゃ「,」で分割しただけじゃすぐボロが出るってもんですね。(-_-;)
- 20～25行目：
テーブルにclass名を設定しています。
if (elements[i].hasAttribute('data-label')) {
output += '<table class="csv2table ' + label + '">';
}
else {
output += '<table class="csv2table">';
}
ラベル名をclassではなくidで設定した方が良かったかもしれない。
いや、ひょっとしたらテーブルに同じラベル名を指定したいかもしれないからやっぱりclassで問題なかったかもしれない。
- 28～36行目：
ヘッダー部をループでテーブルにしています。無駄な中カッコがありますがボディー部と見た目を対比させるためだけに付けています。
output += '<thead>';
{
output += '<tr>';
for (let i = 0; i < cells[0].length; i++) {
output += '<th>' + cells[0][i] + '</th>';
}
output += '</tr>';
}
output += '</thead>';
- 39～47行目：
ボディー部をループでテーブルにしています。2次元配列なので2重ループです。特に難しいことはしていません。
output += '<tbody>';
for (let j = 1; j < cells.length; j++) {
output += '<tr>';
for (let i = 0; i < cells[j].length; i++) {
output += '<td>' + cells[j][i] + '</td>';
}
output += '</tr>';
}
output += '</tbody>';
まとめ
こうやって書いてみると全く新鮮味のないプログラムなのですが、私が初めに欲しかった機能はとりあえず全て入っているのでこんなものなのかなと思う。
もう少し勉強してcsvの配列化も自前でやれるようになりたい。
最後に前回のサンプルを↓↓↓に貼っておきますね。
