Claude CodeでStreamlitアプリを作る手順

Claude CodeでStreamlitアプリを作るとは

Claude CodeでStreamlitアプリを作るとは、対話で伝えた要件をもとにClaude Codeがapp.pyを書き、streamlit runで実際に動かしながら仕上げていく作業です。コードを一から書く代わりに、欲しいダッシュボードの中身を自然文で指示し、動作確認と修正をClaude Codeに任せられます。

Streamlitとは、Pythonのスクリプトに数行のコマンドを足すだけでブラウザー上のデータアプリを作れるオープンソースのフレームワークです。HTMLやJavaScriptを書かずに、表・グラフ・地図・スライダーなどのUI部品をPythonの関数呼び出しだけで配置できます。データダッシュボードや社内向けの検証ツールを最短で形にしたい場面でよく使われています。

Claude Codeが担う範囲は、app.pyのコード生成だけではありません。ターミナル権限があればpip installやstreamlit runもそのまま実行でき、起動したアプリの挙動を見ながらコードを直す反復作業も任せられます。以下では環境構築からコード生成、公式のAgent Skillsの導入までを順に見ていきます。

前提条件 — Streamlitのインストール方法

Streamlitアプリを動かすには、Python環境へのStreamlitのインストールが前提です。ローカルにPythonが入っていれば、仮想環境を作ってpipで入れるのが最短です。

公式ドキュメントが挙げる開発環境は4通りあります。

ローカルのコマンドラインで進める場合は、次の手順でインストールします。

python -m venv .venv
source .venv/bin/activate
pip install streamlit
streamlit hello

streamlit helloはStreamlit公式のサンプルアプリを起動するコマンドで、インストールが成功していればブラウザーに新しいタブが開きます。ここまでをClaude Codeに直接実行させれば、環境構築の確認も含めて一度に終わらせられます。

Claude Codeにアプリの雛形を作らせる

Claude Codeにアプリの雛形を作らせるときは、扱うデータと表示したい内容を自然文で伝えるだけで済みます。Claude Codeがそれをimport streamlit as stから始まるapp.pyに落とし込みます。

Streamlitのアプリは、画面に何か変化が起きるたびにPythonスクリプトを最初から最後まで再実行する設計です。ウィジェットを操作したときも、コードを保存したときも同じように全体が再実行されます。Claude Codeが生成するコードもこの前提に沿って上から下へ素直に実行される構成になり、関数やクラスに凝った状態管理を仕込むより、スクリプトをそのまま読み下せる形にする方がStreamlitの流儀に合います。

最小構成なら、次のようなコードになります。

import streamlit as st
 
st.title("最初のダッシュボード")
 
x = st.slider("倍率を選んでください", 0, 10)
st.write(f"{x} の2乗は {x * x} です")

st.sliderはウィジェットで、ユーザーが値を動かすたびにスクリプト全体が再実行され、xに現在の値が入り直します。Claude Codeにウィジェットを追加してもらうときは「スライダーを足して」のように部品単位で頼むと、この再実行モデルを踏まえたコードが返ってきます。

streamlit runで起動して反復する

streamlit runでアプリを起動すると、ローカルサーバーが立ち上がりブラウザーの新しいタブでアプリが開きます。コードを保存するたびに再実行を促す通知が出るので、書く・保存する・確認するのループをそのまま回せます。

streamlit run app.py

画面右上に表示される選択肢で「Always rerun(常に再実行)」を選んでおくと、保存するたびに自動でアプリが更新されます。エディターとブラウザーを並べておけば、コードと結果を同時に見ながら直せます。

Claude Codeに起動と確認までまとめて任せる場合は/runコマンドが使えます。プロジェクトの構成から起動方法を推測して実際にアプリを動かすバンドルスキルで、Streamlitのようにstreamlit run一本で起動する構成なら推測が素直に当たります。ブラウザーでの見た目を画面越しに確認したいときは、Claude Code DesktopのBrowserペインでdevサーバーをプレビューする方法も使えます。

動作を確認できたら、公開して共有する選択肢もあります。Streamlit Community Cloudを使う場合、requirements.txtを含めたコード一式をGitHubの公開リポジトリに置き、share.streamlit.ioでリポジトリのURLを指定するとデプロイできます。

データの表示とキャッシュを組み込む

データを表示するだけなら、変数を単独の行に置くかst.write()に渡すだけで済みます。表・グラフ・地図のいずれも、対応するst.*関数を1行呼ぶだけで描画されます。

import streamlit as st
import pandas as pd
import numpy as np
 
