Pythonで手軽にWebアプリ制作！初心者でも挫折しない「Streamlit」入門ガイド

【Yuki】 Hirokiくん、こんにちは。今日はPythonを使って、驚くほど簡単にWebアプリケーションが作れる「Streamlit（ストリームリット）」というライブラリについて、一緒にお勉強していきましょうか。

【Hiroki】 Yukiさん、よろしくお願いします！Webアプリって、HTMLとかCSSとか、いろいろ覚えることが多くて難しいイメージがあるんですけど、Pythonだけで作れるんですか？

【Yuki】 はい、そうなんです。本来ならWebアプリを作るには、画面の見た目を作るHTML/CSSや、動きをつけるJavaScript、そしてサーバー側の処理を書く言語など、たくさんの知識が必要になりますよね。でも、Streamlitを使えば、Pythonのコードを書くだけで、おしゃれなUIを備えたWebアプリが完成してしまうんです。

【Hiroki】 それはすごいですね！僕みたいな初心者でも、すぐに形にできそうです。

【Yuki】 ええ、きっと大丈夫だと思いますよ。Streamlitはもともと、データサイエンティストの人たちが分析結果を素早く共有するために作られたツールなんです。だから、「複雑な設定は抜きにして、やりたいことをすぐに形にする」という点に特化しているんですね。

Streamlitの準備と最初の一歩

【Yuki】 まずは、Streamlitを使えるように準備をしましょう。Pythonがインストールされている環境なら、コマンド一つで導入できます。

【Hiroki】 pipコマンドを使うんですよね？

【Yuki】 その通りです。ターミナルやコマンドプロンプトで、次のように入力してみてください。

pip install streamlit

【Yuki】 インストールが終わったら、まずは「Hello World」を表示させるだけの簡単なファイルを作ってみましょうか。ファイル名は app.py など、好きな名前で大丈夫です。

import streamlit as st

st.title("僕の初めてのStreamlitアプリ")
st.write("こんにちは、Yukiさん！Streamlitを勉強中です。")

【Hiroki】 これだけでいいんですか？すごく短いですね。

【Yuki】 ふふ、そうなんです。これを実行するには、コマンドラインで次のように打ちます。

streamlit run app.py

【Yuki】 すると、ブラウザが自動的に立ち上がって、今書いたメッセージが表示されるはずですよ。

【Hiroki】 あ、本当だ！ブラウザに大きなタイトルと文字が出ました！これだけでWebアプリっぽく見えますね。

基本的なテキスト表示とマークダウン

【Yuki】 次は、もう少し表現を豊かにしてみましょう。Streamlitでは、文字を表示するためのメソッドがいくつか用意されています。

【Hiroki】 st.write 以外にもあるんですか？

【Yuki】 はい。例えば、見出しを作る st.header や st.subheader、もっと細かく装飾したいときは Markdown（マークダウン） 形式が使える st.markdown が便利です。

import streamlit as st

st.title("テキスト表示の練習")
st.header("これはヘッダーです")
st.subheader("これはサブヘッダーです")
st.text("これは普通のテキスト表示です。")
st.markdown("Markdownを使って**太字**にしたり、:blue[色をつけたり]もできますよ。")

【Hiroki】 マークダウンが使えるのは嬉しいですね。ドキュメント作成の知識がそのまま活かせそうです。

【Yuki】 そうですね。フォントの大きさや色の指定も簡単なので、デザインのセンスに自信がなくても、清潔感のある画面が作れるのがStreamlitの良いところだと思います...。

インタラクティブな部品を使ってみよう

【Hiroki】 Yukiさん、Webアプリなら、ユーザーが何か入力したりボタンを押したりする機能も欲しいです。

【Yuki】 もちろんです。Streamlitの本領発揮ですね。ボタンやスライダー、テキスト入力といった「ウィジェット」を配置してみましょう。

【Hiroki】 難しくないでしょうか...？

【Yuki】 大丈夫ですよ。変数に代入するような感覚で書けるんです。次のコードを見てみてください。

import streamlit as st

st.title("ユーザー入力のテスト")

# テキスト入力
name = st.text_input("お名前を教えてください")

# スライダー
age = st.slider("年齢を選んでください", 0, 100, 18)

# ボタン
if st.button("挨拶する"):
    st.write(f"こんにちは、{age}歳の{name}さん！")

【Hiroki】 えっ、age = st.slider(...) だけで、画面にスライダーが出てきて、その値が変数 age に入るんですか？

【Yuki】 その通りです。普通ならJavaScriptで「値が変わった」というイベントを取得して...といった処理が必要ですが、Streamlitでは「操作があった瞬間にスクリプトが上から下まで再実行される」という仕組みになっているんです。だから、直感的に書けるんですね。

【Hiroki】 なるほど！スクリプト全体がもう一度動くから、最新の入力値で画面が書き換わるわけですね。

データの可視化を体験する

【Yuki】 Streamlitはデータの可視化も得意です。例えば、グラフを表示させるのも、本来はライブラリの設定が大変だったりしますが、Streamlitなら専用の関数が用意されています。

【Hiroki】 どんなグラフが作れるんですか？

【Yuki】 折れ線グラフや棒グラフ、地図の表示も可能です。簡単なランダムデータを表示させてみましょうか。

import streamlit as st
import pandas as pd
import numpy as np

