こんにちは、こんです。
今回は「複雑なCSVの列マッピングUIをもっとラクに作れないかな？」と思って、AgGridとStreamlitというツールを使ってみた実験記録を残しておきます。
実験のきっかけ：マッピング作業がややこしい！
こんなこと、起きていませんか？
CSVの列と共通カラムを手動で突き合わせるのが大変
マッピング結果をわかりやすく表示・保存したい
UIがわかりにくいと、現場で使ってもらえない…
「なんとかしたいな」と思って、試してみることに。
試したこと
✅ Streamlit + AgGrid を使って、左右のテーブルを表示
✅ 「共通カラム」「CSV列」をそれぞれ選んで関連付け
✅ マッピング結果をセッションに保存し、下部に一覧表示
✅ JavaScriptイベント（onRowSelected）で、右テーブル選択状態をSessionStorageに書き込む仕組みに挑戦
✅ 選択状態の維持やUI制御の難しさにぶつかる…
つまずいたところと気づき
Streamlitは「ボタンを押すと再実行される」ため、選択情報が保持されにくい
AgGridの選択状態は保存されているように見えても、状態判定でミスしやすい
sessionStorage + JS連携を使えば高機能なUIは実現できそうだが、やや複雑
今日のまとめ
「AgGridの選択を使った本格的なUI」は思ったより奥が深く、完全な再現にはもう少し時間がかかりそう。でも、機能の本質部分（選択・マッピング・保存）はだいぶ形になってきました！
📌 UIにこだわるのは、全部の機能が動くようになってから！
明日以降にやること
必要最低限の機能をまず完成させる（テンプレ登録・マッピング保存）
UIの細部（見た目・操作感）の改善はそのあと
時間内に“動くもの”を優先して試作するスタンスで進める
投稿タグ
#100日チャレンジ #Streamlit #AgGrid #DX #Python