Streamlitのコンポーネントとマルチページ機能

お疲れ様です。

今日は「Streamlitのコンポーネントとマルチページ機能」について部分いたします。

# 基本的なコンポーネント

StreamlitでWebアプリを作成する際に使用するコンポーネントを紹介します。
詳細が知りたい場合は[API reference](https://docs.streamlit.io/library/api-reference)を参照してください。

## テキスト表示

文字を表示する際に使用するコンポーネントです。

```python
import streamlit as st

st.title("title") # タイトル
st.header("header") # ヘッダー
st.write("write") # 表示
st.markdown("# markdown") # マークダウンで表示
st.text("text") # テキスト表示
```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.07.36 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/bc4976fa-f496-c5c7-db18-52fbf556c16d.png)

## ウィジェット

Steramlitではさまざまなウィジェットが簡単に作成できます。

```
import streamlit as st

st.button("button") # ボタン
st.selectbox("selectbox", ("select1", "select2")) # セレクトボックス
st.multiselect("multiselectbox", ("select1", "select2")) # 複数選択可能なセレクトボックス
st.radio("radiobutton", ("radio1", "radio2")) # ラジオボタン
st.text_input("text input") # 文字入力(1行)
st.text_area("text area") # 文字入力(複数行)
st.slider("slider", 0, 100, 50) # スライダー
st.file_uploader("Choose file") # ファイルアップロード
```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.07.53 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/31d1763f-5532-52bf-7d27-73503e15e0a9.png)

各ウィジェットにその他引数を渡すことでカスタマイズが可能です。
さらにウィジェットの戻り値を変数に入れることで表示制御も簡単にできます。

```python
import streamlit as st

check = st.checkbox("check button") # チェックボタン

if check:
  st.button("button")
  st.selectbox("selectbox", ("select1", "select2"))
  st.multiselect("multiselectbox", ("select1", "select2"))
  st.radio("radiobutton", ("radio1", "radio2"))
  st.text_input("text input")
  st.text_area("text area")
  st.slider("slider", 0, 100, 50)
  st.file_uploader("Choose file")

```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.08.51 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/65d120cf-9b85-95f2-940c-75288ce88383.png)

チェックボックスをクリックすると他のウィジェットが表示されます。

![Screenshot 2024-03-22 at 12.09.10 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/744d0811-dd2b-7ef9-5ff2-bedd690e8cfe.png)

## サイドバー

Streamlitではサイドバーを表示できます。

```python
import streamlit as st

st.button("button")
st.selectbox("selectbox", ("select1", "select2"))
st.multiselect("multiselectbox", ("select1", "select2"))
st.radio("radiobutton", ("radio1", "radio2"))
# 以下をサイドバーに表示
st.sidebar.text_input("text input")
st.sidebar.text_area("text area")
st.sidebar.slider("slider", 0, 100, 50)
st.sidebar.file_uploader("Choose file")

```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.09.51 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/ee9ddca2-23f0-b9cc-b3ee-639eacf283a7.png)

## 表

表を表示するためのコンポーネントです。
`st.dataframe`は、列をクリックすると並び替えができるようなインタラクティブな表を作成できます。
`st.table`は静的な表を作成できます。
`st.metric`は指標を表示できます。

```python
import streamlit as st
import pandas as pd
import numpy as np

dataframe = pd.DataFrame(np.random.randn(5,20))
st.dataframe(dataframe) # pandasのデータフレーム
st.table(dataframe) # 静的な表
st.metric(label="Temperature", value="70 °F", delta="1.2 °F") # 指標

```
実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.10.45 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/63a60f85-a779-e28c-56af-09cb43714f1f.png)

## グラフ

グラフを表示するためのコンポーネントです。
拡大・縮小、マウスオーバーでグラフ上の値の表示などインタラクティブなグラフを作成できます。

```python
import streamlit as st
import pandas as pd
import numpy as np

dataframe = pd.DataFrame(np.random.randn(20,3), columns=["a", "b", "c"])
st.line_chart(dataframe) # 線グラフ
st.area_chart(dataframe) # チャート
st.bar_chart(dataframe) # 棒グラフ

```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.11.34 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/31fec74b-9b9f-9eca-d86e-9b64b10e85e7.png)

## マップ

マップを表示するためのコンポーネントです。

```python
import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])
st.map(df)

```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.12.12 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/f5282a3b-3e7d-aa3e-f697-1d4adf3d39ce.png)

# マルチページ

マルチページ機能とは、複数のページを用意できる機能です。
Streamlitは通常1ページの構成であり、そのページ上ですべての動作が完結します。
今までは機能ごとにページを分けたい場合、サイドバーに`st.selectbox`や`st.radio`を配置、if文で分岐するなど工夫してマルチページを実現していました。
しかし、Ver1.10.0からStreamlitにマルチページ機能が実装され、手軽に実現できるようになったので紹介します。

## 基本的な使い方

1. 任意のフォルダを作成（ここではapp）
2. 1で作成したフォルダに任意のPythonファイルを作成（ここではapp.py）
3. 1で作成したフォルダにpagesというフォルダを作成します
    必ずpagesという名前で作成すること
4. pagesフォルダにPythonファイルを作成する

上記の手順で作成すると以下のようなフォルダ構成になります。

```
app
 ├ app.py
 ├ pages
    ├ page2.py
    ├ page3.py
```    

各ファイルの中身は以下のようにします。
```python
# app.py
import streamlit as st

st.title("app")
```

```python
# page2.py
import streamlit as st

st.title("page2")
```

```python
# page3.py
import streamlit as st

st.title("page3")
```

実行結果は以下のようになります。

![Screenshot 2024-03-22 at 12.14.57 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/2c15b8ab-26f7-fba8-5b81-bf74c8bfc84a.png)

pagesフォルダに配置されたファイルが自動でサイドバーに追加されます。
サイドバーにあるページをクリックするとページ遷移できます。

## ページの順番

pagesフォルダ内のファイルに関しては、サイドバーに表示される順番を変更できます。
ファイル名に、01_、02_のように表示したい順番に接頭語を付けることでページの順番を操作できます。
接頭語はサイドバー上で省略されて表示されます。

```
app
 ├ app.py
 ├ pages
    ├ 02_page2.py
    ├ 01_page3.py
```
実行結果は以下のようになります

![Screenshot 2024-03-22 at 12.16.00 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/0f1a54fd-4a13-b208-db6a-613f7da4feb0.png)

# まとめ
Streamlitのコンポーネントの使い方やマルチページ機能について記載しました。
Streamlitは他のフレームワークと違い、直感的なコードを書くだけでWebアプリを開発できます。フロントエンドの知識がなくても、デザイン性のある画面を自動で表示してくれるのも魅力的です。
また、データのアップロードやデータの解析、結果を表やグラフで表示など、データサイエンス分野でよく行われる処理を、Webアプリとして簡単に多数の人に共有できるのも便利です。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。