LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Oka1551(Oka1551)

Streamlitで始めるPythonウェブアプリ開発入門

Posted at

こんにちは。この記事では、Pythonだけで簡単にウェブアプリが作れるフレームワーク「Streamlit」を使ったアプリ開発の手順を、できるだけ分かりやすく解説します。

「ウェブアプリを作ってみたいけれど、フロントエンドやサーバの知識があまりない…」
「データ可視化ツールとして使ってみたい！」
「機械学習のモデルを簡単に共有したい！」

そんな方におすすめしたいのが、Streamlit です！

1. Streamlitとは？

Streamlit は、データサイエンスや機械学習のアプリケーションを超シンプルに構築できるPythonライブラリです。大きな特徴としては以下の通りです。

  • PythonのコードだけでUIを構築できる
    従来、ウェブアプリを作るためには、フロントエンド（HTML/CSS/JavaScript）の知識が必要です。しかしStreamlitなら、Pythonのコードだけ書けばOK。

  • リアルタイムにアプリを更新
    コードを保存すると自動的にアプリがリロードされるので、作業効率が非常に高いです。

  • 豊富なウィジェット
    テキスト入力やボタン、スライダー、ファイルアップロードなど、様々なUI部品が簡単な関数で利用可能。

  • データ可視化が簡単
    matplotlibやplotlyなどの図をそのまま表示できます。データフレーム（Pandas）もテーブル形式で簡単に表示できます。

2. 環境構築

2.1 Pythonとpipのインストール

Pythonがインストールされていない方は、公式サイトなどからPythonをインストールしてください。
Windowsユーザの方はインストーラーから「Add Python to PATH」にチェックを入れておくと便利です。
MacやLinuxでは、ターミナル上でバージョンを確認してみてください。

python --version

Pythonのバージョンが3.7以上なら問題ありません。（StreamlitはPython 3.7以上で利用できます。）

2.2 仮想環境の作成（推奨）

複数のプロジェクトを扱う場合は、Python仮想環境を作成しておくとバージョン管理が容易です。
例：venvを使った仮想環境の作成と有効化

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

# 仮想環境を有効化
# Windows
myenv\Scripts\activate

# Mac/Linux
source myenv/bin/activate

2.3 Streamlitのインストール

仮想環境を有効にした状態で、pip installコマンドを使ってStreamlitをインストールします。

pip install streamlit

これだけで準備は完了！

3. 基本的な使い方

3.1 Hello Worldしてみよう

まずはhello.pyという名前のファイルを作成して、以下のコードを書いてみましょう。

import streamlit as st

st.title("Hello Streamlit!")
st.write("初めてのStreamlitアプリです！")

このファイルを保存したら、ターミナル（またはコマンドプロンプト）で次のコマンドを実行します。

streamlit run hello.py

すると、ブラウザが自動的に開き、http://localhost:8501 にアクセスできるようになります。これがStreamlitアプリのローカルサーバです。

CleanShot 2024-12-21 at 21.37.12.png

  • 画面には「Hello Streamlit!」という大きなタイトルと「初めてのStreamlitアプリです！」というテキストが表示されるはずです。

ここまでで「ウェブアプリをPythonだけで動かす」ということが体感できると思います。

3.2 さまざまなUI部品（ウィジェット）

Streamlitでは、UI部品を関数1つで扱うことができます。
例えば、以下のような例を試してみましょう。

import streamlit as st

st.title("Streamlitウィジェットのサンプル")

# テキスト入力
name = st.text_input("名前を入力してください", "太郎")

# スライダー
age = st.slider("年齢を選択してください", 0, 100, 20)

# チェックボックス
is_student = st.checkbox("学生ですか？")

# ボタン
if st.button("送信"):
    st.write(f"こんにちは、{name}さん！")
    st.write(f"あなたは {age} 歳です。")
    if is_student:
        st.write("学生さんなんですね！")
    else:
        st.write("学生ではないのですね。")

ここでは、入力したデータを元にリアルタイムに画面上で表示を更新できます。

  • st.text_input：ユーザに文字列を入力してもらう
  • st.slider：数値をスライダー形式で入力してもらう
  • st.checkbox：チェックボックス
  • st.button：ボタン

こういったインタラクティブなUI部品が非常に簡単に使えます。

