Skip to content

VSCode で Streamlit を使う方法：ステップバイステップガイド（2025 年版）

Olaf Källström
Name
Olaf Källström

Updated on

Python 開発のワークフローを加速させたいですか？
Streamlit + VSCode は、データアプリを構築する最速クラスの組み合わせであり、エンジニア、データサイエンティスト、アナリスト、ML エンジニアに特に向いています。

この 2025 年版の更新ガイドでは、次の内容を解説します：

  • ✔ VSCode での Streamlit の正しいセットアップ方法
  • ✔ ベストプラクティスとしての仮想環境の使い方
  • ✔ VSCode 内での Streamlit アプリのデバッグ方法
  • ✔ Stlite 拡張機能を使ったアプリのプレビュー方法
  • ✔ 2025 年時点のモダンなホスティングオプション を使った Streamlit アプリのデプロイ方法
  • ✔ ノーコード可視化のために PyGWalker でワークフローを強化する方法

それでは始めましょう。

基本コンセプト：Streamlit + VSCode

Streamlit とは？

Streamlit は、HTML・CSS・JavaScript を書かずにインタラクティブな Web アプリを構築できる、オープンソースの Python フレームワークです。
Python スクリプトを数分で共有可能なデータアプリに変換してくれます。

主なメリット：

  • フロントエンドの知識が不要
  • リアルタイムのホットリロード
  • スライダー、セレクト、ファイルアップロード、チャートなどの簡単なウィジェット
  • データ探索、ダッシュボード、ML デモに最適

2025 年時点では、多くのデータサイエンスチームにおける デフォルト のツールとなっており、場当たり的なダッシュボードや Jupyter のウィジェット、社内向けの簡易 BI プロトタイプの代わりとして使われています。

VSCode で Streamlit を使う理由

VSCode は Streamlit の体験を大きく向上させます：

1. 🔥 高速な開発サイクル

コードを書く → 保存する → アプリが即座に自動リロードされます。

2. 🧩 充実したエコシステム

Python 拡張機能、Git 連携、Copilot/Cursor 系の AI ツール、フォーマッタ、リンターなどが揃っています。

3. 🐞 一級のデバッグ体験

VSCode では、ブレークポイント、変数ウォッチ、ステップ実行を使って Streamlit のロジックをデバッグできます。

4. 🚀 モダンな開発ツールとの高い親和性

仮想環境、Conda、uv、Docker、リモート SSH、dev container などとシームレスに連携できます。

把握しておくべき制限事項

Streamlit は強力ですが、次のような制約があります：

  • 重いカスタムフロントエンドや複雑なマルチページアプリには不向き
  • ステートレス設計のため、複雑な状態管理は難しくなりがち
  • FastAPI + React、Django などのフルスタック Web フレームワークと比べると UI の柔軟性は低い

とはいえ、社内向けダッシュボードや ML ツールの 90% には十分すぎる選択肢です。

VSCode で Streamlit を使う手順（2025 年版）

以下は モダン かつ推奨されるワークフローです。

Step 1 — 仮想環境を作成する（ベストプラクティス）

Streamlit をグローバルにインストールする代わりに、次のようにします：

python3 -m venv .venv
source .venv/bin/activate      # macOS / Linux
.venv\Scripts\activate         # Windows

もしくは uv（非常に高速）を使う場合：

uv venv
source .venv/bin/activate

Step 2 — Streamlit をインストールする

pip install streamlit

Step 3 — VSCode で Python ファイルを作成する

example.py というファイルを作成します：

import streamlit as st
 
st.title("My First Streamlit App")
st.write("Hello, VSCode + Streamlit!")

Step 4 — VSCode のターミナルから Streamlit を実行する

