「Streamlitで重い処理もスムーズに！st.fragmentで実現するキビキビとしたユーザー体験」

Streamlitは素晴らしいツールです。数行のコードでインタラクティブなWebアプリケーションを作ることができ、データサイエンティストやエンジニアにとっては夢のような存在です。しかし、Streamlitを使っていて悩ましいのが、「重い処理を実行したときにどうしても画面がもたつく」という問題です。

重い計算やデータ処理がバックグラウンドで走っている間、ユーザーが操作を待たなければならないのは残念ですよね。そうしたときに、Streamlitのst.fragmentを使えば、重い処理を効率よく分割し、キビキビした動作を実現することができるのです。今回は、その具体的な使い方について、一緒に見ていきましょう。

Streamlitの課題：重い処理とレスポンスの悪化

たとえば、大きなデータセットを扱うアプリを開発している場合、ユーザーがフィルター条件を変更するたびにデータの再計算が発生し、アプリ全体のレスポンスが遅くなることがあります。この「遅さ」は、ユーザー体験に大きく影響します。スムーズで快適な操作感を提供するためには、どのようにして重い処理を分割し、効率よく行うかがポイントになります。

ここでst.fragmentの登場です。Streamlitは基本的にページ全体をリロードしながら描画するため、負荷の高い計算が含まれるとその都度時間がかかりますが、st.fragmentを使うことで一部だけを再描画することが可能になります。

st.fragmentの使い方

st.fragmentはページ全体を再計算せず、特定の部分のみを再計算するように設定できます。次に、具体的なコード例を見てみましょう。

例：データ処理の重い部分をフラグメント化

import streamlit as st
import pandas as pd
import time

# データの読み込み部分
@st.cache_data
def load_data():
    # データの読み込み（時間がかかる処理）
    time.sleep(5)  # 模擬的に重い処理
    data = pd.DataFrame({
        'A': range(1, 11),
        'B': [x ** 2 for x in range(1, 11)]
    })
    return data

data = load_data()

# フラグメントを使った重い処理の分割
with st.fragment("filter_section"):
    filter_value = st.slider('フィルターの値を選択してください', 1, 10, 5)
    filtered_data = data[data['A'] >= filter_value]

st.write('フィルタリング後のデータ:')
st.write(filtered_data)

コードの解説

@st.cache_dataデコレーター：
- load_data関数に適用されているこのデコレーターは、データの読み込み処理が重い場合にキャッシュすることで、処理を繰り返す必要がないようにしています。これにより、同じ処理が再度呼び出されたときでも高速に結果を返すことができます。
st.fragmentの使用：
- st.fragmentを使って、フィルターの値を選択する部分のみ再描画するようにしています。このようにすることで、データ全体の読み込みを何度も行わず、必要な部分のみ更新することができます。
スライダーによるインタラクティブ性：
- ユーザーがフィルター値をスライダーで変更するたびに、filtered_dataが更新されるのですが、この部分だけをst.fragmentで包むことにより、処理が非常に軽くなるのです。

実行結果

以下は、上記コードを実行したときの挙動の様子です。

アプリの初期読み込み時に、データの読み込みに5秒かかります。
その後、スライダーを操作するたびにフィルタリングされたデータがすぐに更新され、待ち時間なしに表示されます。

フィルターの値を選択してください: [スライダーで値を選択]
フィルタリング後のデータ:
| A | B  |
|---|----|
| 5 | 25 |
| 6 | 36 |
|...|... |

このように、スライダーでフィルターの値を変えると、その場ですぐに結果が更新されます。全体の処理が重い場合でも、この部分だけを迅速に更新することができるのは、st.fragmentの力です。

スムーズなユーザー体験の実現

ユーザーがアプリを使うとき、待ち時間が少ないことは非常に重要です。特に重い処理が含まれる場合、それをどのように分割し、ユーザーに対してどのようにスムーズなレスポンスを提供できるかは、エンジニアとしての腕の見せ所です。

st.fragmentを使うことで、重い処理を行いつつも、一部の操作については瞬時に応答するような設計が可能になります。これにより、ユーザーは「待たされる」というストレスを感じることなく、直感的にアプリケーションを操作することができます。

まとめ：Streamlitとst.fragmentで作る快適なアプリケーション

Streamlitは初心者にとっても扱いやすいフレームワークですが、重い処理を含むと途端にレスポンスが悪くなるという課題があります。しかし、st.fragmentのようなツールを使うことで、この問題をうまく解決し、ユーザーにとって快適で使いやすいアプリケーションを作ることができます。

ユーザーが感じる「キビキビとした動作」は、アプリの背後で働く数々の工夫の積み重ねです。その一つ一つを理解し、実装していくことが、エンジニアとしての成長を促し、より多くの人に感動を与えるプロダクトを作り上げることにつながります。

さあ、あなたもst.fragmentを使って、ユーザーに驚きと喜びを提供するアプリケーションを作ってみましょう。重い処理でもスムーズに動くアプリケーションは、ユーザーにとっての「感動」を作り出す一つの大切な要素です。