Streamlitでサイドバー(sidebar)を作成する方法を解説

サル

「サイドバーの作り方が分からない」
「サイドバーで何が出来るのか分からない」

とお悩みではないでしょうか。

サイドバーを作成できると、ページの遷移やグラフをリアルタイムで変化させられます。

本記事では、Streamlitのサイドバーの作成方法から使用できる場面まで、網羅的に解説していきます。

最後まで読めば、Streamlitでのサイドバーの利用は完璧になるでしょう。

本記事の信頼性

Webアプリを簡単開発！

しょー

StreamlitだけでWebアプリを開発するには限界があります

HTMLやCSSを書かなくていいのがStreamlitの利点ですが、Streamlitだけだとアプリ開発は難しいでしょう。

そんな悩みを抱えているあなたにおすすめしたいUdemyの講座が「FastAPIによるWeb API開発講座」です。

• フロントエンド：Streamlit
• バックエンド：FastAPI
• データベース：SQLAlchemy

以上のフレームワークの構成で簡単な予約アプリまで作れるようになります。

しょー

一切開発をしたことがない僕でも簡単に理解できました！

Streamlitに限界を感じている人は、ぜひ受講してStreamlitマスターになりましょう。

＼Streamlitの開発がさらに容易に！／

Udemyでアプリ開発を学ぶ

しょー

それでは本編です！

1. Streamlitでサイドバー（sidebar）を作る方法

まず、「Streamlitでサイドバー（sidebar）を作る方法」について見ていきましょう。

以下のような順で解説していきます。

• Streamlitのサイドバー（sidebar）とは
• サンプルコードでサイドバーを作成してみよう

サイドバーを実装するためのサンプルコードまで解説するので、ぜひ参考にしてください。

Streamlitのサイドバーとは

Streamlitのサイドバーは、Webアプリの左側に配置される領域で、ユーザーがアプリを操作できるように設置します。

サイドバーでは、テキスト入力ボックスやボタン、スライダーなど、様々なウィジェットを配置できるため、データの選択やフィルタリングに用いられることが多いです。

例えば、グラフのデータ数を減らすようにサイドバーのウィジェットを操作すれば、その入力に応じてグラフが更新されます。

しょー

次に、サンプルコードを通じて、サイドバーの基本的な作成方法を見ていきましょう。

サンプルコードでサイドバーを作成してみよう

Streamlitのサイドバーを使用して、複数選択ボックスを作成する基本的なサンプルコードを以下に示します。

Streamlitのサイドバーはst.sidebarで配置でき、st.sidebar.sliderやst.sidebar.buttonのようにすると、サイドバーにスライダーやボタンを追加できます。

以下のコードは、サイドバーに複数選択ボックスを表示するサンプルコードです。

import streamlit as st

# サイドバーに複数選択ボックスを作成
selected_items = st.sidebar.multiselect(
    '好きなフルーツを選んでください',
    ['りんご', 'みかん', 'ぶどう', 'もも'],
    default=['りんご']
)

# メインエリアに選択結果を表示
st.write(f'選んだフルーツ: {", ".join(selected_items)}')

上記のサンプルコードでは、st.sidebar.multiselectを使用してサイドバーに複数選択ボックスを作成しています。

選択ボックスには4つのフルーツの名前がオプションとして表示され、ユーザーは複数のフルーツを選択可能です。

複数選択ボックス（multiselect）のカスタマイズ方法を詳しく知りたい方は、『【完全網羅】Streamlitのmultiselectの扱い方を解説』の記事をご参照ください。

上記のサンプルコードを実行すると、以下のような画面になります。

このように、Streamlitではさまざまなウィジェットを簡単にサイドバーに追加できます。

サンプルコードを参考に、サイドバーを作成してみましょう！

しょー

Streamlitを深く学びたい人には『爆速で5つのPython Webアプリを開発』の講座がおすすめです！

＼5つのアプリをStreamlitで作成できるようになる！／

StreamlitをUdemyで学ぶ！

2. Streamlitのサイドバーでできること

作成方法について解説した所で、「Streamlitのサイドバーでできること」に焦点を当てて解説していきます。

サイドバーが使える場面は、以下の2つです。

• ページの表示を切り替えたい時
• ウィジェットを用いてグラフを動かしたい時

サイドバーを用いる理由は、画面をスクロールしても操作できるためです。

それぞれ解説していきます。