ターミナルを開きます：

  • Windows / Linux: Ctrl + Shift + `
  • macOS: Cmd + J

そして次を実行します：

streamlit run example.py

ブラウザが自動的に開き、次の URL にアクセスできます：

http://localhost:8501 (opens in a new tab)

ボーナス：VSCode で Streamlit アプリをデバッグする

.vscode/launch.json を追加します：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Streamlit App",
      "type": "python",
      "request": "launch",
      "module": "streamlit",
      "args": ["run", "example.py"],
      "console": "integratedTerminal"
    }
  ]
}

これで ブレークポイント、ステップ実行、変数パネル を使ったデバッグが可能になります。

PyGWalker で Streamlit 可視化アプリを作る（更新版）

PyGWalker (opens in a new tab) は、ほぼコードなしで Tableau ライクな UI を Streamlit に追加できます。

次の用途に最適です：

  • データ探索
  • ダッシュボードのプロトタイプ
  • 分析結果の共有

最小限の例：

import streamlit as st
import pygwalker as pyg
import pandas as pd
 
df = pd.read_csv("your-data.csv")
pyg.walk(df, env="streamlit")

ライブデモ → https://pygwalkerapp-d0iztqkzcmr.streamlit.app/ (opens in a new tab)

Sven (CodingIsFun) による動画チュートリアル：

VSCode 拡張機能：Stlite（最新情報）

Stlite extension は次の機能を提供します：

  • Streamlit 用のシンタックスハイライト
  • よく使う Streamlit 関数のスニペット
  • VSCode 内蔵のプレビューパネル
  • ちょっとした確認のためにブラウザを開く必要がない

使い方：

  1. Command Palette を開く → Launch stlite preview を実行
  2. .py ファイルを選択
  3. VSCode のエディタペインにプレビューが表示されます

制限事項

  • WebAssembly 版の Streamlit を使用します
  • 一部コンポーネントは、フルの Python バックエンドと挙動が異なります
  • WASM のリソース取得にネットワークが必要（オフラインモードには制限あり）

それでも、素早いプロトタイピングには非常に便利です。

デプロイ：Streamlit を本番環境に公開するには

旧来の “Streamlit Sharing” はすでに終了しています。

現在主流のデプロイ方法は次のとおりです：

✅ Streamlit Community Cloud（初心者に特におすすめ）

無料で高速、かつシンプルです。

✅ Railway.app

自動ビルド付きのワンクリックデプロイが可能です。

✅ Render.com

無料枠とオートスケーリングを提供します。

✅ HuggingFace Spaces

ML デモ向けに最適です。

✅ AWS / GCP / Azure

Docker + ロードバランシングを組み合わせることで、本番運用向けの構成が可能です。

チュートリアル：
➡ /topics/Streamlit/deploy-streamlit-app

よくある質問（FAQ）

1. VSCode で動いている Streamlit を止めるには？
VSCode のターミナルの Stop ボタンを押すか、Ctrl+C を入力します。

2. アプリを開くには？
http://localhost:8501 にアクセスします。

3. Google Colab で Streamlit は使える？
はい。Streamlit をインストールし、pyngrok を使ってローカルサーバーをトンネリングします。

4. 仮想環境を使う理由は？
依存関係をプロジェクトごとに分離し、バージョンの衝突を防ぐためです。

5. Streamlit の代表的な制限は？
UI カスタマイズ性の制限、ステートレス設計の複雑さ、大規模フロントエンドには向かない点などです。

6. Streamlit は何に使う？
ML デモ、ダッシュボード、社内ツール、データ探索、インタラクティブなアプリの迅速な試作に使われます。

まとめ

Streamlit + VSCode は、2025 年においてもデータアプリケーションを構築する最速クラスの組み合わせです。
データ探索、ダッシュボード構築、社内ツールのデプロイなど、あらゆる場面で次のメリットをもたらします：

  • 高速な反復開発
  • クリーンな開発環境
  • 強力なデバッグ機能
  • モダンなデプロイ手段

さらに PyGWalker、Stlite、そして進化し続ける VSCode の AI エコシステムを組み合わせることで、フル機能のデータプロダクト開発環境が手に入ります。