「Streamlitでアプリを作ったけど、機能が増えてきて画面がごちゃごちゃしてきた…」 「ユーザーにたくさんの情報を見せたいけど、1ページに詰め込むと縦に長くなりすぎる…」
Streamlitは手軽にWebアプリを作れる一方で、情報量が増えると「情報の整理」が課題になりがちです。そんな時、st.sidebarを使うのも一つの手ですが、もっと手軽に、メイン画面を複数の区切り（タブ）に分けて、情報をスッキリ整理できる強力な機能があります。
それが、Streamlitのst.tabsです！
この記事では、st.tabsがどのようにアプリの使いやすさを向上させるのか、そしてその基本的な使い方からちょっとした応用例まで、分かりやすいコード例とともに徹底解説します。
st.tabsとは？ アプリの「引き出し」を増やすイメージ
st.tabsは、ウェブサイトでよく見かける「タブ切り替え」のUIをStreamlitアプリで簡単に実現できる機能です。まるで一つの画面の中に、複数の「引き出し」を作るようなもの。それぞれのタブに異なるコンテンツを入れることで、ユーザーは必要な情報だけを切り替えて見ることができるようになります。
【st.tabsのメリット】
- 画面の整理： 関連性の高い情報をグループ化し、1ページの情報量を削減。
- ナビゲーションの改善： ユーザーが必要な情報に素早くアクセスできる。
- ユーザー体験の向上： 直感的でモダンなUIを提供。
- コードのシンプルさ： 複雑なページ遷移ロジックなしで、情報の切り替えを実現。
「これまではst.sidebarやst.expanderで無理やり整理してた…」という方も、st.tabsを使えば、より直感的にアプリを構築できます。
事前準備
Streamlitでtabデザインを使うには、Streamlit本体のバージョンがVersion 1.11.0以上である必要がります。Version 1.11.0以下の場合は以下のコマンドでstreamlitをバージョンアップしてください。
pip install --upgrade streamlit
以下のコマンドを実行してVersion 1.11.0以上であればOKです。
streamlit --version
(実行結果) Streamlit, version 1.11.0
基本の使い方：たった3ステップでタブを作る！
st.tabsの使い方は非常にシンプルです。まずは、最も基本的な使い方を見ていきましょう。
ステップ1：タブの作成
まず、st.tabs([“タブ名1”, “タブ名2”, …])のように、表示したいタブ名をリストで渡します。これにより、複数のタブオブジェクトが返されます。
import streamlit as st
# ここでタブを作成し、それぞれを変数に格納
tab1, tab2, tab3 = st.tabs(["📊 データ分析", "📝 レポート", "⚙️ 設定"])
# 以降のコードで、各タブにコンテンツを記述していくtab1, tab2, tab3という変数に、それぞれのタブにコンテンツを記述するための「コンテナ」が格納されます。
ステップ2：各タブにコンテンツを記述
次に、with構文を使って、それぞれのタブの中に表示したいStreamlitのウィジェットやテキストを記述します。
import streamlit as st
tab1, tab2, tab3 = st.tabs(["📊 データ分析", "📝 レポート", "⚙️ 設定"])
with tab1:
st.header("データ分析結果")
st.write("ここにグラフや統計データを表示します。")
st.line_chart([10, 20, 15, 30, 25])
with tab2:
st.header("月次レポート")
st.write("詳細な分析レポートはこちらで確認できます。")
st.markdown("### 今月のハイライト\n- 売上20%アップ\n- 顧客満足度向上")
with tab3:
st.header("ユーザー設定")
st.selectbox("表示言語", ["日本語", "English"])
st.button("設定を保存")これで、それぞれのタブに独自のコンテンツが表示されるようになりました。ユーザーがタブをクリックすると、そのタブに対応する内容に切り替わります。
st.tabsの応用：もっと便利に使いこなす！
例1：動的にタブの数を変える
特定の条件に基づいて表示するタブの数を変えたい場合などにも柔軟に対応できます。
import streamlit as st
user_role = st.selectbox("あなたのロールを選択してください", ["一般ユーザー", "管理者"])
if user_role == "管理者":
tab1, tab2, tab3 = st.tabs(["ダッシュボード", "ユーザー管理", "システム設定"])
with tab1:
st.write("管理者ダッシュボード")
with tab2:
st.write("ユーザーアカウントの管理画面")
with tab3:
st.write("システム全体の設定")
else:
tab1, tab2 = st.tabs(["ホーム", "マイページ"])
with tab1:
st.write("一般ユーザー向けホーム画面")
with tab2:
st.write("あなたの個人情報と利用履歴")
このように、if文と組み合わせることで、表示するタブを制御できます。
例2：コンテンツを関数で管理する
各タブのコンテンツが複雑になる場合、それぞれを関数として定義しておくと、コードが読みやすくなります。
import streamlit as st
def show_dashboard():
st.header("🚀 パフォーマンスダッシュボード")
st.metric("総売上", "¥1,200,000", "5% increase")
st.bar_chart({"A": 100, "B": 150, "C": 120})
def show_settings():
st.header("⚙️ アカウント設定")
st.text_input("ユーザー名", "kajiblo_user")
st.checkbox("通知を受け取る")
st.button("設定を更新")
def show_help():
st.header("❓ ヘルプセンター")
st.write("ご不明な点はこちらをご覧ください。")
st.info("よくある質問 (FAQ) は準備中です。")
tab_dashboard, tab_settings, tab_help = st.tabs(["ダッシュボード", "設定", "ヘルプ"])
with tab_dashboard:
show_dashboard()
with tab_settings:
show_settings()
with tab_help:
show_help()
これにより、コードの可読性が大幅に向上し、大規模なアプリでも管理しやすくなります。
まとめ：アプリのUXを格段に向上させるst.tabs
st.tabsは、Streamlitアプリの情報整理とユーザー体験を向上させるための非常に強力でシンプルなツールです。
- 情報をグループ化し、画面の clutter（散らかり）を解消
- ユーザーが直感的に必要な情報にアクセスできるナビゲーションを提供
- 少ないコードでモダンなUIを実現
「もっと使いやすいStreamlitアプリを作りたい！」と考えているなら、ぜひst.tabsを積極的に活用してみてください。あなたのアプリが、きっとユーザーから「使いやすい！」と評価されるはずです。
コメント