Streamlitコンポーネント入門

Name

Olaf Källström

Published on 2023/7/24

(opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab)

Streamlitは、データサイエンティストや開発者が機械学習とデータサイエンスのための対話型で使いやすいウェブアプリケーションを作成するための強力なオープンソースライブラリです。これらのアプリケーションの中心には、ユーザーが操作し、相互作用することができるようにする一連の対話型ウィジェットであるStreamlitコンポーネントがあります。

Streamlitコンポーネントは、Streamlitアプリケーションの構築要素です。これらはユーザーインターフェースを提供し、さまざまな方法でアプリケーションと対話できるようにします。シンプルなボタンやチェックボックスからより複雑なフォームやテーブルまで、Streamlitコンポーネントは対話型でダイナミックなデータサイエンスアプリケーションを作成するための幅広い可能性を提供します。

Streamlit AppをTableauのように変換する素晴らしいデータ分析＆データ可視化ツールを聞いたことがありますか？

PyGWalker (opens in a new tab)は、あなた自身のStreamlitアプリに簡単にTableauのようなUIを組み込むのを助けるPythonライブラリです。 このパワフルなデータ可視化のPythonライブラリを使用して、あなたのStreamlitアプリを強化するための詳細な手順を示した、Coding is FunのSvenによる素晴らしいビデオ (opens in a new tab)をご覧ください！

PyGWalkerコミュニティへのSvenと彼の素晴らしい貢献 (opens in a new tab)に特別な感謝を申し上げます！

さらに、PyGWalker GitHubページ (opens in a new tab)でもPyGWalkerのさらなる例を確認することもできます。

Streamlitの対話型ウィジェット

Streamlitでは、ウィジェットがユーザーインタラクションの主な手段です。これにより、ユーザーはデータを入力したり、選択したり、アプリケーションの動作を制御したりすることができます。Streamlitでは、ボタン、チェックボックス、テキスト入力、スライダーなど、さまざまなウィジェットが提供されます。各ウィジェットは特定の目的に合わせてカスタマイズ可能です。

Streamlitのウィジェットはユーザー入力だけでなく、データやその他の情報の表示にも使用することができます。たとえば、テーブルウィジェットはデータフレームを表示するために使用され、マークダウンウィジェットは書式設定されたテキストを表示するために使用されます。この柔軟性により、ウィジェットは対話型でダイナミックなデータサイエンスアプリケーションを作成するための強力なツールとなります。

Streamlitコンポーネントの詳細

Streamlitボタン

Streamlitボタンはシンプルでありながら強力なコンポーネントです。ユーザーはスクリプトを実行したり表示を更新したりするなど、アプリケーションでアクションをトリガーすることができます。ボタンコンポーネントはst.button関数を使用して定義されます。この関数にはボタンのラベルのための文字列引数が必要です。

import streamlit as st
 
if st.button('クリックしてください'):
    st.write('ボタンがクリックされました！')

この例では、「クリックしてください」というラベルのボタンがクリックされた場合、画面に「ボタンがクリックされました！」というメッセージが表示されます。このシンプルなメカニズムは、より複雑なアクションをトリガーするために使用することができ、ボタンはStreamlitアプリケーションで多目的に使用できるコンポーネントです。

Streamlitコラム

Streamlitのコラムを使用すると、アプリケーションのレイアウトをより効果的に整理することができます。st.columns関数を使用すると、アプリケーションを複数のコラムに分割し、それぞれのコラムに異なるコンポーネントを配置することができます。

import streamlit as st
 
col1, col2 = st.columns(2)
 
with col1:
    st.write('これはコラム1です')
 
with col2:
    st.write('これはコラム2です')

この例では、アプリケーションが2つのコラムに分割されています。最初のコラムには「これはコラム1です」というテキストが表示され、2番目のコラムには「これはコラム2です」と表示されます。これにより、より複雑なレイアウトを作成し、アプリケーションのユーザーエクスペリエンスを向上させることができます。

Streamlitフォーム

Streamlitフォームは、関連する入力ウィジェットをグループ化し、その値を一度に送信する方法です。これは複数の入力を一度に送信する必要がある場合に特に便利です。