3.3 データの表示・可視化

Streamlitの大きな強みの一つが、データ可視化です。PandasのDataFrameやmatplotlib、Plotlyといったライブラリを簡単に表示できます。

3.3.1 PandasのDataFrameの表示

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

st.title("データフレームの表示")

df = pd.DataFrame(
    np.random.rand(20, 3),
    columns=['Column A', 'Column B', 'Column C']
)

st.write("▼DataFrameの表示例")
st.dataframe(df)  # データフレーム表示

これだけで、ブラウザ上にスクロール可能なDataFrameが表示されます。

3.3.2 グラフの表示

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

st.title("matplotlibのグラフ描画")

# 乱数データを用意
x = np.linspace(0, 10, 100)
y = np.sin(x)

# matplotlibでグラフを描画
fig, ax = plt.subplots()
ax.plot(x, y)
ax.set_title("Sine Wave")

# Streamlitで表示
st.pyplot(fig)

このように、matplotlibのFigureオブジェクトをst.pyplotで渡すだけで、ブラウザ上にグラフが描画されます。

4. アプリの構成方法

4.1 サイドバーを使ったメニュー

Streamlitにはサイドバーという機能があります。サイドバーにボタンやテキスト入力を配置することで、メイン画面がスッキリします。

import streamlit as st

st.title("サイドバーの使い方")

# サイドバーにウィジェットを配置
with st.sidebar:
    st.header("サイドバー")
    user_input = st.text_input("何か入力してください")
    if st.button("サイドバーボタン"):
        st.write(f"サイドバーで入力された文字: {user_input}")

# メイン画面
st.write("メイン画面のコンテンツ")

4.2 マルチページの構成

大規模アプリの場合、1つのファイルにすべて詰め込むと可読性が落ちてしまいます。Streamlit では、各ページをファイル単位で分割し、pages/フォルダに配置すると、自動的にマルチページ対応が可能です。
フォルダ構成例：

my_streamlit_app/
├─ pages/
│   ├─ page1.py
│   └─ page2.py
├─ main.py
└─ ...

pages フォルダに page1.py などのファイルを置き、それぞれにStreamlitのコードを書くだけで、アプリを実行するとサイドバーにページのメニューが自動的に生成されます。

5. デプロイ方法

Streamlitアプリは、ローカルだけでなく、「Streamlit Community Cloud」 (旧称 Streamlit Sharing) や Heroku、AWS などに簡単にデプロイできます。ここでは無料で使える「Streamlit Community Cloud」でのデプロイ手順を紹介します。

5.1 GitHubとの連携

  1. GitHubリポジトリを作成し、そこにStreamlitアプリのコードをプッシュしておきます。
  2. Streamlit Community Cloud にアクセスし、GitHubアカウントでログイン。
  3. 「New app」などのボタンをクリックし、デプロイ先のリポジトリを選択。
  4. main.py (またはアプリを起動するPythonファイル) を指定して「Deploy」。

これで数十秒から1分ほど待つと、Web上に動くStreamlitアプリのURLが発行され、誰でもアクセスできる状態になります。
完全無料枠が用意されているため、まずは個人プロジェクトの公開にぴったりです。

6. まとめ

  • 簡単な構文でウェブアプリが作れる
    HTML・CSSの知識なしで、PythonのコードだけでUIが構築できます。
  • 豊富なウィジェット
    ボタンやスライダー、テキスト入力などが関数1つで呼び出せます。
  • データサイエンス・機械学習との相性抜群
    Pandasやmatplotlibなどをシームレスに扱え、データの可視化やモデルのデモが簡単。
  • デプロイが手軽
    Streamlit Community Cloudを使えば、リポジトリを選ぶだけであっという間に公開できます。

機械学習のモデルをチームに共有したり、データの可視化ダッシュボードをさっと作ったりするときには、Streamlitはとても便利です。Pythonを学んだばかりの方でも簡単にチャレンジできますので、ぜひ本記事を参考にしてStreamlitの世界を楽しんでみてください！

参考リンク

もしこの記事がお役に立った場合は、「LGTM」やストックをしていただけると嬉しいです！ご質問やご感想がありましたら、ぜひコメントで教えてください。
最後までお読みいただき、ありがとうございました！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?