• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • 日記
  • 競馬でプログラミング
    • JV-LinkをC#で使ってみる(WinForms版)
    • JV-LinkをC#で使ってみる(Console版)
  • このはとウェブログ
    • JavaScriptの話
    • WordPressの話
  • 私のバヌーシー出資馬について

sae-suki-blog.

  • メール
  • Instagram
  • RSS
  • Twitter

JavaScriptの話:CSVファイルからHTMLのテーブル表示する2

2020-09-05 by さえきさん

さて、前回作った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の配列化も自前でやれるようになりたい。

最後に前回のサンプルを↓↓↓に貼っておきますね。

コメ生産量

キャベツ生産量

Filed Under: JavaScriptの話, このはとウェブログ 関連タグ:JavaScript

最初のサイドバー

More to See

csvファイルの配列化がおかしい、、、

2020-09-11 By さえきさん

エターナルハートが転厩するのはまあいいとして、、、

2020-09-09 By さえきさん

フォルダー構成のみなおしがメンドイ( 一一)

2020-09-09 By さえきさん

Tags

C# ConoHa WING CSS Genesis JavaScript JRA-VAN Magazine Pro THE THOR WordPress エターナルハート ギエナー2019 バヌーシー フランクエトワール 競馬

Categories

  • このはとウェブログ (3)
    • JavaScriptの話 (2)
    • WordPressの話 (1)
  • 日記 (17)
  • 競馬でプログラミング (14)
    • JV-LinkをC#で使ってみる(Console版) (6)
    • JV-LinkをC#で使ってみる(WinForms版) (7)

Footer

Profile

avatar
初音ミクが大好きな40代のおじさんです。
最近、バヌーシーで一口馬主を始めました。

Search

Copyright © 2021 · Magazine Pro on Genesis Framework · WordPress