CSVや、地理院地図で便利さと手軽さが分かったWebComponent。 タブ区切り版へのご要望(by @imabari_ehimeさん)があったので、作ってみました。

<script type="module" src="https://code4sabae.github.io/csv-table/tsv-table.mjs"></script> <tsv-table>項目 CSV TSV 区切り カンマと改行 タブと改行 拡張子 .csv .tsv (?) 利用 多い 少ない 表計算ソフト連携 ファイル操作必要 コピペでOK </tsv-table>

と、HTMLに記述すると、下記のようにテーブルができます。CSSで自由に飾れます。 項目 CSV TSV 区切り カンマと改行 タブと改行 拡張子 .csv .tsv (?) 利用 多い 少ない 表計算ソフト連携 ファイル操作必要 コピペでOK

以下、作り方の解説です。
(前提知識、IchigoJamなどのプログラミングの基本 + HTML/CSS/JSはじめのいっぽ

まずタブ区切り版とは、CSVがコンマ(C)区切り(S)値(V)だったのに対して、タブ(T)区切り(S)値(V)な点が異なります。

項目 CSV TSV 区切り カンマと改行 タブと改行 拡張子 .csv .tsv (?) 利用 多い 少ない 表計算ソフト連携 ファイル操作必要 コピペでOK

tsvファイルとしての流通はほとんどありませんが、Excelからテキストへのコピーや、テキストからExcelへのコピー時に使用されていて、見た目にも分かりやすいのが利点です。

早速、実装してみましょう!まずは空の tsv-table タグを作ります。

<body> <script type="module"> class TSVTable extends HTMLElement { constructor () { super(); this.textContent = "tsv-table!!"; } } customElements.define("tsv-table", TSVTable); </script> <tsv-table> id name 1 なまえ 2 名前 3 ナマエ </tsv-table> </body>

this.textContent はタグ内の文字列です。ブラウザで表示すると、中身は無視されて「tsv-table!!」と表示され、自作のタグが動いたことがわかります。 あとは、タグ内のデータをテーブルに変換するだけです。

const v = this.textContent.trim().split("\n").map(a => a.split("\t")); console.log(v);

前後の空白を無視する trim、改行で区切る split、配列から新しい配列を作る map を使って、TSVを2次元配列に変換します。 console.log で表示すると Chrome の DevTools などで確認できます。

mapを使わず、下記のように for で繰り返しするのと意味は同じです。

const s = this.textContent.trim().split("\n"); const v = []; for (let i = 0; i < s.length; i++) { v[i] = s[i].split("\t"); } console.log(v);

二次元配列を HTML の table にしましょう!

this.innerHTML = ["<table>", v.map(a => `<tr>${a.map(b => `<td>${b}</td>`).join("")}</tr>`).join(""), "</table>"].join("");

mapとjoinを使うとコンパクトに実装できます。
配列の連結する join を使って、tdで囲んだtrをtableで囲んでできあがり!

<style> table { border-collapse: collapse; } td, th { border: 1px solid #333; padding: .1em .5em; font-size: 90%; } </style>

CSSで好きなように装飾して使いましょう!(HTMLElement内で設定してもOK!)

表計算ソフト、データの中に改行があったりタブがあったらどうなるでしょう?(国際機関IANAが定めるTSV規格では項目、値内のタブや改行は禁止されています。)

試してみたところ、CSVと同様、ダブルクォートで囲まれたり、ダブルクォートは2つ重ねるエンコードがされるようで、ExcelもGoogleスプレッドシートも同じでした。 この形式に対応するには上記の単純な変換に替えて、decodeTSVという字句解析して配列を返す関数を実装します。(src on GitHub

スクリプト部分を tsv-tabel.mjs という名前にすれば、scriptタグで読み込んでいろいろなHTMLファイルで使い回せて便利です。 フレームワークの基本ですね!

Let's enjoy your web programming!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS