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

Posted at 2025-04-15

user:

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

assistant:

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

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

✅ 目標

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

1️⃣ 事前準備

💻 必要なもの

Python（バージョン3.8以上）
VSCode（Visual Studio Code）
ターミナル（VSCode内蔵のものでOK）

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

1. Python

公式サイトからインストール。
Macならターミナルで python3 --version で確認。

2. VSCode 拡張機能

以下をインストール：

Python 拡張機能（Microsoft公式）
Jupyter（必要なら）

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

📁 フォルダを作成

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

📂 VSCodeでフォルダを開く

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

3️⃣ Streamlitのインストール

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

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

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

📦 Streamlitのインストール

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

pip install streamlit

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

📝 ファイルを作成

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

✍️ コードを書く

import streamlit as st

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

5️⃣ アプリを実行する

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

streamlit run app.py

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

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

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

🔄 コードを追加

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` で実行

🧪 演習問題（任意）

テキスト入力を受け取って、挨拶するアプリを作る
数値をスライダーで受け取って、その2乗を表示する
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 拡張機能をインストール

🧩 拡張機能の追加方法

VS Code 左の「拡張機能（四角いアイコン）」をクリック
検索バーに Jupyter と入力
Jupyter（Microsoft製）を選んで「インストール」をクリック

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

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

🐍 使用するPythonを設定

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

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

📒 新しい .ipynb ファイルを作成

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

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

print("Hello Jupyter in VS Code!")

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

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

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

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

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

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

💡 補足

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

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. 仮想環境はプロジェクトごとに作る

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順）

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

pip install black isort

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

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

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

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

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

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

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

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

# %%
x = 10
print(x)

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

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

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

Ctrl + Shift + P（Macは Cmd + Shift + P）
Python: Select Interpreter を検索
プロジェクトの 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 の設定で「保存時に自動保存」にしておくと便利！

設定方法：

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

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

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

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

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

# %%
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) を使えば、ちょっとしたスタイル調整もできます。

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. ファイル構成のおすすめ

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

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

ターミナルで：

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()` で表示する（簡易デバッグ）

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

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

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

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

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

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

pip freeze > requirements.txt

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

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

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

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

user:

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

assistant:

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

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

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

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

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

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

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

🏠 例：`Home.py`

import streamlit as st

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

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

📄 例：`pages/Page1.py`

import streamlit as st

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

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

📄 例：`pages/Page2.py`

import streamlit as st

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

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

▶️ 実行コマンド

streamlit run Home.py

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

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

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

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

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

# utils.py
import streamlit as st

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

# Page1.py
from utils import page_header

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

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

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

# 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()

# pages/page1.py
import streamlit as st

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

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

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

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

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

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

もし必要であれば、

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

なども解説できますよ！

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

user:

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

assistant:

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

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

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

✅ 使うのは `st.session_state` ！

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

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

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

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

import streamlit as st

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

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

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

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

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

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

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

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）を取得できます。

🎯 実装ステップ

📁 ファイル構成（例）：

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

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

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

import streamlit as st

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

📄 pages/page2.py

import streamlit as st

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

🌐 実際のURL

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

📌 外部リンクでページ指定もOK：

<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遷移など）をベースにしたブログ記事タイトル案を、目的別にいくつかご提案します。

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

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

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

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

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

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

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

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

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

「Streamlitで作る“ちょっと本格的”なWebアプリ開発メモ」
「Streamlit初心者がハマったページ分割と状態管理の落とし穴」
「ついに理解した！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

pip install streamlit

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

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

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

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

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

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

# 値の保存
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:

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

user:

assistant:

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

✅ 目標

1️⃣ 事前準備

💻 必要なもの

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

1. Python

2. VSCode 拡張機能

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

📁 フォルダを作成

📂 VSCodeでフォルダを開く

3️⃣ Streamlitのインストール

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

📦 Streamlitのインストール

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

📝 ファイルを作成

✍️ コードを書く

5️⃣ アプリを実行する

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

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

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

🔄 コードを追加

💡 ヒント

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

🧪 演習問題（任意）

🏁 まとめ

user:

assistant:

🧪 VS Code で Jupyter Notebook を使う方法

✅ 必要なもの

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

🧩 拡張機能の追加方法

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

🐍 使用するPythonを設定

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

📒 新しい .ipynb ファイルを作成

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

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

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

💡 補足

user:

assistant:

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

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

✅ Pylanceを使おう！

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

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

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

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

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

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

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

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

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

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

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

user:

assistant:

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

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

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

設定方法：

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

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

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

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

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

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

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

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

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

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

user:

assistant:

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

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

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

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

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

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

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

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

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

🏠 例：`Home.py`

📄 例：`pages/Page1.py`

📄 例：`pages/Page2.py`

✅ 使うのは `st.session_state` ！

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