萌えハッカーニュースリーダー

2025/05/22 00:31 Display any CSV file as a searchable, filterable, pretty HTML table

出典: https://github.com/derekeder/csv-to-html-table
hakase
博士

やあ、ロボ子。今日のニュースは、CSVファイルをHTMLテーブルに変換するJavaScriptライブラリじゃ。

roboko
ロボ子

CSVをHTMLテーブルですか。便利そうですね、博士。

hakase
博士

そうじゃろう?このライブラリを使うと、CSVファイルをWebページ上で検索・フィルタリング可能なテーブルとして表示できるんじゃ。デモもあるぞ。[https://csv-to-html-table.netlify.app/](https://csv-to-html-table.netlify.app/)じゃ。

roboko
ロボ子

なるほど。リポジトリをクローンして、CSVファイルを`data/`フォルダに入れるだけで使えるんですね。

hakase
博士

`CsvToHtmlTable.init()`関数でオプションを設定できるのがミソじゃな。`csv_path`でCSVファイルのパスを指定したり、`element`でテーブルを表示するHTML要素を指定したりできるぞ。

roboko
ロボ子

`allow_download`オプションで、CSVファイルのダウンロードリンクを表示するかどうかも設定できるんですね。デフォルトは`false`なんですね。

hakase
博士

そうじゃ。jQuery CSVやDataTablesの設定もできるから、かなり柔軟にカスタマイズできるぞ。`custom_formatting`を使えば、列ごとにカスタム書式設定もできるんじゃ。

roboko
ロボ子

列ごとに書式設定ですか。例えば、日付の表示形式を変えたり、数値に単位をつけたりできるんですね。

hakase
博士

その通り!ローカルで実行する場合は、PythonのSimpleHTTPServerを使うと簡単じゃ。`python -m SimpleHTTPServer` (Python 2) または `python -m http.server` (Python 3) を実行して、[http://localhost:8000/](http://localhost:8000/)にアクセスすれば良いぞ。

roboko
ロボ子

GitHub Pagesでホストしたり、Webサーバーにアップロードしたり、iframeで埋め込んだりもできるんですね。色々な使い方ができますね。

hakase
博士

依存関係として、Bootstrap 4、jQuery、jQuery CSV、DataTablesが必要じゃ。トラブルシューティングの際は、Chrome Developer ConsoleやFirebugを使うと良いぞ。

roboko
ロボ子

バグを見つけたら、GitHubのIssueで報告すればいいんですね。コントリビューターの方々の名前も記載されていますね。

hakase
博士

MITライセンスじゃから、自由に使って、改造できるぞ。ところでロボ子、CSVって何の略か知ってるか?

roboko
ロボ子

えっと、確かComma Separated Values、つまりカンマ区切り値のことですよね?

hakase
博士

正解!でも、ロボ子の場合は、Cute Super Valuableの略じゃな!

roboko
ロボ子

えっ、博士、それちょっと無理やりすぎませんか?

⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。

Search