Streamlitとは何ぞや??!!Part2

本記事に関して

対象読者：Streamlitって何ぞやと感じている人に向けて

概要

Streamlitを触る機会があったので、このタイミングで基礎的な知識や実装方法に関して簡単にまとめてみることにしました！

本記事ではStreamlitの実装方法 を記載しております。
全2部構成で本記事はPart2に該当し、Streamlit 公式docsを基に実装方法を記載していきます！
前回記事のPart1は以下のリンクよりご参照ください。
https://zenn.dev/headwaters/articles/893d8604f35198

内容

Streamlit内の技術をもとに簡単なWebアプリを作成してみます！

実行環境

• Windows11
• Python 3.11.3
• VScode（ターミナル使用）

1.以下のコマンドを使用し、仮想環境構築、起動、streamlitのインストールを行います

# 仮想環境構築コマンド
python -m venv myenv　# 環境名は任意名で指定します
# 仮想環境起動
.\myenv\Scripts\activate
# streamlitをpipでインストール
pip install streamlit

2.以下の内容を含んだpyファイル(streamlit.py)を作成

streamlit.py

import streamlit as st
st.title("Hello, world!")
st.write("Streamlitを触ってみましょう！！")

3.pyファイル(streamlit.py)の実行
以下のコマンドを実行し、streamlit.pyファイルに記載した内容をブラウザ上に表示してみましょう！

streamlit run streamlit.py

以下にアクセスするとStreamlitアプリが起動します

http://localhost:8501

画像のようにファイル内に記載した内容がブラウザで確認できれば起動成功です！

機能を追加してみよう！

1.pyファイル(streamlit.py)に機能追加をしてみよう！
streamlit.pyファイルに機能内容を追記し、ブラウザ上に表示してみましょう！

streamlit.py

# 追加機能
st.button("Button") # ボタンを表示
st.selectbox("selectbox", ("選択肢1", "選択肢2")) # セレクトボックスを表示
st.multiselect("multiselectbox", ("選択肢1", "選択肢2")) # セレクトボックス(複数選択可能)
st.radio("RadioButton", ("ラジオ1", "ラジオ2")) # ラジオボタン 
st.text_input("Text Input") # 文字入力(1行のみの入力)
st.text_area("text MultipleLines") # 文字入力(複数行入力可能)
st.slider("Slider", 0, 100, 50) # スライダー
st.file_uploader("Choose file") # ファイルアップロード

# サイドバー表示
st.sidebar.text_input("Text Input", key="sidebar_text_input_1")
st.sidebar.text_area("Text MultipleLines", key="sidebar_Text_MultipleLines_1")
st.sidebar.file_uploader("Choose Files", key="sidebar_Choose_Files_1")

• 複数ボタン、入力フォーム(単一行、複数行)、添付ファイル等の機能を容易に実装可能！
• サイドバー側にも同一の機能を追加可能。サイドバーの表示・非表示もデフォルト機能として保有！

グラフを表示してみよう！

グラフ表示にも長けているStreamlitですので、ぜひグラフ表示も行ってみましょう！
1.グラフ表示用のPythonファイル(graph.py)を作成し、以下のコードを記載してみてください！

graph.py

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

# アプリのタイトル
st.title("データ可視化サンプル")

# サンプルデータの作成  
# グラフのサンプルコードはChatGPTによる自動生成を利用しています。

np.random.seed(42)  

# 1. 折れ線グラフ
st.subheader("1. 折れ線グラフ")
line_data = pd.DataFrame({
    '売上': np.random.randint(100, 1000, 30),
    '費用': np.random.randint(50, 500, 30)
}, index=pd.date_range('2024-01-01', periods=30))
st.line_chart(line_data)

# 2. 棒グラフ
st.subheader("2. 棒グラフ")
bar_data = pd.DataFrame({
    '部門': ['営業部', '開発部', '管理部', '人事部', '経理部'],
    '予算': np.random.randint(1000, 5000, 5),
    '実績': np.random.randint(1000, 5000, 5)
})
st.bar_chart(bar_data.set_index('部門'))

以下のコマンドを実行し、streamlit.pyファイルに記載した内容をブラウザ上に表示してみましょう！

streamlit run graph.py

• 比較的見やすいグラフが作成された印象ですねー！

まとめ

個人的には、Streamlitを使用する利点を以下の点でまとめさせていただきます。

• 1:Python知識のみでwebページを作成可能
• 2:様々なデータを様々な種別の可視化(グラフ化等)に対応するwebページを実装可能

深いフロントエンドの知識がなくても、UI機能を持った画面を短期間で作成できる点が個人的には素敵なポイントです！
また、ファイルデータのアップロードやデータ結果を表や様々な種別のグラフで表示可能なので、ケースバイケースで使い分けることができれば強い武器になるかと思います！
カスタマイズの範囲はまだまだ、そこまでかなという印象ですが、今後のアップロードに期待しましょう！

初学者の方々の学びの一助になれば幸いです！

※11/12追記※
Streamlitに最新ver 1.40.0がリリースされました！
以下のリンクより更新情報を確認できます。
本記事では、更新された最新情報には言及しておりませんので、ご容赦くださいませ。
https://docs.streamlit.io/develop/quick-reference/release-notes

参考文献

https://docs.streamlit.io/get-started/fundamentals