【基本編】Streamlitを使ってPythonだけでフロントエンド開発する！

このような悩みにお答えします。

普段バックエンドばかり書いていると HTML や CSS を書くのって結構面倒です。また、JavaScript フレームワークはバージョンアップが激しくて、メンテナンスコストもかかる。

そんな時に便利なのが Streamlit です。

Streamlit なら、HTML / CSS を書かずに Python だけでフロント開発ができちゃいます。

「Python を覚えたけど、フロントエンドは書いたことがない…」「HTML を書くのが面倒！」という方には大満足のフレームワークだと思います。

本記事では以下の内容を解説します。

基礎から実践まで網羅的に解説していきます。

ぜひ本記事を参考にチャレンジしてみてください。

» 公式ページ：Streamlit – A faster way to build and share data apps

Streamlit の特徴

ざっくりと、以下のような特徴があります。

お急ぎの場合には飛ばしても構いませんが、これらを知っておくと開発がスムーズです。

ぜひ、この段階で理解しておきましょう。

シングルページアプリケーション

Streamlit はシングルページアプリケーションと呼ばれる方式をとっています。

簡単にいうと、「URL は同じものを使い回して、内容だけを差し替えて表示させる」というスタイルです。

普通にコードを組んでいくと一つのページしか表示できないので、複数ページを実装するにはif文で条件分岐させてページを出し入れする形になります。

ステートレス

基本的に Streamlit は状態を保持しません。

つまり、ユーザーが何らかの操作をするたびにスクリプト全体が実行されるので、変数やデータの状態が保持されないことがあります。

これに対応するため、st.session_stateを使って、状態を管理することもできます。

とはいえ、状態を保持する際にはセキュリティを考慮して設計を行いましょう。

パフォーマンスの問題

重いデータ処理や計算を行うアプリでは、パフォーマンスが落ちがちです。

これに対応するため、キャッシュ機能を活用して不要な再計算を避けることが重要。

また、Streamlit はローカルやサーバーのリソースを多く消費します。

上記の場合にはリソースの使用状況を把握して、管理することが重要です。

Streamlit のセットアップ方法

以下の手順で Streamlit を使うための準備を行います。

順番に解説します。

Python 環境の準備

僕の場合は、以下の手順で Python 環境を準備します。

それぞれのセットアップ方法は別記事で解説しましたので、各記事をご覧ください。

まず、以下の記事を参考に pyenv をセットアップします。

» 参考：pyenv の初期設定と使い方

続いて次の記事で Poetry を使った仮想環境構築を行います。

» 参考：Poetry の使い方から仮想環境の削除まで

上記の流れは僕の個人的な趣味も含んでいるので、Conda などの他のパッケージ管理ツールや仮想環境を使っていただいても構いません。

# 仮想環境を作成
python -m venv venv

# 仮想環境に入る（Linux または MacOS）
source venv/bin/activate

# 仮想環境に入る（Windows）
venv\Scripts\activate

アプリケーションの作成

まずは Streamlit をプロジェクトにインストール。

# pip を使う場合のコマンド
pip install streamlit

# poetry を使う場合のコマンド
poetry add streamlit

app.py という名前で Python スクリプトを作成します。

touch app.py

続いて、簡単なコードを書いてみましょう。

import streamlit as st

st.title("My First Streamlit App")
st.write("Welcome to my first Streamlit application!")

ページのタイトルと、本文だけを定義しました。

アプリケーションの実行

以下のコマンドで Streamlit アプリを起動します。

streamlit run app.py

自動的にブラウザが起動して、以下のような画面が表示されるはずです。

先ほどコードを作ったタイトルと本文が表示されていれば完璧です。

http://localhost:8501でアクセスできます。

Streamlit アプリのカスタマイズ

Streamlit では様々なカスタマイズが可能ですが、ここではいくつかの実装方法を解説します。

順番に見ていきましょう。

サイドバーを作成

st.sidebarを使うと、簡単にサイドバーが実装できます。

import streamlit as st

# サイドバーの設定
option = st.sidebar.selectbox(
    "どのページを表示しますか？", ("ホーム", "プロフィール", "連絡先")
)

# メインページの内容
if option == "ホーム":
    st.title("ホームページ")
    st.write("ここはホームページです。サイトの概要などを表示します。")

elif option == "プロフィール":
    st.title("プロフィールページ")
    st.write("ここはプロフィールページです。あなたの経歴やスキルを紹介します。")

elif option == "連絡先":
    st.title("連絡先ページ")
    st.write("ここは連絡先ページです。お問い合わせ情報を表示します。")

上記では「セレクトボックス」を使ってみました。

ユーザーが選んだメニューに応じて、メインとなる画面に描画される内容が変わる仕組みです。

テキスト入力ボックス

text_input()を使うことで、ユーザーからの入力を受け付けられます。

# ユーザーからの入力を受け付けるテキストボックス
user_input = st.text_input(label="your name", placeholder="type here...")
# 入力値を表示する
st.write(f"Hello, {user_input}")

戻り値をuser_inputとして受け取って、st.writeとして出力することで入力値が画面に反映されます。

チェックボックス

st.checkbox()でチェックボックスを作成できます。

age = 20
if st.checkbox("Show age"):
    st.write("Your age is ", age)

上記の例では、チェックボックスがオンになった場合のみ「Your age is 20」と表示されます。

画像アップロード機能

以下は「プロフィール画像のアップロードフォーム」例です。

import streamlit as st
from PIL import Image

file_type = ["png", "jpg", "jpeg"]

# フォームを作成
with st.form("profile_form"):
    st.write("### プロフィール画像の設定")
    # ファイルアップローダー
    uploaded_file = st.file_uploader("画像を選択してください", type=file_type)

    # フォーム送信ボタン
    submitted = st.form_submit_button("プロフィールを更新")
    if submitted:
        if uploaded_file:
            # 画像ファイルを読み込んで表示
            image = Image.open(uploaded_file)
            st.image(image, use_column_width=True)
        st.success("プロフィールが更新されました！")

# 初期画面でプロフィール情報を表示
if not submitted:
    if "profile_image" in st.session_state:
        st.image(st.session_state["profile_image"], use_column_width=True)

画像アップロードにはst.file_uploaderを使います。

タブを作成

st.tabs()を使うことで、簡単にタブ画面が実装できます。

import streamlit as st

tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])

with tab1:
    st.header("A cat")
    st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

with tab2:
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

with tab3:
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

上記ではwithとしてタブごとの振る舞いを定義していますが、各タブオブジェクトに対して直接値を設定していくこともできます。

import numpy as np
import streamlit as st

tab1, tab2 = st.tabs(["📈 Chart", "🗃 Data"])
data = np.random.randn(10, 1)

tab1.subheader("A tab with a chart")
tab1.line_chart(data)

tab2.subheader("A tab with the data")
tab2.write(data)

まとめ：フロントエンドの知識なしで実装できるのは便利！

普段フロントエンドに馴染みがない身からすると、Streamlit は本当に便利です。

確かに、細かいカスタマイズができないもどかしさのようなものはあります。

でも、それを差し引いても HTML なしで Python だけでフロントが書けるというのはものすごいメリットです！

ぜひ、一度お試しください。

本ブログでは他にも Python に関する記事を多数寄稿しています。ぜひ、他記事もあわせてご覧になってみてください。

» 参考：CFXLOG – Python に関する記事一覧