df = pd.DataFrame({
    "first column": [1, 2, 3, 4],
    "second column": [10, 20, 30, 40],
})
st.write(df)
 
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
st.line_chart(chart_data)

st.write()はテキスト・データフレーム・Matplotlibの図・Altairのチャートまで渡せる汎用の描画関数です。静的な表として描きたいときはst.table()、インタラクティブな表として描きたいときはst.dataframe()と使い分けます。Pandasのstyler機能と組み合わせると、st.dataframe(dataframe.style.highlight_max(axis=0))のように列ごとの最大値を強調表示することもできます。書式を変えずに固定表示したいだけなら、st.table()に渡せば十分です。

データの取得や整形に時間がかかる処理は、@st.cache_dataをつけるとスクリプト再実行のたびに実行し直さずに済みます。

@st.cache_data
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    return data

@st.cache_dataは、関数の引数とコードの中身が前回と同じであれば処理を飛ばし、キャッシュ済みの結果を返す仕組みです。公式ドキュメントは3つの限界を挙げています。キャッシュの変化検知は作業ディレクトリの中だけが対象で、ライブラリをアップグレードしても作業ディレクトリの外にあれば気づきません。関数が乱数や外部の時系列データのように毎回結果が変わる処理を含む場合、キャッシュは古い結果を返し続けます。そしてst.cache_dataが返す値は参照で保持されるため、呼び出し側で戻り値を書き換えるのは避けたほうが安全です。

Streamlit公式のAgent Skillsを導入する

Streamlitは、Claude CodeのようなAIコーディングエージェント向けに公式のAgent Skillsをパッケージへ同梱しています。streamlit skillsコマンドを実行するだけで、Claude Codeが現在のStreamlit APIに沿ったコードを書けるよう補助スキルを導入できます。

streamlit skills

公式ドキュメントによると、このコマンドは既定でプロジェクトモードで動き、インストール済みのStreamlitパッケージに同梱されたスキルへのシンボリックリンクを.agents/skills/と.claude/skills/に作成します。Streamlitをアップグレードすればスキルの中身も自動で追随します。--global(-g)を付けるとユーザーディレクトリにメタスキルをインストールし、全プロジェクトで共通に使えるようになります。確認プロンプトを省きたい場合は--yes(-y)を足します。

このスキルは、Streamlitパッケージ1.57以降に同梱されたコマンド・スタイリング・キャッシュ・カスタムコンポーネントなどのリファレンスへClaude Codeを誘導する、ルーティング役のスキルです。streamlit skillsコマンド自体は1.58以降で使えます。導入しておくと、Claude Codeが古い書き方や非推奨のAPIを提案する頻度を抑えられます。生成したコードの見た目やグラフの配色を整えたいときは、Claude Code標準の/datavizスキルと組み合わせると、チャート形式の選定から配色の検証までを1コマンドに任せられます。

Claude Codeが.claude/skills/配下のスキルを端末セッションに読み込む仕組み自体は、claude.aiで作ったSkillを端末セッションに同期する更新でも扱われています。プロジェクト直下に置いたスキルは、この仕組みに沿ってセッション開始時に読み込まれます。

よくあるつまずき

• カスタム引数がstreamlit自身のオプションと解釈される: streamlit run app.py --my-flagのように渡すと、--my-flagはStreamlitへの引数として扱われます。スクリプト側に渡したい引数はstreamlit run app.py -- --my-flagのように--の後に置きます
• Linuxのルートディレクトリで起動できない: Streamlit 1.10.0以降、ルートディレクトリからの実行はFileNotFoundErrorになります。メインスクリプトをルート以外のディレクトリに置きます
• キャッシュが古いデータを返し続ける: @st.cache_dataは作業ディレクトリの外の変更や、乱数・外部時系列データのような非決定的な処理の変化を検知しません。データソースが動的に変わる場合はキャッシュの対象から外すか、引数を変えてキャッシュキーを更新します
• ウィジェットの状態が意図せずリセットされる: スクリプトは操作のたびに全体が再実行されるため、keyを指定していないウィジェットの値は保持されません。値を保持したい場合はkey引数を付けてSession Stateに乗せます

まとめ

Claude CodeでStreamlitアプリを作る流れは、pip install streamlitで環境を整え、要件を自然文でClaude Codeに伝えてapp.pyを書かせ、streamlit runで起動しながら直す反復に集約されます。streamlit skillsで公式のAgent Skillsを.claude/skills/に入れておけば、Claude Codeが現在のAPIに沿ったコードを書きやすくなります。再実行モデルとキャッシュの挙動さえ押さえておけば、ダッシュボードの雛形は数往復のやり取りで形になります。