import streamlit as st
 
with st.form(key='my_form'):
    text_input = st.text_input(label='テキストを入力してください')
    submit_button = st.form_submit_button(label='送信')

この例では、テキスト入力フィールドと送信ボタンを持つフォームが作成されています。送信ボタンがクリックされると、フォーム内のすべての入力が一緒に送信されます。

Streamlitテーブル

Streamlitテーブルは、データを構造化された形式で表示する方法を提供します。st.table関数を使用して、データフレームまたは辞書を入力としてテーブルを作成することができます。

import streamlit as st
import pandas as pd
 
data = {'Name': ['John', 'Anna', 'Peter'],
        'Age': [28, 23, 35]}
 
df = pd.DataFrame(data)
 
st.table(df)

この例では、pandasライブラリを使用してデータフレームを作成し、Streamlitアプリケーションでテーブルとして表示しています。テーブルはデータを行と列で明確に表示し、ユーザーが理解しやすくなっています。

Streamlitチェックボックス

Streamlitチェックボックスは、ユーザーが2つのオプションを切り替えることができるコンポーネントです。追加情報の表示や非表示など、アプリケーションの動作を制御するために使用することができます。チェックボックスコンポーネントはst.checkbox関数を使用して定義されます。この関数にはチェックボックスのラベルのための文字列引数が必要です。

import streamlit as st
 
if st.checkbox('詳細を表示する'):
st.write('以下は詳細です...')

この例では、「詳細を表示」というチェックボックスがチェックされたときに、「以下は詳細です...」というメッセージが画面に表示されます。この機構は、ユーザーの好みに基づいて追加情報の表示を制御するために使用することができます。

Streamlit テキスト入力

Streamlit テキスト入力は、ユーザーが一行のテキストを入力できるコンポーネントです。検索クエリやフォームの回答など、ユーザーの入力を取得するために使用することができます。テキスト入力コンポーネントは、入力ラベルのための文字列引数を取る st.text_input 関数を使用して定義されます。

import streamlit as st
 
title = st.text_input('映画のタイトル', 'Life of Brian')
st.write('現在の映画のタイトルは', title)

この例では、「映画のタイトル」というラベルのテキスト入力フィールドが、「Life of Brian」というデフォルトの値で作成されています。テキスト入力フィールドの値は、アプリケーション内でアクセスして使用することができます。現在の映画のタイトルを表示するメッセージによって示されています。

Streamlit マークダウン

Streamlit マークダウンは、Markdown 構文に従って書式設定されたテキストを表示するためのコンポーネントです。見出し、太字や斜体のテキスト、リスト、リンクなどを表示するために使用することができます。マークダウンコンポーネントは、Markdown 形式のテキストを含む文字列引数を取る st.markdown 関数を使用して定義されます。

import streamlit as st
 
st.markdown('##これは見出しです')
st.markdown('これは **太字** のテキストです')

この例では、見出しと太字のテキストが Markdown 構文を使用して表示されています。これにより、Streamlit アプリケーション内で豊かな書式のテキストを作成することができます。

Streamlit マルチセレクト

Streamlit マルチセレクトは、ユーザーがリストから複数のオプションを選択できるコンポーネントです。データのフィルタリングや情報の表示の制御などに使用することができます。マルチセレクトコンポーネントは、入力ラベルのための文字列引数とオプションのリストを取る st.multiselect 関数を使用して定義されます。

import streamlit as st
 
options = st.multiselect(
    'お気に入りの色を選んでください',
    ['緑', '黄色', '赤', '青'],
    ['黄色', '赤']
)
st.write('選択した色:', options)

この例では、「お気に入りの色を選んでください」というラベルのマルチセレクトフィールドが、四つのオプションとともに作成されています。ユーザーは複数のオプションを選択でき、選択したオプションは画面に表示されます。

Streamlit コンテナ

Streamlit コンテナは、関連するコンポーネントをグループ化するための方法です。より複雑なレイアウトを作成し、コンポーネントの表示をより整理された形で管理するために使用することができます。コンテナコンポーネントは、引数を取らない st.container 関数を使用して定義されます。

