Streamlit buttonとは？検索意図に答える結論
「Streamlit button」で検索しているあなたは、おそらく「Pythonで簡単にWebアプリを作れるStreamlitで、ボタンってどうやって実装するの？」という疑問を持っているのではないでしょうか。結論から言うと、Streamlitのボタンはst.button()というたった1行の関数で実装でき、クリックされた瞬間にTrueを返す仕組みになっています。HTMLやCSS、JavaScriptを一切書かずに、インタラクティブなUIをPythonだけで作れるのが最大の魅力です。
この記事では、Streamlit buttonの基本構文から、押されたときの処理、状態管理、レイアウト、よくあるつまずきポイントまでを、初心者の方にもわかりやすく解説していきます。読み終わるころには、あなたも自分のアプリにボタンを自由に配置できるようになるはずです。
Streamlit buttonの基本｜st.button()の使い方
Streamlitでボタンを作るには、st.button()を使います。もっともシンプルなコードは次のとおりです。
import streamlit as st
if st.button("クリックしてね"):
st.write("ボタンが押されました！")
このコードを実行すると、ブラウザ上に「クリックしてね」というラベルのボタンが表示されます。ユーザーがボタンを押すとst.button()がTrueを返し、if文の中の処理が実行されるという流れです。ボタンが押されていないときはFalseを返すので、何も起こりません。
Streamlitの公式サイトでは「Adding a widget is the same as declaring a variable（ウィジェットの追加は変数の宣言と同じ）」と説明されています。つまり、ボタンも変数のように扱えるというわけですね。この考え方に慣れると、直感的にUIを組み立てられるようになります。
ボタンのラベルと戻り値の基本
st.button()の第一引数には、ボタンに表示するラベル（文字列）を指定します。戻り値はブール値（True/False）で、クリックされたかどうかを判定できます。たとえば、次のように書けばボタンの状態を変数に保持できます。
clicked = st.button("送信")
if clicked:
st.success("送信しました")
このように、戻り値を変数に入れておくと、後続の処理で使いやすくなります。
Streamlit buttonの主なオプションとカスタマイズ
st.button()には、見た目や動作を調整するためのオプションがいくつか用意されています。ここでは代表的なものを紹介します。
- help: ボタンにマウスを乗せたときに表示されるツールチップのテキスト
- type: 「primary」または「secondary」を指定してボタンのスタイルを変更（primaryは目立つ色）
- disabled: Trueにするとボタンが無効化され、クリックできなくなる
- use_container_width: Trueにするとボタンが親コンテナの幅いっぱいに広がる
- key: ウィジェットを一意に識別するためのキー。同じラベルのボタンを複数配置するときに必須
たとえば、目立たせたいボタンにはtype="primary"を指定します。
st.button("今すぐ登録", type="primary")
また、条件によってボタンを押せなくしたい場合はdisabledを活用します。
agree = st.checkbox("利用規約に同意する")
st.button("次へ", disabled=not agree)
このように、オプションを組み合わせることでユーザー体験を向上させられます。
ボタンクリック時の処理と状態管理のコツ
Streamlitはスクリプトが上から下へ実行される「スクリプト実行モデル」を採用しています。そのため、ボタンが押されるたびにスクリプト全体が再実行される点に注意が必要です。この特性を理解していないと、「ボタンを押したのに値がリセットされる」といった問題に直面します。
状態を保持したい場合は、st.session_stateを利用します。たとえば、ボタンを押した回数をカウントするには次のように書きます。
if "count" not in st.session_state:
st.session_state.count = 0
if st.button("カウントアップ"):
st.session_state.count += 1
st.write(f"現在のカウント: {st.session_state.count}")
このように、st.session_stateを使えば再実行されても値を保持できます。ボタンと状態管理は切っても切れない関係なので、ぜひマスターしておきましょう。
コールバック関数を活用する
st.button()にはon_click引数でコールバック関数を指定できます。ボタンが押されたときに特定の関数を実行したい場合に便利です。
def handle_click():
st.session_state.count += 1
st.button("カウントアップ", on_click=handle_click)
コールバックを使うと、処理の流れが整理しやすくなります。
複数ボタンの配置とレイアウト
アプリによっては、複数のボタンを横並びにしたり、グリッド状に配置したいこともあるでしょう。Streamlitではst.columns()を使って簡単に横並びを実現できます。
col1, col2 = st.columns(2)
with col1:
if st.button("左のボタン"):
st.write("左が押されました")
with col2:
if st.button("右のボタン"):
st.write("右が押されました")
また、st.container()やst.expander()を使えば、ボタンをグループ化して整理できます。レイアウトを工夫することで、ユーザーが迷わないUIを作れます。
ボタンのキーを正しく設定する
同じラベルのボタンを複数配置する場合は、keyを明示的に指定しないとエラーになります。たとえば、次のようにします。
st.button("削除", key="delete_1")
st.button("削除", key="delete_2")
キーはウィジェットごとに一意である必要があります。動的にボタンを生成する場合も、インデックスなどを付けて重複を避けましょう。
Streamlit buttonのメリット・デメリット
ここで、Streamlit buttonの良い点と注意点を整理しておきます。
メリット
- Pythonだけで実装できるため、フロントエンドの知識が不要
- コード量が非常に少なく、直感的に書ける
- リアルタイムで画面が更新される
- 公式ドキュメントやコミュニティが充実している
デメリット・注意点
- スクリプト再実行の仕組みを理解しないと、意図しない動作になる
- 細かいデザイン調整はCSSを別途注入する必要がある
- 大規模なアプリには向かない場合がある
- ボタンの連打や二重送信への対策は自分で実装する必要がある
これらの特性を踏まえて、小〜中規模のデータアプリやプロトタイプ作成に活用するのがおすすめです。
よくあるつまずきポイントと解決策
初心者がStreamlit buttonでつまずきやすいポイントをいくつか挙げます。
- ボタンを押しても何も起こらない:
if st.button()の条件式が正しく書かれているか確認しましょう。 - 値がリセットされる:
st.session_stateを使っていない可能性があります。 - 同じラベルのボタンでエラー:
keyを指定して一意にしましょう。 - ボタンの見た目を変えたい:
typeオプションやCSSで対応できます。
公式ドキュメントの「Weave in interaction」のセクションも参考にしながら、少しずつ試してみてください。
まとめ｜Streamlit buttonを使いこなしてインタラクティブなアプリを作ろう
今回は「Streamlit button」の基本から応用までを解説しました。ポイントを振り返ると、以下のとおりです。
st.button()で簡単にボタンを実装できる- オプションで見た目や動作をカスタマイズできる
st.session_stateで状態を保持するst.columns()でレイアウトを整える- スクリプト再実行の特性を理解することが重要
StreamlitはPythonだけでWebアプリを作れる強力なフレームワークです。ボタンをマスターすれば、ユーザーとの対話的なアプリがぐっと作りやすくなります。ぜひ自分のプロジェクトで試してみてくださいね。
コメント