💡

Streamlit初心者向けガイド：データアプリケーション開発の第一歩

2024/07/17に公開

※本記事は生成AIを活用しました。

1. はじめに

Streamlitは、データサイエンティストやエンジニアにとって、データ分析結果を簡単に共有できるウェブアプリケーションを作成するための強力なツールです。このガイドでは、Streamlitの基礎から応用まで、ステップバイステップで解説していきます。

プログラミング初心者からデータサイエンスの専門家まで、誰もがStreamlitを使って素晴らしいデータアプリケーションを作成できるようになることを目指しています。

2. Streamlitとは

Streamlitは、Pythonベースのオープンソースフレームワークで、データサイエンスやAIの成果を手軽にウェブアプリケーションにすることができます。以下の特徴があります：

シンプルな文法: 複雑なウェブ開発の知識なしで、Pythonのスクリプトを書くような感覚でアプリケーションを作成できます。
リアルタイムの更新: コードを保存するたびに、アプリケーションが自動的に更新されます。
豊富なコンポーネント: グラフ、チャート、ウィジェットなど、データ可視化に必要な要素が豊富に用意されています。
柔軟なカスタマイズ: HTMLやCSSの知識があれば、さらに高度なカスタマイズも可能です。

Streamlitを使うことで、データサイエンティストやエンジニアは、フロントエンド開発に時間を割くことなく、データ分析やモデル開発に集中できるようになります。

3. 環境設定

Streamlitを始めるには、まず適切な環境を設定する必要があります。以下の手順に従って、環境を整えましょう。

3.1 Pythonのインストール

Streamlitを使用するには、Python 3.7以上が必要です。まだPythonをインストールしていない場合は、公式サイトからダウンロードしてインストールしてください。

3.2 Streamlitのインストール

仮想環境を有効化した状態で、以下のコマンドを実行してStreamlitをインストールします：

pip install streamlit

3.3 インストールの確認

インストールが成功したかどうかを確認するために、以下のコマンドを実行します：

streamlit hello

このコマンドにより、Streamlitのデモアプリケーションが起動します。ブラウザが自動的に開き、デモアプリが表示されるはずです。

4. 最初のStreamlitアプリケーション

環境設定が完了したら、最初のStreamlitアプリケーションを作成しましょう。以下の手順に従って、シンプルなアプリケーションを作成します。

4.1 アプリケーションの作成

新しいPythonファイルを作成し、hello_streamlit.pyという名前で保存します。
以下のコードを入力します：

import streamlit as st

st.title('My First Streamlit App')
st.write('Welcome to the world of Streamlit!')

name = st.text_input('Enter your name')
if name:
    st.write(f'Hello, {name}!')

4.2 アプリケーションの実行

ターミナルで以下のコマンドを実行し、アプリケーションを起動します：

streamlit run hello_streamlit.py

ブラウザが自動的に開き、作成したアプリケーションが表示されます。

4.3 コードの解説

import streamlit as st: Streamlitライブラリをインポートし、stという別名で使用します。
st.title(): ページのタイトルを設定します。
st.write(): テキストを画面に表示します。
st.text_input(): テキスト入力フィールドを作成します。
条件文: 入力された名前がある場合、挨拶文を表示します。

このシンプルな例でも、Streamlitの基本的な機能を使用しています。ユーザー入力を受け取り、その結果に基づいて動的にコンテンツを更新する、インタラクティブなアプリケーションを簡単に作成できました。

5. 基本的なウィジェット

Streamlitには、ユーザーとのインタラクションを可能にする様々なウィジェットが用意されています。ここでは、よく使用される基本的なウィジェットをいくつか紹介します。

5.1 テキスト入力 (st.text_input)

ユーザーからテキストを入力してもらうためのウィジェットです。

name = st.text_input('Enter your name', 'John Doe')
st.write(f'Hello, {name}!')

5.2 数値入力 (st.number_input)

数値を入力するためのウィジェットです。最小値、最大値、ステップ値を設定できます。

age = st.number_input('Enter your age', min_value=0, max_value=120, value=30)
st.write(f'You are {age} years old.')

5.3 スライダー (st.slider)

範囲内の値を選択するためのスライダーウィジェットです。