import streamlit as st
 
with st.container():
    st.write('これはコンテナの内部です')
    st.button('クリックしてください')

この例では、テキストとボタンのコンポーネントを含むコンテナが作成されています。コンテナ内のコンポーネントは一緒に表示され、より複雑なレイアウトを作成し、アプリケーションの組織化を改善することができます。

Streamlit コンポーネントの使用に関するベストプラクティス

Streamlit コンポーネントをアプリケーションに組み込む際には、最適なパフォーマンスとユーザーエクスペリエンスを確保するために特定のベストプラクティスに従うことが重要です。以下に考慮すべき重要なポイントをいくつか示します。

• ユーザーエクスペリエンス: 常にユーザーエクスペリエンスを優先しましょう。コンポーネントを直感的な方法で整理し、明確なラベルと指示を提供します。これにより、ユーザビリティが向上し、各コンポーネントにコンテキストが追加されます。

## グッドプラクティス: 明確なラベルと指示
st.markdown('### あなたの詳細を入力してください')
name = st.text_input('名前')
email = st.text_input('メールアドレス')

• パフォーマンス: コンポーネントの潜在的なパフォーマンスへの影響に注意しましょう。一部のコンポーネント、例えばフォームやテーブルはリソースを多く消費する可能性があり、適切に使用しないとアプリケーションの速度が低下する可能性があります。コンポーネントを最適化し、スムーズかつ応答性のあるユーザーエクスペリエンスを維持するために、適度に使用するように心がけましょう。

## バッドプラクティス: 大きなテーブル
st.table(大きなデータフレーム)
 
## グッドプラクティス: ページネーションされた最適化されたテーブル
for i in range(0, len(大きなデータフレーム), 100):
    st.table(大きなデータフレーム[i:i+100])

• テスト: コンポーネントを徹底的にテストするようにしましょう。それらは期待どおりに動作し、ユーザーの入力を適切に処理する必要があります。これにはエッジケースのテストやエラーの適切な処理も含まれます。

## グッドプラクティス: エラー処理
try:
    result = some_function(ユーザーの入力)
except SomeError as e:
    st.error(f'エラーが発生しました: {e}')

Streamlit コンポーネントの実践的な応用例

Streamlit コンポーネントは、相互作用とユーザーエンゲージメントを高めるために、さまざまな実世界のアプリケーションで使用されています。いくつかの例をご紹介します。

• データサイエンス: Streamlit コンポーネントは、インタラクティブなダッシュボードやデータ探索ツールを作成するためによく使用されます。スライダー、チェックボックス、ドロップダウンを使用してデータをフィルタリングおよび操作し、テーブルやグラフを使用して結果を表示することができます。

## 例: データ探索ツール
selected_data = data[st.multiselect('列を選択してください', data.columns)]
st.line_chart(selected_data)

• 機械学習: Streamlit コンポーネントは、対話型のモデル探索ツールの作成に使用されます。ユーザーはパラメータを入力し、モデルを実行し、結果を同じアプリケーション内で表示することができます。これにより、機械学習モデルを理解し解釈することが容易になります。

## 例: モデル探索ツール
params = st.sidebar.slider('モデルパラメータ', 0, 10)
model = train_model(params)
st.write('モデルスコア:', model.score(X, y))

• ウェブ開発: Streamlit コンポーネントは、動的でインタラクティブなウェブアプリケーションを作成するために使用されます。シンプルなフォームやボタンから複数のコンテナを持つ複雑なレイアウトまで、Streamlit コンポーネントは魅力的なウェブ体験を作成するための幅広い可能性を提供します。

## 例: ウェブアプリケーション
with st.container():
st.header('私のアプリへようこそ！')
if st.button('クリックしてください'):
    st.balloons()

これらのすべてのアプリケーションでは、Streamlitのコンポーネントを使用して、ユーザーエクスペリエンスを向上させ、アプリケーションをよりインタラクティブにし、ユーザーがデータと意味のある方法で関わることができるようにすることが重要です。

Streamlitコンポーネントの実世界での応用

