【Streamlit】containerを使用した動的要素管理・レイアウト整理

Streamlitのcontainerは、複数の要素をまとめてレイアウトを整理したり、動的に要素を追加する際に便利な機能です。この機能を利用することにより、アプリケーションの見た目や操作性を大幅に向上させることができます。

Contents

containerの基本
containerを使うメリット
動的な要素追加の例
コンテナと他のレイアウト機能との違い
データ表示切替の例
注意点
まとめ

containerの基本

containerは、Streamlitのst.container()を使って作成します。

container内に配置された要素は、他の要素とは独立して管理され、動的な要素追加や削除に対応できます。

基本的な構文

import streamlit as st

with st.container():
    st.header("これはコンテナの中です")
    st.write("このテキストはコンテナ内に配置されています。")

st.write("これはコンテナの外です。")

実行結果

“これはコンテナの中です” と “このテキストはコンテナ内に配置されています。” がグループ化されます。
“これはコンテナの外です。” は別のセクションとして表示されます。

containerを使うメリット

レイアウトの整理
要素をグループ化して一貫性のあるUIを作成できます。
動的な要素の管理
コンテナに新しい要素を追加することで、インタラクティブなアプリを構築できます。
カスタマイズ性の向上
必要に応じて、特定の要素だけを更新したり再描画したりできます。

動的な要素追加の例

以下の例では、ボタンをクリックするたびに新しい要素をコンテナ内に追加します。

import streamlit as st

# 初期化
if "messages" not in st.session_state:
    st.session_state.messages = []

# コンテナの作成
container = st.container()

# ボタンでコンテナに動的に要素を追加
if st.button("Add Text"):
    st.session_state.messages.append("新しいテキストが追加されました！")

# コンテナに保存されたメッセージを表示
with container:
    for msg in st.session_state.messages:
        st.write(msg)

実行結果

初回実行時、st.session_state.messagesに空のリストを作成します。

ボタンを押すたびに、リストに新しいメッセージが追加されます。

コンテナはst.session_state.messagesの内容を順番に描画します。

container = st.container() で先に描画領域が確保されているため、以下のように、ボタンの上に追加したメッセージが表示されます。

コンテナと他のレイアウト機能との違い

機能	説明	主な用途
`st.container()`	要素をグループ化し、動的に要素を追加可能	インタラクティブなUIの構築
`st.columns()`	水平方向のレイアウトを作成	列に分割した情報の表示
`st.expander()`	折りたたみ可能なセクションを作成	必要に応じて詳細情報を隠して表示

データ表示切替の例

コンテナを使って、データセットを動的に切り替えるインターフェースを構築します。

import streamlit as st
import pandas as pd

# サンプルデータ
data1 = pd.DataFrame({"A": [1, 2, 3], "B": [4, 5, 6]})
data2 = pd.DataFrame({"X": [10, 20, 30], "Y": [40, 50, 60]})

# コンテナ作成
container = st.container()

# データ選択
option = st.selectbox("表示するデータを選択してください", ["データセット1", "データセット2"])

# コンテナに動的にデータを表示
with container:
    if option == "データセット1":
        st.write(data1)
    else:
        st.write(data2)