🐍 Streamlit UI ガイド ― Pythonで作るUIと、React/Next.jsとの使い分け
このページでわかること
- Streamlit が「PythonだけでUIを作れる」とはどういうことか
- Streamlit と React/Next.js、それぞれが長けている点と使い分けの考え方
- 最新 v1.58 で何が増えたか（新ウィジェットと、使えるバージョンの見方）
- 各UIを実際に触れるプレイグラウンドと、ui-memo内の対応ページへの導線
Streamlitとは
Streamlit は、Python のスクリプトを書くだけで Web UI が立ち上がるフレームワーク。HTML/CSS/JavaScript を直接書かず、st.button() や st.slider() のような関数を並べるだけで、スライダーやグラフ、チャットUIまでブラウザに描画される。値が変わるとスクリプトが上から再実行され、画面が自動で更新される——状態管理を自前で組まなくても「操作→即反映」が成立するのが最大の特徴。データ分析・機械学習の領域で広く使われ、ダッシュボードや社内ツール、検証用のプロトタイプを最短距離で形にする用途に強い。サーバーで動くアプリのため、React/Next.js のような静的サイト／公開Webとは構造的に立ち位置が異なる。
目的別の選び方
両者は競合というより守備範囲が違う。それぞれの強みを把握して、状況で選ぶ・併用するのがよい。
| 観点 | Streamlit が長ける点 | React / Next.js が長ける点 |
|---|---|---|
| 開発言語 | Python だけで完結（フロント知識ほぼ不要） | TypeScript/JS。Web標準をフルに扱える |
| 作るのが速い領域 | データ可視化・ML・社内ダッシュボード・PoC | 公開プロダクト・マーケサイト・複雑なアプリ |
| 状態管理 | 再実行モデルで自動更新。意識せず書ける | 明示的に設計（柔軟だが手数は増える） |
| UIウィジェット | データ系・チャット・表が標準同梱で即使える | ライブラリ選定・実装は必要（自由度は高い） |
| デザイン制御 | テーマ設定の範囲（細かな作り込みは限定的） | ピクセル単位で自由。ブランド表現に強い |
| SEO・初期表示 | サーバー描画アプリ。公開Web/SEOには不向き | SSR/SSGで強い。検索・AIクローラに最適 |
| モバイル最適化 | 限定的 | レスポンシブを作り込める |
| 公開・運用 | 社内・限定公開向き（Community Cloud等） | 本番公開・大規模運用の実績豊富 |
なぜ住み分くのか
- 公開Webの作法（SEO）：Streamlit は内容を JavaScript で後から描画するため、検索エンジンやAIクローラが見るHTMLは実質空。検索流入を狙う公開ページには不向き。React/Next.js はサーバー側でHTMLを返せる（SSR/SSG）ので、検索にもAIにも拾われる。
- デザインの自由度：Streamlit はテーマ設定の範囲でしか見た目を変えられない。ピクセル単位のレイアウトや独自のブランド表現は React が要る。社内ツールは「動けばいい」ので問題になりにくい。
- ホスティングとスケール：Streamlit はサーバーが常駐しユーザーごとにセッションを持つ構造で、同時アクセスが増えると重くなりやすい。不特定多数の公開サイト規模は苦手（社内の数人〜数十人なら快適）。React/Next.js は静的配信＋CDNで大量アクセスに強い。
- 作る速さ（Streamlit が勝つ側）：Python だけでデータ可視化や編集グリッドが数行で出る。試作や社内ツールは圧倒的に速く、フロントの知識もコストも要らない。
選び方の目安：社内向けのデータアプリ・分析ダッシュボード・素早い試作なら Streamlit が近道。検索流入を狙う公開サイト・デザインやブランドを作り込む製品・モバイル重視なら React/Next.js。併用も有効で、「Streamlit で素早く PoC → 手応えが出たら Next.js で本番化」という流れは定番。
※トレードオフ（参考）：Streamlit は手軽さと引き換えに、細かなデザイン制御・SEO・モバイル最適化が弱い。React/Next.js は自由度と本番適性が高い反面、同じUIを出すまでの実装コストは大きい。どちらが上ではなく、何を優先するかで決まる。
最新UI情報（v1.58）
最新の v1.58 で増えた主な UI と、注目の新しめウィジェット。各UIは「どのバージョンから使えるか」を Tier で明記している（古い環境でも使えるか即判断できる）。
Tier A（新しめ・要確認 / v1.37〜）
- st.pagination(v1.58)
- expander/status の type="compact"(v1.58)
- st.pills・st.segmented_control・st.audio_input(v1.40)
- st.dialog・st.feedback(v1.37)
Tier B（中堅 / v1.23〜1.32）
- st.popover
- st.write_stream
- st.toggle
- st.chat_message / st.chat_input
- st.data_editor
Tier C（広く使える / 初期〜）
- st.button・st.slider・st.selectbox
- 各種チャート 等
セキュリティ等で古いバージョンに固定されている現場も多い。各カテゴリページでウィジェットごとに導入バージョンを併記しているので、自分の環境で使えるかを確認してから採用できる。
カテゴリ一覧
▶ 実際に触ってみる ― Streamlit プレイグラウンド
本物の Streamlit がブラウザで動く。常に最新の実行バージョンを表示。
よくある質問
Streamlit は React/Next.js の代わりになりますか？
用途が違います。社内ツールやデータアプリ・試作には Streamlit が速く、公開Webやデザイン重視の製品には React/Next.js が向きます。競合ではなく使い分け・併用が現実的です。
古いバージョンの Streamlit でも新しいウィジェットは使えますか？
ウィジェットごとに導入バージョンが決まっています。本サイトでは各UIに Tier バッジで導入バージョンを明記しているので、固定環境でも使えるか確認できます。
このサイトのデモは本物の Streamlit ですか？
はい。プレイグラウンド（ui-memo.streamlit.app）は Streamlit Community Cloud 上で動く本物のアプリで、常に実行中の実バージョンを表示します。
Streamlit は公開サイトに使えますか？
使えますが、SEO・初期表示・デザイン制御の面で公開Web向きではありません。検索流入やブランド表現が要るなら Next.js 等が適します。
Zenn