Streamlitコンポーネントは、さまざまな実世界のアプリケーションで使用されています。たとえば、データサイエンスでは、インタラクティブなダッシュボードやデータ探索ツールの作成によく使用されます。ユーザーはスライダーやチェックボックス、ドロップダウンを使用してデータをフィルタリングしたり操作したりすることができ、テーブルやチャートで結果を表示することができます。

• 機械学習では、Streamlitコンポーネントを使用して、インタラクティブなモデル探索ツールが作成されます。ユーザーはパラメータを入力し、モデルを実行し、結果を同じアプリケーション内で表示することができます。これにより、機械学習モデルを理解し解釈することがより容易になります。

• ウェブ開発では、Streamlitコンポーネントを使用して、動的でインタラクティブなウェブアプリケーションを作成します。単純なフォームやボタンから、複数のコンテナを持つ複雑なレイアウトまで、Streamlitコンポーネントは魅力的なウェブ体験を作成するためのさまざまな可能性を提供しています。

これらのすべてのアプリケーションでは、Streamlitのコンポーネントを使用して、ユーザーエクスペリエンスを向上させ、アプリケーションをよりインタラクティブにし、ユーザーがデータと意味のある方法で関わることができるようにすることが重要です。

結論

Streamlitコンポーネントは、インタラクティブなデータサイエンスアプリケーションの構築の基盤です。シンプルなボタンやチェックボックスから複雑なフォームやテーブルまで、動的で魅力的なユーザーインターフェースを作成するためのさまざまな可能性を提供しています。これらのコンポーネントを理解し効果的に使用することで、ユーザーはデータと意味のある方法で相互作用できるパワフルなアプリケーションを作成することができます。

インタラクティブなダッシュボードを作成したいデータサイエンティスト、モデル探索ツールを作成したい機械学習エンジニア、動的なウェブアプリケーションを作成したいウェブ開発者であっても、Streamlitコンポーネントを使用することで必要なものが全て揃っています。常にユーザーエクスペリエンスを考慮し、パフォーマンスに注意し、コンポーネントを徹底的にテストすることを忘れないでください。これらのベストプラクティスを心に留めながら、Streamlitコンポーネントの習得に向けて着実に進んでいきましょう。

StreamlitアプリケーションをTableauのような優れたデータ分析・データビジュアリゼーションツールに変えるという素晴らしいツールを聞いたことがありますか？

PyGWalker (opens in a new tab)は、あなた自身のStreamlitアプリに簡単にTableauのようなUIを組み込むのを助けるPythonライブラリです。

(opens in a new tab)

よくある質問

1. Streamlitの欠点は何ですか？

Streamlitは、インタラクティブなデータサイエンスアプリケーションの構築には強力なツールですが、いくつかの制限があります。たとえば、複雑なマルチページアプリケーションの作成には適しておらず、ユーザー認証やセッション管理のサポートもデフォルトでは提供していません。また、Streamlitはサーバーサイドで動作するため、大量のデータや複雑な計算に対しては、クライアントサイドのJavaScriptアプリケーションほど応答性が高くない場合があります。

2. Streamlitアプリの構造はどのようになっていますか？

Streamlitアプリは「スクリプトの実行」という概念を中心に構築されています。ユーザーがウィジェットと対話すると、スクリプト全体が上から下に再実行されます。これにより、コードはシンプルかつ直線的になり、従来のPythonスクリプトのようになります。ただし、コードを構造化するために関数やクラスを使用したり、長時間実行される計算の結果をキャッシュして不要な再実行を防ぐためにst.cacheデコレータを使用したりすることもできます。

3. Streamlitアプリのパフォーマンスを最適化する方法はありますか？

Streamlitアプリのパフォーマンスを最適化する方法はいくつかあります。1つは、長時間実行される計算の結果をキャッシュするためにst.cacheデコレータを使用することです。もう1つは、st.beta_columns関数を使用して複数の列を作成し、コンポーネントのレンダリングを並列化することです。また、st.experimental_memo関数を使用して関数呼び出しをメモ化し、不要な再計算を回避することもできます。最後に、データのサイズや計算の複雑さに注意し、必要に応じてよりパワフルなサーバーを使用することも検討してください。