[備忘録] StreamlitでExcelのようなデータ編集機能を実装する

Streamlitで簡単にExcelライクなデータ編集機能を実装する方法をQiitaに投稿しました。Pythonの勉強備忘録として、データ操作をブラウザ上で直感的に行う方法をまとめています。初心者の方にもわかりやすく解説しているので、ぜひご覧ください！📝

## はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/57c61df8-fe1d-4893-9b6d-afc96ce5a2a1.png)

最近Pythonを勉強していく中で、データ操作のためのウェブアプリを手軽に作成できるStreamlitというフレームワークに出会いました。特に、`st.data_editor`という機能を使うとExcelのようなインタラクティブなデータ編集が可能になることを知り、備忘録として共有します。

## Streamlitとは？

[Streamlit](https://streamlit.io/)は、データサイエンス・機械学習のプロジェクトを簡単にウェブアプリ化できるPythonのフレームワークです。コードを書くだけで、インタラクティブなウェブアプリを作成できるのが特徴です。

## 環境構築

まずは必要なライブラリをインストールします。

```bash
pip install streamlit pandas
```

## データ編集機能の実装

今回紹介するのは、Excelのようなデータ編集機能です。以下のコードでは、初期データを作成し、ユーザーが自由に編集できるインターフェースを提供しています。

```python
import streamlit as st
import pandas as pd

# アプリのタイトル
st.title("Excelライクなデータ編集")

# 初期データ
df = pd.DataFrame({
    "名前": ["佐藤", "鈴木", "田中"],
    "業種": ["Technology", "Finance", "Healthcare"],
    "評価": ["Hot", "Warm", "Cold"]
})

# 編集可能なデータグリッド（Excelっぽい！）
edited_df = st.data_editor(df, num_rows="dynamic")

# 結果の表示
if st.button("✅ 保存"):
    st.success("以下のデータを受け取りました：")
    st.dataframe(edited_df)
```

## 実行方法

作成したPythonファイル（例：`app.py`）を保存し、以下のコマンドで実行します。

```bash
streamlit run app.py
```

ブラウザが自動的に開き、アプリが表示されます。


## 機能の解説

このアプリには以下の機能があります：

1. **初期データの表示**：
   - 3人の名前、業種、評価を持つデータフレームを作成しています。

2. **データ編集機能**：
   - `st.data_editor`を使用することで、データを直接編集可能にしています。
   - `num_rows="dynamic"`パラメータにより、行の追加・削除も可能になっています。

3. **保存機能**：
   - 「保存」ボタンをクリックすると、編集後のデータが表示されます。
   - 実際のアプリケーションでは、このデータをCSVとして保存したり、データベースに送信したりする機能を追加できます。

## st.data_editorの詳細オプション

`st.data_editor`には多くのカスタマイズオプションがあります：

```python
edited_df = st.data_editor(
    df,
    num_rows="dynamic",           # 行の追加・削除を許可
    disabled=["業種"],            # 特定の列を編集不可に設定
    column_config={               # 列ごとの設定
        "評価": st.column_config.SelectboxColumn(
            options=["Hot", "Warm", "Cold", "Inactive"]
        )
    },
    hide_index=True,              # インデックスを非表示
)
```

このように設定すると、「業種」列は編集できなくなり、「評価」列はドロップダウンリストから選択するようになります。

## 発展：CSVファイルのアップロード機能

実際のアプリケーションでは、初期データをCSVファイルからアップロードできると便利です：

```python
import streamlit as st
import pandas as pd

st.title("データ編集アプリ")

# CSVファイルのアップロード
uploaded_file = st.file_uploader("CSVファイルをアップロード", type=["csv"])

if uploaded_file is not None:
    # CSVファイルを読み込み
    df = pd.read_csv(uploaded_file)
    
    # データエディタの表示
    edited_df = st.data_editor(df, num_rows="dynamic")
    
    # 保存ボタン
    if st.button("✅ 保存"):
        st.success("データを保存しました")
        
        # CSVとしてダウンロード可能にする
        csv = edited_df.to_csv(index=False)
        st.download_button(
            label="CSVとしてダウンロード",
            data=csv,
            file_name="edited_data.csv",
            mime="text/csv",
        )
else:
    st.info("CSVファイルをアップロードしてください")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/efad3ee2-746b-4071-ba11-151944ed8728.png)


## まとめ

Streamlitの`st.data_editor`を使うことで、簡単にExcelライクなデータ編集機能を実装できることがわかりました。この機能は以下のような場面で特に役立ちます：

- 簡易的なデータ入力フォームとして
- データクレンジングツールとして
- 小規模なデータベース管理ツールとして

Pythonの勉強を進める中で、実用的なアプリケーションを手軽に作れるのはとても魅力的です。今後も様々な機能を試して、備忘録として共有していきたいと思います。

## 参考リンク

- [Streamlit公式ドキュメント](https://docs.streamlit.io/)
- [st.data_editorの詳細](https://docs.streamlit.io/library/api-reference/data/st.data_editor)
- [Dataframes](https://docs.streamlit.io/develop/concepts/design/dataframes)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/12c97726-6808-406f-ac52-8453454cf13b.png)


## 免責事項
本記事の作成にあたり、文章や図解の生成にClaude Sonnetを活用しました。最終的な編集と確認は筆者が行っています。