サイトアイコン アマチュア無線局JS2IIU

【Streamlit】高度なレイアウト：st.containerの使い方と実践例

JS2IIU

こんにちは、JS2IIUです。
Streamlitでより複雑なUI構造を作るためのコンテナの利用方法について見ていきます。思い通りのレイアウトでUIを作成していきましょう。今回もよろしくお願いします。

はじめに

Streamlit は、簡単に Web アプリを作成できる Python ライブラリとして人気があります。UI コンポーネントを直感的に配置できるのが大きな魅力ですが、アプリの規模が大きくなると「UIのまとまり」や「構造の整理」が重要になってきます。

この記事では、そんなときに便利な st.container の使い方について、基本から実践例まで丁寧に解説します。

st.containerとは？

st.container は、Streamlit で UI 要素をグループ化できるレイアウト要素です。これを使うと、コードの構造が整理しやすくなり、アプリの保守性や可読性が向上します。

また、特定の UI 領域だけを更新したいときや、入れ子のレイアウト構造を作りたいときにも役立ちます。

✅ 基本構文

Python
with st.container():
    st.write("この中にUI要素をまとめて配置できます")

実践ステップ①：入力フォームをコンテナでまとめる

まずは、名前と年齢を入力する簡単なフォームを st.container でグループ化してみましょう。

📌 ステップ1：Streamlit の基本セットアップ

Python
import streamlit as st

st.title("ユーザー情報フォーム")

このコードで、ページのタイトルを設定しています。

📌 ステップ2：st.container でフォームをまとめる

Python
with st.container():
    st.subheader("ユーザー情報の入力")

    name = st.text_input("名前を入力してください")
    age = st.number_input("年齢を入力してください", min_value=0, max_value=120, step=1)

    if st.button("送信"):
        st.success(f"{name} さん（{age}歳）、ご入力ありがとうございます！")

✅ 解説

実践ステップ②：データ表示とフィルタを分ける

次に、データのフィルタ処理と表示処理を別々のコンテナで分けて管理してみましょう。

📌 ステップ1：ダミーデータを準備する

Python
import pandas as pd

df = pd.DataFrame({
    '名前': ['田中', '鈴木', '佐藤', '山本'],
    '年齢': [32, 25, 28, 40]
})

📌 ステップ2：フィルタ用コンテナを作る

Python
with st.container():
    st.subheader("年齢フィルタの設定")
    age_range = st.slider("表示する年齢範囲", min_value=0, max_value=100, value=(20, 40))

📌 ステップ3：表示用コンテナを作る

Python
with st.container():
    st.subheader("フィルタ結果の表示")

    filtered_df = df[
        (df['年齢'] >= age_range[0]) & (df['年齢'] <= age_range[1])
    ]

    st.dataframe(filtered_df)

コード全体

Python
import streamlit as st
import pandas as pd

df = pd.DataFrame({
    '名前': ['田中', '鈴木', '佐藤', '山本'],
    '年齢': [32, 25, 28, 40]
})

# Streamlitのコンテナを使用して、フィルタ機能を作成
with st.container():
    st.subheader("年齢フィルタの設定")
    age_range = st.slider("表示する年齢範囲", min_value=0, max_value=100, value=(20, 40))

# Streamlitのコンテナを使用して、フィルタ結果を表示
with st.container():
    st.subheader("フィルタ結果の表示")

    filtered_df = df[
        (df['年齢'] >= age_range[0]) & (df['年齢'] <= age_range[1])
    ]

    st.dataframe(filtered_df)

✅ 解説

実践ステップ③：繰り返し処理で複数コンテナを生成する

最後に、複数の入力ブロックをループで動的に作成する方法を紹介します。

📌 ステップ1：繰り返しでコンテナを作成

Python
st.title("複数セクションの入力")

for i in range(3):
    with st.container():
        st.subheader(f"セクション {i + 1}")
        st.text_input(f"セクション {i + 1} のコメント")

✅ 解説

応用ポイント：他のレイアウトとの使い分け

レイアウト要素特徴
st.containerUIをブロック単位でまとめる・再描画を分離
st.expander折りたたみUIで表示・非表示を切り替え
st.sidebar画面左にサイドバーUIを配置
st.columns複数列の横並びレイアウトを作成

st.container はこれらの要素と組み合わせて使うことで、より柔軟で高度なレイアウトが可能になります。

まとめ

Streamlit アプリの開発で、「もっと整理されたUIを作りたい」と思ったときは、ぜひ st.container を活用してみてください。

参考リンク

最後まで読んでいただきありがとうございました。

モバイルバージョンを終了