こんにちは、JS2IIUです。
今回もst.session_stateに関するトピックスです。UIを制御するためにst.session_stateをフラグ的に活用する場面を見ていきます。今回もよろしくお願いします。
はじめに
Streamlit を使って Web アプリを作成していると、「一度だけ表示したいメッセージ」や「ボタンを押したときだけ表示される詳細画面」など、一時的な UI の状態を制御したい場面がよくあります。
こうした UI の状態管理には、Streamlit の st.session_state を使うのが便利です。この記事では、st.session_state を活用して以下のような機能を実現する方法を、ステップバイステップで丁寧に解説します。
- 一度だけ表示するメッセージ
- モーダルの開閉状態をボタンで制御
- チェックボックスやフラグで UI を切り替え
st.session_state とは？
st.session_state は、ユーザーごとのセッションに紐づいて値を一時的に保存できる仕組みです。
Python の辞書のように使うことができ、値をセットしたり取得したりできます。
# 値のセット
st.session_state["flag"] = True
# 値の取得
if st.session_state["flag"]:
st.write("フラグが True です")ただし、最初に使う前に存在チェックして初期化することが大切です。次のセクションから、実際のユースケースで詳しく見ていきましょう。
1. 一度だけ表示するメッセージを制御する
やりたいこと
ユーザーがページを開いたときに、メッセージを一度だけ表示し、「閉じる」ボタンを押すと非表示にしたい。
ステップ1：フラグの初期化
まず、st.session_state に show_alert というフラグを追加し、初期値を True に設定します。
if "show_alert" not in st.session_state:
st.session_state["show_alert"] = Trueステップ2：フラグの状態に応じてメッセージを表示
次に、show_alert が True のときだけメッセージを表示し、ボタンで False に変更します。
if st.session_state["show_alert"]:
st.success("このメッセージは一度だけ表示されます。")
if st.button("メッセージを閉じる"):
st.session_state["show_alert"] = False✅ 完成コード
import streamlit as st
# フラグの初期化
if "show_alert" not in st.session_state:
st.session_state["show_alert"] = True
# フラグが True のときだけメッセージを表示
if st.session_state["show_alert"]:
st.success("このメッセージは一度だけ表示されます。")
if st.button("メッセージを閉じる"):
st.session_state["show_alert"] = False
2. モーダル（Dialog）の開閉状態を制御する
やりたいこと
「詳細を見る」ボタンをクリックするとモーダルウィンドウ（ダイアログ）が開き、「閉じる」ボタンで閉じるようにしたい。
ステップ1：モーダル用のフラグを初期化
if "open_modal" not in st.session_state:
st.session_state["open_modal"] = Falseステップ2：開閉用の関数を定義
def open():
st.session_state["open_modal"] = True
def close():
st.session_state["open_modal"] = Falseステップ3：モーダルを表示するロジックを記述
# 「詳細を見る」ボタン
st.button("詳細を見る", on_click=open)
# モーダル風の表示制御（実際はボックスで代用）
if st.session_state["open_modal"]:
with st.container():
st.markdown(
"""
<div style="background-color:#f0f0f5; padding:20px; border-radius:10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);">
<h4>詳細モーダル</h4>
""",
unsafe_allow_html=True,
)
st.write("ここに詳細な説明を書きます。")
st.button("閉じる", on_click=close)
st.markdown("</div>", unsafe_allow_html=True)✅ 完成コード
import streamlit as st
# フラグの初期化
if "open_modal" not in st.session_state:
st.session_state["open_modal"] = False
# 開閉用関数
def open():
st.session_state["open_modal"] = True
def close():
st.session_state["open_modal"] = False
# 「詳細を見る」ボタン
st.button("詳細を見る", on_click=open)
# モーダル風の表示制御（実際はボックスで代用）
if st.session_state["open_modal"]:
with st.container():
st.markdown(
"""
<div style="background-color:#f0f0f5; padding:20px; border-radius:10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);">
<h4>詳細モーダル</h4>
""",
unsafe_allow_html=True,
)
st.write("ここに詳細な説明を書きます。")
st.button("閉じる", on_click=close)
st.markdown("</div>", unsafe_allow_html=True)
3. チェックボックスでフォームの表示を切り替える
やりたいこと
チェックボックスの ON/OFF に応じて、入力フォームを表示したり非表示にしたりする。
✅ 完成コード
import streamlit as st
# チェックボックスでフラグを直接制御（初期化不要）
st.checkbox("詳細入力を表示", key="show_form")
# フラグが True のときだけフォームを表示
if st.session_state["show_form"]:
name = st.text_input("名前を入力してください")
age = st.number_input("年齢を入力してください", min_value=0)
st.write(f"名前: {name}, 年齢: {age}")
解説
- チェックボックスやラジオボタンなどは
keyを指定すれば自動的にsession_stateに値が格納されます。 - 状態管理が簡潔に書けるのが特長です。
よくある注意点とベストプラクティス
- フラグの初期化を忘れると
KeyErrorが発生します。 - Streamlit は再実行されやすいため、
session_stateを使って状態を維持することが重要です。 - ページを再読み込みすると
session_stateはリセットされるため、必要に応じて外部ストレージとの併用も検討しましょう。
まとめ
st.session_stateを使うことで、Streamlit の UI に一時的な状態を持たせて制御できます。- フラグを用いて、「一度だけ表示するメッセージ」「モーダルの開閉」「チェックボックスによるフォーム表示切替」など、柔軟な UI 操作が可能になります。
- 状態管理はユーザー体験を向上させるために欠かせない重要なテクニックです。
参考リンク
最後まで読んでいただきありがとうございます。
コメント