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

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

はじめに

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

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

st.containerとは？

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

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

✅ 基本構文

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

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

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

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

import streamlit as st

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

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

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

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}歳）、ご入力ありがとうございます！")

✅ 解説

• with st.container(): の中にすべての UI 要素を入れることで、1つの機能ブロックとして視覚的にもコード的にも整理できます。
• 入力結果を表示する処理も同じコンテナ内にあるため、拡張もしやすい構成です。

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

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

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

import pandas as pd

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

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

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

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

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

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

    st.dataframe(filtered_df)

コード全体

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)

✅ 解説

• フィルタとデータ表示を別々のコンテナに分けることでUIの目的が明確になり、ユーザーにも分かりやすくなります。
• st.slider を動かすと、下の st.dataframe に反映される仕組みになっています。

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

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

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

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

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

✅ 解説

• range(3) により、3つのコンテナが自動的に作成されます。
• 入力フィールドをまとめるのに非常に便利な構成です。

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

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

まとめ

• st.container を使えば、Streamlit アプリの構造が見やすく整理しやすくなります。
• 実用的なフォームやデータ表示の場面で非常に役立ちます。
• 複雑なレイアウトも、container を活用すれば拡張性と保守性が大幅に向上します。

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

参考リンク

• 🔗 Streamlit公式ドキュメント：st.container
• 🔗 Streamlitのレイアウト要素まとめ

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