ページの表示を切り替えたい時

Streamlitのサイドバーを用いることで、ページの表示を切り替える機能を実装できます。

サイドバーにセレクトボックスなどを実装し、その値を場合分けで分けることでページを切り替えられるのです。

Streamlitのセレクトボックスについて詳しく知りたい方は、『【完全網羅】Streamlitでセレクトボックスを作成する方法』の記事をご参照ください。

例えば、セレクトボックスを使用してユーザーが表示するページを選択できるようにするコードが以下になります。

import streamlit as st
import plotly.express as px

# サイドバーにページ選択のセレクトボックスを作成
page = st.sidebar.selectbox('ページを選択してください', ['ホーム', 'データ分析', 'お問い合わせ'])

# 選択されたページに応じてコンテンツを表示
if page == 'ホーム':
    st.title('ホームページ')
elif page == 'データ分析':
    st.title('データ分析の結果を表示')
    # データの作成
    df = px.data.iris()
    # Plotlyでグラフを作成
    fig = px.scatter(df, x='sepal_width', y='sepal_length', color='species')
    # Streamlitで表示
    st.plotly_chart(fig)
else:
    st.title('お問い合わせはこちら')

上記のコードは、以下の3つのページを行き来できるような仕様です。

• ホームページ
• データ分析ページ
• お問い合わせページ

また、実際にデータ分析ページでは、Plotlyというライブラリを用いてグラフを表示できるようにしています。

Streamlitでグラフを作成する方法について詳しく知りたい方は、『Streamlitでグラフを作成する方法｜ライブラリとの併用も紹介』の記事をご参照ください。

コードを実行すると、以下の様に複数ページを実装できます。

左側のセレクトボックスをクリックし、ページを選択することで、ページ切り替えを実装しています。

このように、サイドバーを用いることで、複数ページを実装できるため、ページで表示を変えたいと考えている方はぜひ参考にしてみてください。

ウィジェットを用いてグラフを動かしたい時

Streamlitのサイドバーは、ウィジェットを使用してグラフを動的に変更するのにも利用できます。

例えば、スライダーや入力ボックスを用いて、表示されるグラフのパラメータを調整可能です。

以下のサンプルコードでは、サイドバーに配置されたスライダーを使用して、表示される折れ線グラフの周期を変更しています。

import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

# サイドバーに周期を調整するスライダーを作成
frequency = st.sidebar.slider('グラフの周期を選択してください', 1, 10, 2)

# グラフのデータを生成
x = np.linspace(0, 10, 100)
y = np.sin(frequency * x)

# グラフを描画
plt.plot(x, y)
plt.title('graph')
st.pyplot(plt)

上記のコードを実行すると、以下のような表示になり、動的にグラフを変化させられます。

このように、グラフを動的に変化させられるため、ダッシュボードの作成などにもサイドバーが有効です。

まとめ

この記事では、Streamlitを使用してサイドバーを作成し、その機能を最大限に活用する方法まで詳しく解説しました。

サイドバーはダッシュボードの作成やアプリの開発には必須であり、応用まで詳しく知っておくと良いでしょう。

サイドバーの基本的な作成方法とサンプルコードを通じて、基本的なウィジェットの作成方法を学びました。

サイドバーの利用場面は主に2つです。

• ページの表示を切り替えたい時
• ウィジェットを用いてグラフを動かしたい時

サイドバーでは様々なウィジェット（選択ボックス、スライダーなど）を追加することができ、アプリの操作をユーザーが直感的に行えます。

サイドバーなどの機能を簡単に追加できるシンプルさと拡張性から、Streamlitは多くの分野で広く利用されています。

しかし、簡単であるが故に機能として制限されていることも多いです。

しょー

StreamlitだけでWebアプリを開発するのに限界を感じていませんか？

HTMLやCSSを書かなくていいのがStreamlitの利点ですが、Streamlitだけだとアプリ開発は難しいですよね。

そんなあなたにおすすめしたいUdemyの講座が「FastAPIによるWeb API開発講座」です。

• フロントエンド：Streamlit
• バックエンド：FastAPI
• データベース：SQLAlchemy

以上のフレームワークを用いて予約アプリを作れるようになります。

しょー

Webアプリを一切開発をしたことがない僕でも簡単に理解できました！

Streamlitに限界を感じている人は、ぜひ受講してStreamlitマスターになりましょう。