Python + VS Code + Streamlitで複数ページアプリを作ろう！入門からページ間連携まで完全ガイド

# **user**:

初学者向けにVSCodeを使ってStreamlitアプリを作るガイドを書いてください。

# **assistant**:

以下は**初学者向けのVSCodeを使ったStreamlitアプリ作成ガイド**です。Pythonの基礎が少しわかる、またはVSCodeでコードを書くことに慣れてきた人向けに構成しています。

---

# 🎯 初心者向け VSCode で Streamlit アプリを作るガイド

## ✅ 目標
VSCodeを使って、簡単なStreamlitアプリを作り、ローカルで実行できるようになること。

---

## 1️⃣ 事前準備

### 💻 必要なもの
- **Python**（バージョン3.8以上）
- **VSCode**（Visual Studio Code）
- **ターミナル**（VSCode内蔵のものでOK）

### 📦 インストールしておくもの

#### 1. Python
[公式サイト](https://www.python.org/)からインストール。  
Macならターミナルで `python3 --version` で確認。

#### 2. VSCode 拡張機能
以下をインストール：
- Python 拡張機能（Microsoft公式）
- Jupyter（必要なら）

---

## 2️⃣ プロジェクトを作成

### 📁 フォルダを作成
好きな場所に `streamlit-app` という名前のフォルダを作成。

### 📂 VSCodeでフォルダを開く
VSCodeの「ファイル」>「フォルダーを開く」から `streamlit-app` を開きます。

---

## 3️⃣ Streamlitのインストール

### 🐍 仮想環境（初心者はスキップしてもOK）

ターミナルで以下のコマンドを入力：

```bash
python -m venv venv
source venv/bin/activate  # Windowsなら venv\Scripts\activate
```

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

ターミナルで以下を実行：

```bash
pip install streamlit
```

---

## 4️⃣ 最初のアプリを書く

### 📝 ファイルを作成
`app.py` という名前で新しいファイルを作ります。

### ✍️ コードを書く

```python
import streamlit as st

st.title("こんにちは、Streamlit!")
st.write("これは最初のStreamlitアプリです。")
name = st.text_input("あなたの名前は？")
if name:
    st.write(f"{name}さん、ようこそ！")
```

---

## 5️⃣ アプリを実行する

### ▶️ ターミナルで以下を実行

```bash
streamlit run app.py
```

### 🌐 ブラウザで開かれるページに注目！

アプリが自動的にブラウザで表示されます。ターミナルに書いてあるURL（例: http://localhost:8501）をクリックしてもOK。

---

## 6️⃣ アプリを修正してみよう（練習）

### 🔄 コードを追加

```python
st.write("以下のボタンを押してみてください。")
if st.button("押す"):
    st.success("ボタンが押されました！")
```

### 💡 ヒント
Streamlitはファイルを保存すると自動で再読み込みされます。

---

## 7️⃣ よくあるエラーと対処法

| エラー内容                         | 対処法                                     |
|----------------------------------|------------------------------------------|
| `ModuleNotFoundError: No module named 'streamlit'` | `pip install streamlit` を実行         |
| アプリが表示されない               | URLをコピーしてブラウザで開く             |
| `streamlit: command not found`    | Python環境が有効か確認 / `python -m streamlit run app.py` で実行 |

---

## 🧪 演習問題（任意）

1. テキスト入力を受け取って、挨拶するアプリを作る
2. 数値をスライダーで受け取って、その2乗を表示する
3. `st.selectbox()` を使って、好きな果物を選ばせる

---

## 🏁 まとめ

- VSCodeとStreamlitを使えば、簡単にWebアプリを作れる
- `streamlit run app.py` で即時実行できる
- コード変更はすぐブラウザに反映

---

「もっと複雑なアプリを作ってみたい！」という場合は、次のステップとして以下がおすすめ：

- `st.sidebar` を使ってサイドバーを追加
- `pandas` でデータを読み込んで表示
- matplotlibやPlotlyでグラフ表示

---

必要であればこのガイドをPDFやMarkdownで出力することもできますよ。続きも作っていきましょうか？

# **user**:

ありがとうございます。想定通り動きました。VS Code 上で Jupyter を動かすにはどうしますか？

# **assistant**:

よかったです！🎉  
では次に、**VS Code 上で Jupyter Notebook を動かす方法**をわかりやすくステップ形式で説明しますね。

---

# 🧪 VS Code で Jupyter Notebook を使う方法

---

## ✅ 必要なもの

- **Python**（インストール済み）
- **VS Code**
- **Jupyter 拡張機能**

---

## 1️⃣ Jupyter 拡張機能をインストール

### 🧩 拡張機能の追加方法
1. VS Code 左の「拡張機能（四角いアイコン）」をクリック
2. 検索バーに `Jupyter` と入力
3. `Jupyter`（Microsoft製）を選んで「インストール」をクリック

> 💡 `Python` 拡張機能も自動で一緒に入ることが多いですが、入っていなければこちらもインストールしてください。

---

## 2️⃣ Python環境を確認・選択

### 🐍 使用するPythonを設定
1. 画面左下または右上にある「Python: 3.x.x（バージョン）」という部分をクリック
2. 表示されるリストから正しいPython環境（例：venvやAnacondaなど）を選択

---

## 3️⃣ ノートブックを作成

### 📒 新しい .ipynb ファイルを作成
1. ファイル名 `example.ipynb` として新規作成（ファイル＞新規ファイル＞名前を付けて保存）
2. 拡張子を `.ipynb` にすると、自動でNotebookモードになります

---

## 4️⃣ セルにコードを書いて実行

```python
print("Hello Jupyter in VS Code!")
```

▶️ セルの左にある「再生ボタン（▶）」をクリックすると、セル単位で実行できます。

---

## 5️⃣ よくあるトラブルと対処法

| 現象 | 対処法 |
|------|--------|
| 実行環境が表示されない | Python拡張をインストールし、VSCodeを再起動 |
| 実行ボタンが灰色 | Python環境が選ばれていない。画面右上で選択 |
| 実行中に固まる | VSCode再起動 or ターミナルで `pip install jupyter` を実行 |

---

## 🔁 コマンドパレットを使う方法（応用）

1. `Cmd+Shift+P`（Windows/Linuxは `Ctrl+Shift+P`）
2. 「Jupyter: Create New Blank Notebook」を選択

これでサクッと新しいノートブックが作成されます！

---

## 💡 補足

VS Code上のJupyterは、本物のJupyterと同じように `pandas`、`matplotlib` などのライブラリを使えます。以下をNotebookに入力して試してみてください：

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

df = pd.DataFrame(np.random.rand(5, 3), columns=["A", "B", "C"])
df
```

---

何か追加で知りたい操作（Markdownセルやグラフ表示など）があれば教えてください。続きのTips集も作れます！

# **user**:

ありがとうございます。VSCodeでPythonを使う時に便利なTipsがあれば教えてください。

# **assistant**:

こちらこそ、いつでもどうぞ！🙌  
では、**VSCodeでPythonを使うときに便利なTips集**をお届けします。初心者〜中級者向けの内容で、実際の開発や学習に役立つものをピックアップしました。

---

# 🧠 VSCodeでPythonを書くときの便利なTips集

---

## 🛠️ 1. ⌨️ コード補完＆型チェックを強化する

### ✅ Pylanceを使おう！

- 拡張機能「**Pylance**」を入れると、補完・型ヒントが超強化されます。
- 型エラーや未使用変数なども教えてくれて便利。

🔍 拡張機能検索で `Pylance` を探してインストール！

---

## 📁 2. 仮想環境はプロジェクトごとに作る

```bash
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
```

- `venv` フォルダがあると、VSCodeが自動でそのPythonを認識してくれる。
- 複数プロジェクトの依存関係を分けられるので安心！

---

## 🧪 3. ターミナルを複数使い分けよう

- VSCode下部の「ターミナル」→「＋」ボタンでターミナルを複数開ける
- 例：
  - ターミナル1：仮想環境の起動
  - ターミナル2：`streamlit run` や `pytest` の実行

⌨️ `Ctrl + ``（バッククォート）` でターミナル表示/非表示切り替え！

---

## 🧹 4. 自動整形でコードをキレイにする

### 🧼 Black（整形） + isort（import順）

1. ターミナルでインストール：

```bash
pip install black isort
```

2. VSCode設定（settings.json）に以下を追加：

```json
"python.formatting.provider": "black",
"editor.formatOnSave": true,
"python.sortImports.args": ["--profile", "black"]
```

📦 保存時にコードが美しく整います！

---

## 🧪 5. デバッグ機能をフル活用！

- ブレークポイント（行番号クリック）
- 変数ウォッチ
- ステップ実行（F10）

🐞 左の「Run and Debug」→ Python ファイルを選ぶだけでOK！

---

## 🔍 6. Jupyter以外でもインラインで出力を見る

```python
# %% を使うと、Jupyter風にセル分割できる
# Pythonスクリプト内でインライン実行！

# %%
x = 10
print(x)

# %%
for i in range(3):
    print(i)
```

📌 `# %%` セルを右上の再生ボタンで実行できて便利！

---

## 🧪 7. VSCode上で仮想環境を選びなおす方法

1. `Ctrl + Shift + P`（Macは `Cmd + Shift + P`）
2. `Python: Select Interpreter` を検索
3. プロジェクトの `venv` を選択

---

## 🎨 8. テーマやアイコンをカスタマイズ

- テーマ変更：`Cmd/Ctrl + K` → `T`
- おすすめテーマ：
  - **One Dark Pro**
  - **Dracula**
  - **Night Owl**

- アイコン：`Material Icon Theme`（ファイルアイコンが分かりやすくなる）

---

## 💡 9. VSCodeのショートカット便利帳

| 操作                   | ショートカット                |
|------------------------|-------------------------------|
| コード整形             | `Shift + Alt + F`             |
| ファイル検索           | `Cmd/Ctrl + P`                |
| 全体検索               | `Cmd/Ctrl + Shift + F`        |
| コマンドパレット       | `Cmd/Ctrl + Shift + P`        |
| ターミナルの表示/非表示 | `Ctrl + \``（バッククォート） |

---

## 🌐 10. Git連携もVSCodeで完結！

- 左の「ソース管理」アイコン（枝のアイコン）でGit操作が可能
- `コミット → プッシュ` までワンクリック！

---

## 🧰 おまけ：初心者が入れておくと便利な拡張機能

| 名前 | 概要 |
|------|------|
| Python | コード補完、実行、デバッグなど |
| Pylance | 高速で正確な補完、型チェック |
| Jupyter | `.ipynb` ファイルを編集＆実行 |
| GitLens | Git履歴を見やすく |
| Code Runner | 選択したコードだけサクッと実行 |
| autoDocstring | 関数に自動でドキュメント追加 |

---

もし「Streamlit開発で便利なVSCode設定」とか「VSCodeの学習ロードマップ」みたいなのも興味あれば、それも作れますよ！

# **user**:

ありがとうございます。Streamlit開発で便利なVSCode設定やTipsを教えてください。

# **assistant**:

こちらこそありがとうございます！🙌  
次は **Streamlit開発に特化したVSCodeの便利な設定＆Tips集** をご紹介します。開発を効率化したり、デバッグやデザインをやりやすくする内容を詰め込みました！

---

# 🚀 Streamlit開発に便利な VSCode 設定 & Tips

---

## 🛠️ 1. 保存時に自動でアプリが再読み込みされる

### ✅ Streamlit の「ホットリロード」機能を使おう！

Streamlit は `.py` ファイルを保存すると自動でブラウザを更新してくれます。  
VSCode の設定で「保存時に自動保存」にしておくと便利！

### 設定方法：
1. `Cmd + ,`（Mac） / `Ctrl + ,`（Windows）で設定を開く
2. `auto save` で検索
3. 「ファイルを自動保存」を `afterDelay` に設定（または手動保存派なら `Cmd + S`）

---

## 🔁 2. `streamlit run` を常時ターミナルに開いておく

- ターミナルで一度 `streamlit run app.py` を実行しておけば、あとは保存するだけでブラウザが自動更新されます。
- 開発中はターミナルを閉じずに、常に開いておくとストレスフリー！

⌨️ ターミナルのショートカット： `Ctrl + \``（バッククォート）

---

## 🔍 3. `# %%` を使ってセル分け & 段階的に動かす（デバッグ用）

```python
# %%
import streamlit as st

# %%
st.write("ステップごとに試せると便利！")
```

- Streamlitでは通常 `streamlit run` を使いますが、**段階的に関数やロジックを試したいとき**は VSCode の「セル実行（# %%）」が超便利！

📌 データ読み込み、整形、関数定義などをステップ実行してデバッグできます。

---

## ✍️ 4. `st.markdown` に Markdown プレビューを併用すると便利

- Markdown形式のテキストを書きながら整形を確認したいとき：
  - VSCodeには **Markdown Preview Enhanced** などの拡張機能あり
  - Markdown部分を `.md` ファイルに切り出して、あとで `with open(...)` で読み込むのもアリ

---

## 🎨 5. カスタムCSSの反映で見た目調整

Streamlitは `st.markdown(..., unsafe_allow_html=True)` を使えば、ちょっとしたスタイル調整もできます。

```python
st.markdown(
    """
    <style>
    .big-font {
        font-size: 30px !important;
        color: teal;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.markdown('<p class="big-font">カスタムフォント！</p>', unsafe_allow_html=True)
```

VSCodeのHTML/CSS補完機能も活用してデザインしよう！

---

## 📄 6. ファイル構成のおすすめ

```plaintext
streamlit-app/
├── app.py
├── utils.py
├── data/
│   └── sample.csv
├── assets/
│   └── logo.png
├── requirements.txt
```

- `utils.py`: 関数や処理を分けて管理
- `assets/`: 画像やCSSなど
- `requirements.txt`: 使用ライブラリをまとめる

ターミナルで：

```bash
pip freeze > requirements.txt
```

で保存可能。

---

## 🧪 7. Streamlit 開発向け拡張機能

| 拡張名             | 内容                       |
|--------------------|----------------------------|
| Python             | 補完・Lint・デバッグなど    |
| Jupyter            | セル実行 & Notebook連携     |
| Pylance            | 高速補完＋型チェック        |
| Live Server        | MarkdownやHTMLのプレビュー |
| Auto Rename Tag    | タグ編集補助（HTML/CSS系） |
| Material Icon Theme| ファイル構成が視覚的に◎     |

---

## 🧪 8. 開発中のログを `st.text()` で表示する（簡易デバッグ）

```python
import datetime
st.text(f"更新時刻: {datetime.datetime.now()}")
```

- `print()` はStreamlitではターミナルに出ます
- アプリ上で見たいログは `st.text()`, `st.write()` で！

---

## 📱 9. ブラウザUIをカスタマイズしたいとき

`st.set_page_config` を使うと、ページタイトルやレイアウトが設定できます：

```python
st.set_page_config(
    page_title="マイアプリ",
    layout="wide",  # または "centered"
    initial_sidebar_state="expanded"
)
```

---

## 📦 10. `requirements.txt` を使ってチーム共有・デプロイも楽に

```bash
pip freeze > requirements.txt
```

チームで開発するときやHerokuなどでデプロイしたいときに便利！

---

## おまけ：VSCodeでStreamlitデバッグの裏技

```python
if __name__ == '__main__':
    # Streamlitの実行をスキップして、普通のPythonコードとしてデバッグできる！
    # VSCodeのデバッグ機能を使いたい時に便利
    main()
```

---

必要があれば、「HerokuやStreamlit Community Cloudへのデプロイ手順」や、「複数ページ構成でStreamlitを整理する方法」なんかもまとめられます！どうしましょうか？

# **user**:

ありがとうございます。複数ページ構成でStreamlitを整理する方法を教えてください。

# **assistant**:

こちらこそ、丁寧に聞いてくださってありがとうございます！😊  
では、**Streamlitで複数ページ構成（マルチページ）にする方法**を丁寧に解説します。これを使うと、アプリを「ページごとに整理」できて、コードもユーザー体験もスッキリします！

---

# 📚 Streamlit 複数ページ構成（マルチページアプリ）ガイド

---

## 🔰 方法①：Streamlit公式の「マルチページアプリ」構成（推奨）

### ✅ Streamlit 1.10以降で利用できる、**公式のページ機能**です。

---

## 📁 ディレクトリ構成（例）

```plaintext
streamlit_app/
├── Home.py              ← トップページ（自動で最初に読み込まれる）
├── 📂 pages/
│   ├── Page1.py         ← ページ1
│   ├── Page2.py         ← ページ2
├── utils.py             ← 共通関数など
├── requirements.txt
```

- `pages/` フォルダ内に `.py` ファイルを入れるだけで、**自動でページタブに表示されます**
- 各ページは普通の Streamlit スクリプトとして書けます！

---

### 🏠 例：`Home.py`

```python
import streamlit as st

st.title("ようこそ！マルチページ Streamlit アプリへ 🎈")

st.markdown("サイドバーからページを選んでください！")
```

---

### 📄 例：`pages/Page1.py`

```python
import streamlit as st

st.title("📊 ページ1：データ表示")

st.write("ここにデータ表示やグラフを入れます")
```

---

### 📄 例：`pages/Page2.py`

```python
import streamlit as st

st.title("⚙️ ページ2：設定")

st.write("設定やフォームをここに置けます")
```

---

## ▶️ 実行コマンド

```bash
streamlit run Home.py
```

---

## 🎨 ページ名や順番を調整する方法

### 📘 ファイル名に番号を振ると順番が固定されます：

```plaintext
pages/
├── 1_データ表示.py
├── 2_設定.py
```

ページ名はファイル名（先頭の番号は自動で除去される）になります。

---

## 💡 Tips：共通部品（ヘッダー、ナビなど）を utils.py に切り出す

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

def page_header(title):
    st.markdown(f"# {title}")
    st.markdown("---")
```

```python
# Page1.py
from utils import page_header

page_header("ページ1：データ")
```

---

## ✅ 方法②：サイドバーでページ切り替え（Streamlit <1.10 や柔軟にしたい場合）

これも可能です。自分で `st.sidebar.selectbox` などを使って切り替え制御します。

```python
# app.py
import streamlit as st
from pages import page1, page2

page = st.sidebar.selectbox("ページを選択", ["ページ1", "ページ2"])

if page == "ページ1":
    page1.show()
elif page == "ページ2":
    page2.show()
```

```python
# pages/page1.py
import streamlit as st

def show():
    st.title("ページ1")
    st.write("ここに内容を書く")
```

---

## ✅ おすすめ：公式のマルチページ構成（pagesフォルダ）が一番楽！

- ルーティングなし
- 管理しやすい
- 拡張しやすい

---

## 🚀 おまけ：マルチページ + サイドバーに絵文字やアイコンをつける

ファイル名に絵文字を入れるだけでサイドバーに反映されます！

```plaintext
pages/
├── 1_📊_データ表示.py
├── 2_⚙️_設定.py
```

---

もし必要であれば、
- **各ページ間でデータを共有する方法（セッション状態管理）**
- **URLでページを切り替える方法**
- **ログイン認証付きのマルチページ構成**

なども解説できますよ！

興味あるものがあれば遠慮なくどうぞ 😊

# **user**:

ありがとうございます。各ページ間でデータを共有する方法（セッション状態管理）について教えてください。

# **assistant**:

こちらこそ、引き続きありがとうございます！✨  
今回は、**Streamlitの複数ページ間でデータを共有する方法（セッション状態管理）**について、やさしくしっかり解説します。

---

# 🔄 Streamlitでページ間データ共有する方法（セッション状態管理）

Streamlitでは、ページごとに `.py` ファイルが実行されるので、**普通の変数はページをまたぐと保持されません**。  
そのため、**セッション状態（`st.session_state`）**を使ってデータを共有する必要があります。

---

## ✅ 使うのは `st.session_state` ！

```python
import streamlit as st

# 値の保存
st.session_state["user_name"] = "たろう"

# 値の取得
st.write(st.session_state["user_name"])
```

---

## 🧠 セッションステートの基本ルール

| 操作         | 方法例 |
|--------------|--------|
| 変数の保存   | `st.session_state["key"] = 値` |
| 変数の取得   | `st.session_state["key"]` |
| 存在チェック | `"key" in st.session_state` |
| 初期化       | `st.session_state.setdefault("key", 初期値)` |

---

## 🎯 よくある用途例

### ✅ 例：ユーザー名をHomeページで入力して、他のページでも使いたい

---

### 🏠 Home.py

```python
import streamlit as st

st.title("🏠 ホームページ")

# 入力値をセッションステートに保存
user_name = st.text_input("お名前を入力してください", value=st.session_state.get("user_name", ""))

# 保存ボタン
if st.button("保存"):
    st.session_state["user_name"] = user_name
    st.success("保存しました！")
```

---

### 📄 pages/Page1.py

```python
import streamlit as st

st.title("📄 ページ1")

if "user_name" in st.session_state:
    st.write(f"こんにちは、{st.session_state['user_name']} さん！")
else:
    st.warning("ホームページで名前を入力してください。")
```

---

## 🧩 応用：ページ間でデータフレームを共有する

### 🏠 Home.py

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

st.title("🏠 データアップロード")

uploaded_file = st.file_uploader("CSVファイルをアップロード", type="csv")

if uploaded_file:
    df = pd.read_csv(uploaded_file)
    st.session_state["df"] = df
    st.success("データを読み込みました！")
```

---

### 📄 pages/Page2.py

```python
import streamlit as st

st.title("📄 データ表示ページ")

if "df" in st.session_state:
    st.write("📊 アップロードされたデータ：")
    st.dataframe(st.session_state["df"])
else:
    st.warning("まずホームページでCSVをアップロードしてください。")
```

---

## 🔄 セッション状態の削除・リセット（必要に応じて）

```python
# 一部削除
del st.session_state["user_name"]

# 全部初期化（実験的）
for key in list(st.session_state.keys()):
    del st.session_state[key]
```

---

## 💡 Tips：ステートがうまく反映されないとき

Streamlitは再実行されるので、**`st.session_state` の操作はインタラクションに連動させる**のがコツ！

```python
if st.button("次へ"):
    st.session_state["page"] = "page2"
```

---

## 🧰 補足：フォーム入力の保存もOK！

Streamlitのフォーム（`with st.form(...)`）でも `st.session_state` を使えば、複数ページに渡って使えます。

---

## 🚀 まとめ

| 方法                      | 内容                             |
|---------------------------|----------------------------------|
| `st.session_state`        | 変数の保持・共有に使う             |
| `.get()` / `in` チェック | 存在確認して安全にアクセス可能      |
| 複数ページで共有可能     | 入力値・ファイル・DataFrameなどすべてOK |

---

さらに踏み込んだ例（ログイン状態管理・カスタムクラスの保存・キャッシュとの併用）もできますので、  
「認証付きのマルチページ構成を作りたい」「セッション状態＋Streamlit Cloud対応が知りたい」などあれば気軽に聞いてくださいね！😄

# **user**:

ありがとうございます。URLでページを切り替える方法について教えてください。

# **assistant**:

こちらこそありがとうございます！🌟  
今回は、**URLでStreamlitのページを切り替える方法**についてご紹介します。  
これを使うと、特定のページに直接リンクを貼ったり、URLのクエリパラメータを使って状態を保持することができます。

---

# 🔗 StreamlitでURLを使ってページを切り替える方法

---

## ✅ 方法①：Streamlit公式のマルチページ構成 + URL自動切り替え（最も簡単）

### 📌 Streamlit 1.10以降では、**pages構成を使えば自動的にURLがページごとに変わります**

例えば：

- `Home.py` → `http://localhost:8501`
- `pages/Page1.py` → `http://localhost:8501/Page1`
- `pages/Page2.py` → `http://localhost:8501/Page2`

📝 このリンクを直接開くことでページを切り替えることができます。

👉 これは**Streamlitが自動的にやってくれる**ので、特別な設定は不要です。

---

## ✅ 方法②：クエリパラメータを使ってページを切り替える（手動ルーティング式）

Streamlit の `st.experimental_get_query_params()` を使うと、URLの後ろについたパラメータ（例：`?page=page2`）を取得できます。

---

### 🎯 実装ステップ

#### 📁 ファイル構成（例）：

```plaintext
streamlit_app/
├── app.py
├── pages/
│   ├── page1.py
│   └── page2.py
```

---

### 📄 app.py（メインルーティング）

```python
import streamlit as st
import pages.page1 as page1
import pages.page2 as page2

# URLクエリパラメータの取得
params = st.experimental_get_query_params()
page = params.get("page", ["home"])[0]  # デフォルトは "home"

# サイドバーでページ選択（+ クエリパラメータの更新）
selected = st.sidebar.selectbox("ページを選択", ["home", "page1", "page2"])

# クエリパラメータを書き換えてURLを変更
st.experimental_set_query_params(page=selected)

# ページに応じた処理
if page == "home":
    st.title("🏠 ホームページ")
    st.write("ここはトップページです。")
elif page == "page1":
    page1.show()
elif page == "page2":
    page2.show()
```

---

### 📄 pages/page1.py

```python
import streamlit as st

def show():
    st.title("📄 ページ1")
    st.write("これはページ1の内容です。")
```

---

### 📄 pages/page2.py

```python
import streamlit as st

def show():
    st.title("📄 ページ2")
    st.write("これはページ2の内容です。")
```

---

## 🌐 実際のURL

このコードで `http://localhost:8501/?page=page1` にアクセスすると、**page1** が直接表示されます！

📌 外部リンクでページ指定もOK：
```plaintext
<a href="http://localhost:8501/?page=page2">ページ2へ移動</a>
```

---

## 🧠 応用Tips

- クエリパラメータに他の状態（例：ユーザーID、フィルター条件など）も持たせることができます。
- デプロイ後に特定のページをブックマークや共有リンクで開きたいときに便利。

---

## ✅ 方法③：Streamlit公式の `st.experimental_pages`（将来的に発展予定）

現時点（2025年4月）では未公開APIまたは実験的な機能のままなので、**方法①と②の組み合わせ**が一番安全で確実です。

---

## 📌 まとめ

| 方法 | 内容 | メリット |
|------|------|----------|
| ① `pages/`構成 | 自動的にURLが切り替わる | 簡単・公式サポート |
| ② クエリパラメータ手動ルーティング | 柔軟なルーティングが可能 | 状態管理・共有に便利 |
| ③ 将来的な `st.experimental_pages` 等 | 高度なページ制御 | 現在は未安定 |

---

## 💬 補足サポート可能です！

「クエリパラメータでフィルターを設定したい」「ログイン状態をURLに反映したい」などの応用もサポート可能です！

気になることがあれば、なんでも聞いてくださいね☺️

# **user**:

ありがとうございました。大変勉強になりました。今日の内容をブログに書きたいのですが、タイトル案を列挙していただけませんか？

# **assistant**:

それは素晴らしいですね！🎉  
今日の内容（Streamlit 複数ページ構成・セッション状態管理・URL遷移など）をベースにした**ブログ記事タイトル案**を、目的別にいくつかご提案します。

---

## 📝 🎯 全体まとめ系（初心者向け・ガイド系）

1. **「Streamlitで複数ページアプリを作ろう！入門からページ間連携まで完全ガイド」**  
2. **「Python×Streamlitで作るマルチページWebアプリの作り方」**  
3. **「Streamlit複数ページ構成と状態管理を完全理解！URLルーティングまで網羅」**  
4. **「初心者でも安心！Streamlitのページ分割とデータ共有テクニックまとめ」**  
5. **「Streamlitで複雑なWebアプリを作るための3ステップ（ページ分割・セッション・URL）」**

---

## 🚪 🗂 ページ構成にフォーカスしたタイトル

1. **「Streamlitでページを分ける方法：pagesディレクトリでスッキリ設計」**  
2. **「マルチページ対応！Streamlitアプリをきれいに整理する方法」**  
3. **「pages/構成で快適開発！Streamlitのページ分割機能を使いこなす」**

---

## 🔄 💾 状態管理（セッションステート）にフォーカスしたタイトル

1. **「Streamlitでページ間のデータを共有する方法：セッションステート入門」**  
2. **「Streamlitで状態を保持するには？セッション管理の基本と活用法」**  
3. **「ページをまたいでも値が消えない！Streamlitのセッション管理Tips」**

---

## 🌐 🔗 URL制御にフォーカスしたタイトル

1. **「StreamlitでURLによるページ切り替えを実現する方法」**  
2. **「ブックマーク可能なStreamlitアプリの作り方：URLに状態を埋め込もう」**  
3. **「クエリパラメータでStreamlitアプリを操作しよう！URL活用入門」**

---

## 💡 キャッチー／読み物っぽいタイトル

1. **「Streamlitで作る“ちょっと本格的”なWebアプリ開発メモ」**  
2. **「Streamlit初心者がハマったページ分割と状態管理の落とし穴」**  
3. **「ついに理解した！Streamlitでページを切り替えて状態を保つ方法」**

---

ご希望があれば、選んだタイトルに合わせて**見出し構成（目次案）**や**導入文のたたき台**などもお手伝いできますよ！  
お気軽にどうぞ😊

# **user**:

ありがとうございます。「Python + VS Code + Streamlitで複数ページアプリを作ろう！入門からページ間連携まで完全ガイド」にしようと思います。今日のまとめを書いてください。

# **assistant**:

すてきなタイトルですね！✨  
では、「**Python + VS Code + Streamlitで複数ページアプリを作ろう！入門からページ間連携まで完全ガイド**」にふさわしい**まとめ記事本文**をご提案します。  
ブログの構成として自然な**見出し付きのスタイル**で仕上げました。コピペしてそのまま使っていただけます。

---

# Python + VS Code + Streamlitで複数ページアプリを作ろう！  
## 入門からページ間連携まで完全ガイド

---

## 🔰 はじめに

Pythonで簡単にWebアプリが作れる「Streamlit（ストリームリット）」は、データサイエンティストやエンジニアの強力な味方。  
本記事では、**VS Codeを使って複数ページ構成のStreamlitアプリを開発し、ページ間でデータを共有する方法**を一から解説します。

---

## 🛠 開発環境の準備

まずは以下の3つをインストールしておきましょう：

- Python（3.9〜3.11がおすすめ）
- Visual Studio Code（VS Code）
- Streamlit

```bash
pip install streamlit
```

---

## 🧭 Streamlitのマルチページ構成とは？

Streamlitでは、`pages/` ディレクトリを使うことで**複数ページのアプリを簡単に作る**ことができます。

```bash
📁 プロジェクト構成例
.
├── Home.py
└── pages/
    ├── Page1.py
    └── Page2.py
```

このようにファイルを分けるだけで、Streamlitは自動的にナビゲーションメニューを作ってくれます。

---

## 💾 ページ間でデータを共有する方法

ページが `.py` ファイルで独立しているため、普通の変数ではデータが引き継がれません。  
ここで使うのが、**`st.session_state`** です。

```python
# 値の保存
st.session_state["user_name"] = "たろう"

# 他のページでも参照可能
st.write(st.session_state["user_name"])
```

これにより、ユーザーの入力やアップロードしたファイルなどを**ページ間で共有**することができます。

---

## 🌐 URLでページを切り替えるには？

Streamlitのマルチページ構成では、自動的にURLがページごとに分かれます。

例：

- `Home.py` → `/`
- `pages/Page1.py` → `/Page1`
- `pages/Page2.py` → `/Page2`

さらに、`st.experimental_get_query_params()` を使えば、`?page=page1` のようなクエリパラメータによるページ遷移や状態制御も可能です。

---

## ⚙️ Streamlit開発に便利なVS Code設定Tips

- **コード補完**には Python 拡張機能を入れる
- **`.streamlit/config.toml`** でブラウザ自動起動をオフにできる
- **ショートカット**：`⌘ + Shift + P` → `Streamlit: Run` で即実行
- **仮想環境（venv）** を使って依存パッケージを管理すると安心

---

## ✅ まとめ

| 機能                 | ポイント                                   |
|----------------------|--------------------------------------------|
| 複数ページ構成       | `pages/`ディレクトリに.pyファイルを配置するだけ |
| データ共有           | `st.session_state`でページ間にデータを渡す     |
| URLによるページ遷移  | 自動で分かれる＋クエリパラメータ活用で柔軟対応   |
| VS Codeとの連携      | 開発効率が一気にアップ！                    |

Streamlitは、**アイデアをすぐに形にできる開発体験**が魅力です。  
ぜひ、今回学んだ内容を活かして、自分だけの便利なWebアプリを作ってみてください！

---

## ✨ おまけ：こんなアプリも作れる！

- アンケート・投票アプリ
- データ可視化ダッシュボード
- 簡易CMS
- チャットボットUI

---

必要に応じて「導入部分をカジュアルにしたい」「コードを具体的に入れたい」などアレンジもできますので、お気軽にご相談ください😊

# **user**:

ありがとうございました！今日はこのくらいで大丈夫です。また今度お願いしますね！

# **assistant**:

こちらこそ、たくさんご質問いただきありがとうございました！😄  
とてもいいテーマを深掘りされていて、記事にするのもきっと多くの人の助けになると思います✨

またいつでもお気軽にどうぞ。次回も楽しみにしていますね！お疲れさまでした〜！🙌