スポンサーリンク
Pythonstreamlit

【永久保存版】VSCodeでStreamlitをデバッグする最も簡単な方法

Python
この記事は約4分で読めます。

Pythonコードだけで手軽にWebシステムが作れるのでデータサイエンス業界ではかなり人気になっているStreamlit

Streamlitでのアプリ開発はスピーディで直感的ですが、「この変数の値、今どうなってる?」「データフレームの中身をちょっと見たい」と思う瞬間は頻繁に訪れます。

そんな時、print()関数を埋め込むのも一つの手ですが、もっとスマートで効率的な方法があります。この記事では、VSCodeを使ってStreamlitアプリをデバッグするための**「本格的な方法」と「手軽な方法」**の2つを、誰でも再現できるようステップ・バイ・ステップでご紹介します。

本格デバッグ!VSCodeデバッガ設定法(推奨)

コードの実行を好きな場所で止め(ブレークポイント)、変数の中身をじっくり覗き見できるプロフェッショナルな方法です。一度設定すれば、開発効率が劇的に向上します。

ステップ1: launch.json ファイルを作成する

まずは、VSCodeに「どうやってデバッグ実行するか」を教えるための設定ファイルを用意します。

  1. VSCodeの左側メニューから「実行とデバッグ」アイコンをクリック。
  2. 「launch.json ファイルを作成します」をクリックします。

もし選択肢が表示されたら、Python Debugger → Python ファイル の順に選びます。

これで、プロジェクト内に .vscode フォルダと、その中に launch.json ファイルが自動で作成されます

ステップ2: 設定内容を書き換える

次に、自動生成された launch.json の中身を一度すべて消して、以下の内容に丸ごと貼り替えてください。”app.py” の部分は、あなたがデバッグしたいメインのファイル名に変更してくださいね。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Streamlit",
      "type": "debugpy",
      "request": "launch",
      "module": "streamlit",
      "args": [
        "run",
        "app.py"
      ]
    }
  ]
}

ステップ3: デバッグを実行する

設定はこれだけで完了です!

  1. コードの調べたい行の左側をクリックして、ブレークポイント (🔴) を置きます。
  2. F5キーを押すか、デバッグ画面の緑色の再生ボタン(▶️)を押してデバッグを開始します。
  3. ブラウザでアプリを操作すると、ブレークポイントを置いた行で処理がピタッと一時停止します。VSCodeの左パネルで変数の値を確認したり、一行ずつ処理を進めたりして、バグの原因を突き止めましょう!

お手軽デバッグ!st.write() 活用法

「デバッガを起動するほどでもないけど、データの中身だけサッと見たい」。そんな時に絶大な効果を発揮するのが st.write() です。

使い方は驚くほど簡単。確認したい変数やデータフレームを st.write() で囲むだけです。

import streamlit as st
import pandas as pd

# データフレームを作成
data = {'col1': [1, 2], 'col2': [3, 4]}
df = pd.DataFrame(data)

# データフレームの中身をアプリ画面に直接出力!
st.write("処理途中のデータフレーム:", df)

# 何らかの処理
df['col3'] = df['col1'] + df['col2']

st.write("処理後のデータフレーム:", df)

# 最終的な表示
st.table(df)

print() 関数がVSCodeのターミナルに出力するのに対し、st.write() はStreamlitアプリの画面上に情報を表示してくれます。これにより、実際のアプリの表示を見ながら、データがどのように変化しているかをリアルタイムで確認できます。

まとめ

2つのデバッグ方法を状況に応じて使い分けるのが、スマートなStreamlit開発者の秘訣です。

  • 複雑なロジックや原因不明のバグには: VSCodeデバッガ
  • データの中身をサクッと確認したい時には: st.write()

この2つの武器を手に、快適なStreamlit開発ライフをお楽しみください!

コメント

タイトルとURLをコピーしました