はじめに

業務の中で、あまりにも視認性の悪いスプレッドシートに遭遇しました。
詳細は伏せますが、とあるアンケートの結果を集計したシートなのですが、自由記述欄のあるアンケートですので1つのセルに入力される文字数が膨大でした。
そのように膨大な文字が入力されたセルが縦横無尽に並んでおりまして、まぁ視認性の悪い悪い。
困り果てた私は、救いの神 ChatGPT様に救いを求めたのでした。

やりとり

私の方からChatGPT様にお送りしたプロンプトは以下のような感じです。

csvを読み込んで良い感じに見やすくするJS
読み込んだcsvに対して、GUI上で特定の列だけを選択して表示するようなwebアプリは作れないだろうか？
読み込むcsvが実はアンケートの結果で、1つのセルに格納されている文章量が多い。なので表形式だと見づらいので、選択した列に対して以下の操作をしたい
- 1行目(ヘッダ部分)を項目名として表示
- 2行目以降を、項目名の下に箇条書きで表示
箇条書きについて。空白の場合はスキップするように

たったこれだけです。
私の送ったプロンプトとプロンプトの間にはChatGPT様のご返答があるのですが、長いので省略しています。

結果

詳細

ChatGPT様に書いて頂いたHTML, CSS, JavaScriptのコードをそのまま入れてます
git clone して index.htmlを開けばブラウザ上でアプリが開くはずです
csvファイルを読み込ませれば、あとはブラウザ上に表示させたい項目のチェックボックスが出るので、それを適宜オンオフすれば読みたい項目だけ読むことができます

※私の場合はアンケート結果をGoogleスプレッドシートにて展開されたので、スプレッドシートをcsvに変換してから読み込ませました。

デモ

言葉だけで説明しても分かりにくいと思ったので、テストデータを読み込ませて実際の表示をスクショしました。

こんな風に、

表示させる項目をチェックボックスから選べる
表示した項目ごとに箇条書きで内容を表示する

といった実装にしてみました(書いたのはChatGPT様ですが)。

このテストデータではあまりありがたみが実感できないかもですが、箇条書き1つ1つに100文字〜200文字くらいの文章が入っていたらどうでしょうか。これを表形式で閲覧するのは、相当に苦痛を伴う作業になるのは想像に難くないでしょう。

終わりに

そんなわけで、視認性の悪いスプレッドシートをChatGPT様にあっという間に見やすくしてもらったという話でした。
出力されたコードは一切いじっておらず、実際にファイルを開けるようになるまでにかかった時間は5分にも満たなかったと思います。ChatGPT様、末恐ろしいですね。
大してデバッグもしておらず見た目も洗練されていませんが、ちょっとしたcsvを見やすくする用途には十分使えるものが仕上がったかと思います。使ってみたい方は是非上記のgithubリンクからDLしてみてください。

【2024/11/07 追記】

GitHub Pagesにデプロイしてみました
- https://ryota37.github.io/csvformatter/
- ↑のURLにアクセスすれば、どなたでも使えるはずです