weight = st.slider('Select your weight', 40.0, 150.0, 70.0)
st.write(f'Your weight is {weight} kg.')

5.4 セレクトボックス (st.selectbox)

ドロップダウンリストから選択肢を選ぶためのウィジェットです。

color = st.selectbox('Choose your favorite color', ['Red', 'Green', 'Blue'])
st.write(f'Your favorite color is {color}.')

5.5 チェックボックス (st.checkbox)

True/Falseの値を選択するためのチェックボックスです。

if st.checkbox('Show advanced options'):
    st.write('You enabled advanced options.')

5.6 ラジオボタン (st.radio)

複数の選択肢から一つを選ぶためのラジオボタンです。

season = st.radio('What is your favorite season?', ('Spring', 'Summer', 'Autumn', 'Winter'))
st.write(f'You like {season}.')

5.7 複数選択 (st.multiselect)

複数の項目を選択できるウィジェットです。

fruits = st.multiselect('What fruits do you like?', ['Apple', 'Banana', 'Cherry', 'Date'])
st.write(f'You like: {", ".join(fruits)}')

5.8 日付選択 (st.date_input)

日付を選択するためのカレンダーウィジェットです。

import datetime
date = st.date_input('Select a date', datetime.date(2023, 7, 6))
st.write(f'You selected: {date}')

5.9 時間選択 (st.time_input)

時間を選択するためのウィジェットです。

time = st.time_input('Set an alarm for', datetime.time(8, 45))
st.write(f'Alarm is set for {time}')

これらのウィジェットを組み合わせることで、ユーザーフレンドリーで対話的なアプリケーションを作成することができます。各ウィジェットの返り値を変数に格納し、その値を使って処理を行ったり、表示内容を変更したりすることができます。

6. データの表示

Streamlitは、様々な形式のデータを簡単に表示することができます。ここでは、テキスト、表、データフレームの表示方法を学びます。

6.1 テキストの表示

Streamlitには、異なるレベルのテキストを表示するための関数があります。

st.title('This is a title')
st.header('This is a header')
st.subheader('This is a subheader')
st.text('This is plain text')
st.markdown('This is **markdown**')
st.code('print("Hello, Streamlit!")', language='python')

6.2 表（Table）の表示

シンプルな表を表示するには st.table() を使用します。

import pandas as pd

data = {
    'Name': ['John', 'Anna', 'Peter', 'Linda'],
    'Age': [28, 34, 29, 32],
    'City': ['New York', 'Paris', 'Berlin', 'London']
}
df = pd.DataFrame(data)
st.table(df)

6.3 データフレームの表示

データフレームを対話的に表示するには st.dataframe() を使用します。これにより、ソート、フィルタリング、ページネーションが可能になります。

st.dataframe(df)

さらに、スタイリングを追加することもできます：

st.dataframe(df.style.highlight_max(axis=0))

6.4 メトリクスの表示

重要な数値を強調表示するには st.metric() を使用します。

st.metric(label="Temperature", value="28°C", delta="1.2°C")

6.5 JSONの表示

JSON形式のデータを表示するには st.json() を使用します。

st.json({
    'foo': 'bar',
    'baz': 'boz',
    'stuff': [
        'stuff 1',
        'stuff 2',
        'stuff 3',
        'stuff 5',
    ],
})

6.6 コードの表示

コードブロックを表示するには st.code() を使用します。

code = '''def hello():
    print("Hello, Streamlit!")'''
st.code(code, language='python')

6.7 LaTeX数式の表示

LaTeX形式の数式を表示するには st.latex() を使用します。

st.latex(r'''
    a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
    \sum_{k=0}^{n-1} ar^k =
    a \left(\frac{1-r^{n}}{1-r}\right)
    ''')

これらの表示方法を組み合わせることで、データを効果的に可視化し、ユーザーに分かりやすく情報を提示することができます。Streamlitの強みは、これらの表示方法を数行のコードで実現できる点にあります。

7. グラフとチャート

Streamlitは、データの可視化を簡単に行うための多くの機能を提供しています。ここでは、よく使用されるグラフとチャートの作成方法を紹介します。

7.1 折れ線グラフ

st.line_chart() を使用して、簡単に折れ線グラフを作成できます。

import numpy as np
import pandas as pd

chart_data = pd.DataFrame(
     np.random.