こんにちは、JS2IIUです。
StreamlitはPythonで簡単にWebアプリを作成できるライブラリですが、インタラクションの状態を管理するためのst.session_stateや、ウィジェットの動作に対応するためのon_click / on_changeなどのコールバック関数は必須の知識です。具体的に見ていきましょう、今回もよろしくお願いします。
▶ st.session_stateの基本
Streamlitでは、各ウィジェットの値やユーザーの操作状況を保持するためにst.session_stateを使います。
ステップ 1: 基本的な使い方
Python
import streamlit as st
# 初期値の設定
if 'count' not in st.session_state:
st.session_state.count = 0
st.write(f"現在のカウント: {st.session_state.count}")上記のように、初めてスクリプトを実行したときに初期値を設定し、その後は状態を続けて保持できます。
▶ コールバック関数 (on_click / on_change)
Streamlitのウィジェットには、操作が行われたときに特定の函数を呼び出すことができる機能があります。
on_click: ボタンやチェックボックスの操作時on_change: テキスト入力やスライダーの値変更時
これらの関数は、インタラクションに従って経路を切り替えたり、状態を更新するのに便利です。
▶ 実践例1: on_clickで状態を加算
目的
ボタンを押すたびに、カウントを+1する
コード
Python
import streamlit as st
# 初期値
if 'count' not in st.session_state:
st.session_state.count = 0
def increment():
st.session_state.count += 1
st.button("カウントアップ", on_click=increment)
st.write(f"現在の値: {st.session_state.count}")解説
- ボタンが押されたら
incrementが呼ばれる st.session_state.countを+1するため、次のレンダリングで表示値が増える
▶ 実践例2: on_changeでテキスト入力を状態管理
目的
ユーザー名の入力値を状態に保存し、表示を切り替える
コード
Python
import streamlit as st
def greet():
st.session_state.greet_flag = True
st.text_input("名前を入力", key="username", on_change=greet)
if st.session_state.get("greet_flag"):
st.write(f"こんにちは、{st.session_state.username} さん♪")解説
- 入力値が変わると
greet()が呼ばれる - 状態フラグ
greet_flagで表示切り替え
▶ 実践例3: フォーム送信と値のリセット
目的
フォーム送信で状態を更新、ボタンで入力をリセット
コード
Python
import streamlit as st
def submit():
st.session_state.submitted = True
def reset():
st.session_state.name = ""
st.session_state.submitted = False
with st.form("user_form"):
name = st.text_input("お名前", key="name")
st.form_submit_button("送信", on_click=submit)
if st.session_state.get("submitted"):
st.write(f"ようこそ、{st.session_state.name} さん")
if st.button("リセット", on_click=reset):
st.experimental_rerun()
解説
form_submit_buttonにon_clickでフラグを管理- リセットボタンで値をリセットし、
st.experimental_rerun()で再読み込み
▶ まとめ
st.session_stateを使うことで、アプリ内の状態を保持して簡単に管理できますon_click/on_changeを使うと、インタラクションごとのロジック切り替えができます- 実用例を参考に、これらの技術を自分のアプリで活用してみましょう
▶ 参考リンク
最後まで読んでいただきありがとうございます。
コメント