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


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

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

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

## 1. Streamlitとは？

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

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

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

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

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

## 2. 環境構築

### 2.1 Pythonとpipのインストール

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

```bash
python --version
```

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

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

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

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

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

# Mac/Linux
source myenv/bin/activate
```

### 2.3 Streamlitのインストール

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

```bash
pip install streamlit
```

これだけで準備は完了！  


## 3. 基本的な使い方

### 3.1 Hello Worldしてみよう

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

```python
import streamlit as st

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

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

```bash
streamlit run hello.py
```

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

![CleanShot 2024-12-21 at 21.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260540/38ac1eb2-3700-6ec1-bbb1-87b572018698.png)


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

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

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

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

```python
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の表示

```python
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 グラフの表示

```python
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にはサイドバーという機能があります。サイドバーにボタンやテキスト入力を配置することで、メイン画面がスッキリします。

```python
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](https://streamlit.io/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の世界を楽しんでみてください！

---  

## 参考リンク
- [Streamlit公式ドキュメント](https://docs.streamlit.io/)  
- [Streamlit Community Cloud](https://streamlit.io/cloud)  

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