元記事
HTML5のtableタグをCSV出力（ダウンロード）してみる - Qiita
HTMLに表示されているtable要素をまるっと簡単にダウンロードできないかなーとググって最初にあたった記事です。
2018年の記事でIE対応とかイマドキ感にかけるので、イマドキ風にTypeScriptでChatGPTにリファクタリングしてもらいました。
GPT3.5によるリファクタリング
Poe - TML5のtableタグをCSV出力（ダウンロード）してみるリファクタリング
以下は、より効率的なリファクタリング例です。
function handleDownload(): void {
const bom: Uint8Array = new Uint8Array([0xEF, 0xBB, 0xBF]); // 文字コードをBOM付きUTF-8に指定
const table: HTMLTableElement | null = document.getElementById('table1') as HTMLTableElement; // id=table1という要素を取得
let data_csv: string = ''; // ここに文字データとして値を格納していく
if (!table) {
return;
}
for (let i = 0; i < table.rows.length; i++) {
const cells: HTMLCollectionOf<HTMLTableDataCellElement> = table.rows[i].cells;
data_csv += [...cells].map(cell => cell.innerText).join(","); // HTML中の表のセル値をdata_csvに格納
data_csv += '\\n'; // 行終わりに改行コードを追加
}
const blob: Blob = new Blob([bom, data_csv], { type: 'text/csv' }); // data_csvのデータをcsvとしてダウンロードするためのBlobオブジェクトを作成
if (window.navigator.msSaveBlob) {
// IEの場合の処理
window.navigator.msSaveBlob(blob, 'test.csv');
//window.navigator.msSaveOrOpenBlob(blob, "test.csv");// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
} else {
const downloadLink: HTMLAnchorElement | null = document.getElementById('download') as HTMLAnchorElement;
if (downloadLink) {
downloadLink.href = window.URL.createObjectURL(blob);
}
}
data_csv = ''; // data_csvオブジェクトはもういらないので空文字列で初期化してメモリを開放
}
主な変更点は次のとおりです。
-
tableの存在チェックを行い、存在しない場合は関数を終了させるようにしました。 -
mapメソッドを使用してセルの値をマッピングし、joinメソッドを使用してカンマで結合することで、ループと条件分岐を削減しました。 - 行終わりの改行コードをループの外側で追加するように変更しました。
-
data_csvを空文字列で初期化する箇所を移動し、ループの内側から外側に移動しました。 -
cellsの取得においてスプレッド演算子を使用し、HTMLCollection を配列に変換しました。これにより、mapメソッドが直接使用できるようになりました。 -
data_csvの初期化には空文字列を使用し、nullではなくなりました。
GPT-4によるリファクタリング
さらに自分用に改良を加え、それをGPT-4に直してもらいました。
改良内容は以下です。
- IE対応を削除した
- ボタン(風に見えるaタグ)をあらかじめHTMLに配置し、そのURLを変更する関数に切り出し
- Bootstrap5を取り入れてダウンロードアイコンで表示
index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<a name="download-button" class="btn btn-outline-secondary" href="#" download disabled>
<i class="bi bi-cloud-download"></i>
</a>
<table name="result-table">
<!-- テーブル要素は省略 -->
</table>
</body>
style.css
a[disabled] {
pointer-events: none;
}
改良を加えたコードをプロンプトとして渡しました。(折りたたみ)
// table要素をCSVとしてダウンロードするリンクを作成する
const handleDownload = (): void => {
const table: HTMLTableElement | null = document.querySelector(
`table[name='result-table']`,
);
if (!table) {
console.error("table not found.");
return;
}
const downloadLink: HTMLAnchorElement | null = document.querySelector(
`a[name='download-button']`,
);
if (!downloadLink) {
console.error("download link not found.");
return;
}
// 検索結果がなければ終了
const len: number = table.rows.length;
if (len < 2) {
// disable要素がなければ付与する
downloadLink.href = "#";
downloadLink.classList.add("btn-outline-secondary");
downloadLink.classList.remove("btn-primary");
downloadLink.setAttribute("disabled", "");
console.error("filter result not found.");
return;
}
let data_csv: string;
// テーブル要素を取得してstringに格納
for (let i = 0; i < len; i++) {
const cells: HTMLCollectionOf<HTMLTableDataCellElement> =
table.rows[i].cells;
// 表のセ��の値をcsv文字列として結合
� data_csv += [...cells].map((cell) => cell.innerText).join(",");
data_csv += "\n";
}
const bom: Uint8Array = new Uint8Array([0XEF, 0XBB, 0XBF]); // UTF8指定
const blob: Blob = new Blob([bom, data_csv], { type: "text/csv" }); // ダウンロードするBlobオブジェクト
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.classList.remove("btn-outline-secondary");
downloadLink.classList.add("btn-primary");
downloadLink.removeAttribute("disabled");
};
リファクタリングしてください。
ChatGPT: 以下は提供されたコードをリファクタリングしたものです。「ボタンを作成する」、「テーブルデータをCSVとして取得する」、
「ダウンロードリンクを設定する」の3つの関数に分割しています。
const handleDownload = (): void => {
const table: HTMLTableElement | null = document.querySelector(`table[name='result-table']`);
const downloadLink: HTMLAnchorElement | null = document.querySelector(`a[name='download-button']`);
if (!table || !downloadLink) {
console.error("table or download link not found.");
return;
}
const data_csv: string = getTableDataAsCsv(table);
if (!data_csv) {
initializeButton(downloadLink);
console.error("filter result not found.");
return;
}
setDownloadLink(downloadLink, data_csv);
};
const initializeButton = (downloadLink: HTMLAnchorElement): void => {
downloadLink.href = "#";
downloadLink.classList.add("btn-outline-secondary");
downloadLink.classList.remove("btn-primary");
downloadLink.setAttribute("disabled", "");
};
const getTableDataAsCsv = (table: HTMLTableElement): string => {
const len: number = table.rows.length;
if (len < 2) return "";
let data_csv = "";
for (let i = 0; i < len; i++) {
const cells: HTMLCollectionOf<HTMLTableDataCellElement> = table.rows[i].cells;
data_csv += [...cells].map(cell => cell.innerText).join(",") + "\\n";
}
return data_csv;
};
const setDownloadLink = (downloadLink: HTMLAnchorElement, data_csv: string): void => {
const bom: Uint8Array = new Uint8Array([0XEF, 0XBB, 0XBF]);
const blob: Blob = new Blob([bom, data_csv], { type: "text/csv" });
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.classList.remove("btn-outline-secondary");
downloadLink.classList.add("btn-primary");
downloadLink.removeAttribute("disabled");
};
このように処理を分割することで、各関数は一つの具体的なタスクだけを扱います。これによりコードの可読性が向上し、将来的にバグを
修正しやすくなったり、新機能を追加しやすくなるというメリットがあります。
エントリーポイントはhandleDownload()です。handleDownload()を実行するタイミングは、テーブル作成スクリプトの直後においたり、onclick=handleDownload()を設定したボタンを設置するなどしてください。
私の力は１割くらいしか使っていません。
元コードの作者様の@skmk(Miki Shunsuke )とChatGPTおよびOpenAI社に敬意を評します。