MENU
  1. ホーム
  2. 記事
  3. AIアプリ開発入門 第2回｜StreamlitでPythonだけでWeb画面を作る

AIアプリ開発入門 第2回｜StreamlitでPythonだけでWeb画面を作る

広告

【ListeningMindガイド編集部からのご案内】

無料トライアルのご案内

「ブランドは消費者にどう思われているのか？」
「消費者は何に困り、何を求めているのか？」

ListeningMindは、
消費者の思考を明らかにするツールです。
＞＞ターゲット層のペルソナを調べてみる（無料トライアル有り）

AIアプリ開発入門 シリーズ 第1回〜第6回

前回は、AIアプリの裏側で動く「Python・API・JSON・ライブラリ」の基本を整理しました。今回はその次のステップとして、PythonだけでWeb画面を作れる Streamlit の考え方と使い方を、初心者向けに整理します。

今回のゴールは、「HTMLやCSSを書かなくても、Pythonのコードだけで入力欄やボタンがある画面を作れる」という感覚をつかむことです。

目次

Streamlitとは何か

Streamlitは、PythonだけでWebアプリの画面を作れるフレームワークです。
本来、Web画面を作るにはHTML・CSS・JavaScriptといった別々の技術が必要ですが、Streamlitを使うと、それらの多くを意識せずにPythonコードだけで画面を表示できます。

そのため、Streamlitは特に「データ分析の可視化」「AIの検証ツール」「社内向けの簡易アプリ」「プロトタイプ作成」と相性が良いとされています。
見た目の自由度は高級なフロントエンド開発より低い一方、短時間で動く画面を作れるのが大きな強みです。

StreamlitはPython本体には含まれていない「外部ライブラリ」です。Python本体はあくまで動かすための土台であり、Streamlitはその上に追加でインストールする拡張部品です。

Pythonで画面が作れるとはどういうことか

Streamlitでは、Pythonで書いた命令をもとに、裏側でWeb画面として必要な表示処理が組み立てられ、ブラウザに結果が表示されます。
つまり、開発者は「タイトルを出す」「入力欄を出す」「ボタンを出す」といった命令をPythonで書くだけでよく、複雑な画面部品を一からHTMLで作る必要がありません。

たとえば、次のようなコードだけで、タイトル・入力欄・ボタンを持つ画面を作れます。

pythonimport streamlit as st

st.title("はじめてのアプリ")
name = st.text_input("名前を入力してください")
st.button("送信")

この数行だけで、ブラウザ上には「タイトル」「入力欄」「ボタン」が並んだ画面が表示されます。
ここで重要なのは、Pythonがフロントエンドそのものになるというより、Pythonの命令をStreamlitがWeb画面に変換してくれると理解することです。

import streamlit as st の意味

import streamlit as st は、「Streamlitというライブラリを読み込み、以後は st という短い名前で使う」という意味です。
st は特別な予約語ではなく、あくまで別名ですが、Streamlitではこの書き方が広く使われる慣習になっています。

たとえば、タイトルを表示する st.title()、文字を表示する st.write()、入力欄を表示する st.text_input() のように、st を入口にして画面部品を追加していきます。
この「st. の後ろに、使いたい画面部品の名前を書く」という感覚が、Streamlitの基本です。

この一行はファイルの一番先頭に書く必要があります。Pythonはコードを上から順に実行するため、st.title()などを使う前にStreamlitを読み込んでおかなければエラーになります。「使う前に宣言する」という順番のルールはPython全般のルールです。

Streamlitでよく使う画面部品

Streamlitには、最初から便利な画面部品が多数用意されています。
初心者が最初に覚えるとよいものは、次のあたりです。

  • st.title()：ページの大きな見出しを表示する。
  • st.write()：文字やデータを柔軟に表示する。
  • st.text_input()：1行の文字入力欄を表示する。
  • st.text_area()：複数行の文章入力欄を表示する。
  • st.button()：クリックできるボタンを表示する。
  • st.sidebar：左側に設定用のサイドバーを作る。
  • st.file_uploader()：ファイルのアップロード欄を作る。
  • st.dataframe()：表形式でデータを見せる。
  • st.line_chart()：簡単なグラフを表示する。

この構成を見ると、Streamlitは「Web画面をゼロから自由に描く道具」というより、よく使う部品を組み合わせて素早くアプリを作る道具だと分かります。

アプリはどこで動くのか