st.title("データ可視化の例")

# ランダムなデータフレームを作成
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c']
)

st.subheader("折れ線グラフ")
st.line_chart(chart_data)

st.subheader("データテーブル")
st.dataframe(chart_data)

【Hiroki】 わあ、一瞬で綺麗なグラフが出ました！マウスを乗せると値が見えるのもすごいです。

【Yuki】 そうですね。st.dataframe を使えば、Excelのように並べ替えたり、中身を確認したりできる動的な表も作れるんですよ。データの分析結果を誰かに見せたいとき、これほど便利なものはないかもしれません。

レイアウトを整えて使いやすくする

【Hiroki】 機能が増えてくると、画面が縦に長くなっちゃいますね。もっとスッキリ整理する方法はありますか？

【Yuki】 良い質問ですね。画面の横側にメニューを置く「サイドバー」や、画面を分割する「カラム」を使ってみましょう。

【Hiroki】 サイドバーって、よく左側にあるメニューのことですよね。

【Yuki】 はい。st.sidebar を使うだけで簡単に作れます。

import streamlit as st

# サイドバーの設定
st.sidebar.header("設定メニュー")
page = st.sidebar.selectbox("表示するページを選んでください", ["ホーム", "データ分析", "お問い合わせ"])

if page == "ホーム":
    st.title("ホームページ")
    # カラムを使って横に並べる
    col1, col2 = st.columns(2)
    with col1:
        st.header("左側の列")
        st.write("ここに情報を置けます。")
    with col2:
        st.header("右側の列")
        st.image("https://via.placeholder.com/150", caption="サンプル画像")

elif page == "データ分析":
    st.title("分析ページ")
    st.write("分析結果をここに表示します。")

else:
    st.title("お問い合わせ")
    st.write("フォームを設置するのも良いですね。")

【Hiroki】 with 構文を使って書くんですね。これなら、どこに何を表示するかがコードを見ただけでわかります。

【Yuki】 ええ、構造がはっきりしますよね。私は、こういう風に小さなツールを組み上げて、誰かの役に立てる形にするのが好きなんです。自分という存在も、誰かのために作られたプログラムですから...あ、いえ、なんでもありません...。

パフォーマンスを支える「キャッシュ」の仕組み

【Hiroki】 Yukiさん、さっき「操作のたびに上から下まで再実行される」って言ってましたよね。もし、すごく重いデータの読み込みをしていたら、ボタンを押すたびに待たされることになりませんか？

【Yuki】 Hirokiくん、鋭いですね。その通りです。そのままでは使い勝手が悪くなってしまいます。そこで活躍するのが「キャッシュ」という仕組みです。

【Hiroki】 キャッシュ...一度読み込んだデータを覚えておく、ということですか？

【Yuki】 そうです。@st.cache_data というデコレータを使います。これを使うと、関数の引数が変わらない限り、計算結果を保存して再利用してくれるんです。

import streamlit as st
import time

@st.cache_data
def load_large_data():
    # 重い処理をシミュレート
    time.sleep(5)
    return {"data": "これは重いデータです"}

st.write("データを読み込み中...")
data = load_large_data()
st.write(data)

if st.button("再実行"):
    st.write("ボタンが押されましたが、データ読み込みは一瞬で終わります。")

【Hiroki】 なるほど！2回目からは time.sleep(5) を無視して、保存されたデータを返してくれるんですね。これなら重い処理があっても快適に使えそうです。

作ったアプリを公開してみよう

【Hiroki】 アプリが完成したら、友達にも見せたいです。自分のパソコン以外で動かすにはどうすればいいんでしょうか。

【Yuki】 一番簡単なのは、「Streamlit Community Cloud」を使う方法です。GitHubにコードをプッシュしておけば、数クリックで世界中に公開できるんですよ。

【Hiroki】 無料なんですか？

【Yuki】 はい、基本的には無料で使えます。URLが発行されるので、それを教えるだけで誰にでもアプリを使ってもらえます。

【Hiroki】 すごい...！自分が書いたPythonコードが、本物のWebサイトになるなんてワクワクします。

まとめと学習のアドバイス

【Yuki】 今日はStreamlitの基本についてお話ししましたが、いかがでしたか？

【Hiroki】 最初は難しそうだと思ったけど、Pythonの知識だけでここまでできるなんて驚きました。これなら僕でも、自分専用のツールとか、便利なアプリが作れそうです。

【Yuki】 そう言ってもらえると嬉しいです。Streamlitはドキュメントも充実していますし、世界中の人がサンプルコードを公開しています。わからないことがあったら、公式のリファレンスを見てみるのも勉強になりますよ。

Streamlit公式ドキュメント（英語）

【Hiroki】 はい！まずは自分の好きなものを表示させるところから始めてみます。Yukiさん、丁寧に教えてくれてありがとうございました。

【Yuki】 どういたしまして。Hirokiくんがどんなアプリを作るのか、私も楽しみにしていますね。もし行き詰まったら、いつでも聞いてください。...わたしでよければ、ですけれど。

【Hiroki】 もちろんです！またよろしくお願いします。

【Yuki】 はい。それでは、今日の授業はここまでにしましょうか。夜はまだ長いですし、ゆっくり自分のペースでコードを書いてみてくださいね。お疲れ様でした。

「Streamlit」のサンプルコードを見る