ローカル環境で streamlit run app.py を実行すると、通常はブラウザで localhost:8501 が開きます。
この localhost は「今使っている自分のパソコン自身」を指す特別な名前で、外部のインターネットではなく、自分のPCの中にあるアプリへアクセスしていることを意味します。

また、8501 はポート番号と呼ばれるもので、パソコン内の通信の入口を区別するための番号です。
Streamlitは標準設定でこの 8501 を使うため、初回起動時は localhost:8501 が開かれることが多いです。

この段階では、アプリはまだ世界に公開されておらず、自分だけが確認できる試作画面として動いています。

localhostで動いている段階では、アプリは自分のPC内にだけ存在します。これを他の人も使えるようにする（インターネット上に公開する）には、Streamlit Community Cloudなどのホスティングサービスにアップロードするステップが別途必要です。この公開手順については後の回で扱います。

最小の実行手順

ローカルPCでStreamlitを試すときの基本的な流れはシンプルです。

  1. Pythonを使える状態にする。
    • 「Pythonを使える状態」とは、OSにPython本体をインストール済みであることを指します。Pythonはpython.orgから無料でダウンロードできます。macOS/LinuxにはPythonが最初から入っていることが多いですが、Windowsには入っていないためインストールが必要です。
  2. pip install streamlit でライブラリを入れる。
    • pip install streamlitという操作は、インターネット上のパッケージ配布サービス（PyPI）から道具を取ってきてPython環境に加える、という意味になります。
  3. app.py というファイルを作る。
  4. その中にStreamlitのコードを書く。
  5. ターミナルで streamlit run app.py を実行する。

たとえば、最小コードは次のようになります。

pythonimport streamlit as st

st.title("My First Streamlit App")
st.write("こんにちは。これは最初の画面です。")

このファイルを保存し、ターミナルで起動すると、ブラウザ上にタイトルと文章が表示されます。

Streamlitの良さと注意点

Streamlitの最大の良さは、Pythonしか知らなくても画面付きアプリをすぐ作れることです。
AI APIの検証や社内向けツールのように、「まず動くものを早く作りたい」場面では非常に強力です。

一方で、デザインの自由度には限界があります。
企業サイトのような細かなレイアウトや複雑なアニメーションを作る用途では、通常のフロントエンド技術のほうが向いていることもあります。

つまり、Streamlitは「見た目を細かく作り込むための道具」というより、業務アプリやAIツールを素早く形にするための道具として理解すると位置づけが明確になります。

今回のまとめ

今回押さえるべきポイントは次の3つです。

  • Streamlitを使うと、PythonだけでWeb画面を作れる。
  • st.title() や st.text_input() のような部品を並べる感覚で画面を組み立てる。
  • localhost:8501 で見ているのは、まず自分のPCの中で動いている試作アプリである。

次回は、今回作った画面にGemini APIへの通信処理を追加し、入力した内容をAIに送って結果を返す流れを実装します。これにより、「画面」と「AI処理」が実際につながります。

あわせて読みたい
AIアプリ開発入門 第3回｜Geminiと繋いで連続処理（チェーン）を作ろう！〜Streamlitの一時記憶の魔法〜 これまでの連載で、「AIとやり取りする裏側の仕組み（PythonやAPI）」と「Streamlitで画面を作る方法」を学びました。今回はついに、これらを合体させて「画面から入力…

初心者向けの参考リソース

Streamlitの概要を知りたい方へ

基本コードや画面部品を確認したい方へ

ローカル実行や localhost を理解したい方へ

注意事項

本記事の内容は執筆時点の情報をもとに作成しています。
Python、Streamlit、Gemini API、GitHub、Streamlit Cloud、Supabase、Vercel、Cloudflare、Google Cloud などの仕様、料金、UI、提供条件は予告なく変更される場合があります。

記事内のコード、設定例、画面構成は学習用・検証用のサンプルです。
実際の運用環境に導入する場合は、公式ドキュメントを確認したうえで、ご自身の責任で検証・調整してください。

APIキー、認証情報、個人情報、業務データなどの機密情報は、記事中のサンプル通りであっても公開リポジトリや公開画面にそのまま掲載しないでください。
外部サービス利用時の課金、障害、セキュリティ事故、データ消失などについて、当サイトは責任を負いません。

記事
AIアプリ開発入門

著者について

ListeningMind ガイド 編集部のアバター ListeningMind ガイド 編集部

ListeningMind ガイドの編集部です。

この著者の記事一覧へ

関連記事

目次