【Python Webアプリ】基本が全てわかる！StreamlitでWebアプリ作成

概要
解説

概要

前回から引き続きStreamlitの解説をしてゆきます
前回はStreamlitの概要、Streamlit以外のWebフレームワークとの比較、環境構築について解説しました
今回はいよいよStreamlitの開発に進んでゆきます
この記事では、Streamlit開発に必要な基本的な概念について把握することができます
具体的には、streamlitの起動方法、自動リロードの設定、データの表示方法、ウィジェットについて、
レイアウト、テーマ、キャッシュについて、複数ページの作り方について解説します
それでは早速解説を開始します

↓Lesson 4にStreamlitの作り方が乗っています

今日からできる！ Python業務効率化スキルが身につく本【電子書籍】[ いまにゅ ]

楽天Kobo電子書籍ストア

¥2,420 （2025/03/20 01:49時点 | 楽天市場調べ）

Amazon

＼楽天ポイント4倍セール！／

楽天市場

Yahooショッピング

ポチップ

解説

streamlitの起動方法

まずはstreamlitの起動方法について解説します
適当な名前の.pyファイルを作成します

ファイルをエディタで開き、import streamlit as stと”hello world”を記入します
そして、streamlit run <スクリプト名>.pyで起動することができます

ブラウザが起動し、hello worldと表示されました。これでstreamlitが起動しているのがわかります
streamlitの起動方法については以上です

自動リロード

次は開発に便利な設定を紹介します
開発は基本的に、ソースコードを編集し、ブラウザをリロードして編集した部分が正しく作られているか確認するという流れになります
しかし、ソースコードを編集するたびにブラウザを毎回リロードするのはやや面倒です。
ソースコードを編集すると自動的にリロードが行われる設定にしておきましょう

streamlitを起動すると右上にハンバーガーメニューがあります。
これをクリックするとメニューが表示されるので、さらにSettingsをクリックします

すると、メニューが表示されるので、この中のRun on saveという項目にチェックボックスを付けます
そうするとソースコードを編集してファイルを保存するたびに変更が反映されるようになります。
こうすることで開発を効率的にすることができます

データの表示方法

次に、データの表示方法について学びましょう
データを表示する方法は二種類存在します
一つはマジックコマンドを使用する方法、もう一つはwriteメソッドを使用する方法です。

マジックコマンドを利用する方法

ではまず、マジックコマンドを利用する方法について解説しましょう
ここではpandasのデータを表示してみます

まずはimport pandas as pdでpandasライブラリを読み込みます
pd.DataFrameの引数にデータを与えてデータフレームを初期化し、df変数に代入します
dfとだけ入力された行を記載します

ブラウザを見てみるとデータフレームの内容が表示されているのがわかります
この変数だけの行がマジックコマンドです。
Streamlitでは変数や値だけの行を画面に表示すべきものだと解釈します
以上がマジックコマンドを利用した場合のデータ表示方法です

writeメソッドを利用した場合のデータ表示

続いて、writeメソッドを利用した場合のデータ表示について解説します
st.writeでは引数に与えられたデータを画面に表示することができます

試しにst.writeの引数にDataframeを入力してみましょう

ブラウザで確認するとこの方法でもデータが表示されているのがわかるでしょう

writeメソッドについて一つ補足をすると
writeメソッドは与えられたデータの型を推測し、自動的に適切な形で出力してくれます

しかし、推測された出力が思った通りではない場合は、writeメソッドの代わりのデータ表示用メソッドを使いましょう

例を挙げると、先程Dataframeをwriteメソッドで出力した場合はこのようにインタラクティブな表示となります
これはst.dataframeで出力した場合と同じです

Dataframeはst.tableでも出力できます。先ほどはセルをクリックすると拡大しましたが
こちらを使うと拡大はしなくなります。st.tableを使いたい場合はst.writeではなくst.tabelを使うようにしましょう
以上がwriteメソッドを用いたデータの表示方法です

グラフやマップ

また、Streamlitではデータ以外にグラフやマップを出力することもできます
まずはグラフを出力してみましょう

import numpy as npでnumpyをインポートし、np.random.randnでランダムな値を生成します
生成した値でDataframeを作成し、st.line_chartの引数に渡してみましょう

ブラウザで確認すると、グラフが出力されているのがわかります
グラフの出力については以上です。続いて、マップ上にデータを出力してみましょう

東京の緯度経度である35.6894, 139.6917付近のランダムデータを生成します
生成したデータを引数にDataframeを作成し、st.mapの引数に渡してみましょう

ブラウザで確認すると、マップが表示されていて東京付近にデータがプロットされているのがわかります
以上がマップの表示方法です

ウィジェット

続いて、ウィジェットについて解説しましょう
ウィジェットとはボタンやスライダー、セレクトボックスなどのGUI部品を指します。
ウィジェットを使用することで画面の表示を切り替えることができるようになります
今回はスライダー、ボタン、セレクトボックスについて紹介します

スライダー

まずはスライダーについて解説します
例として、スライダーの値を二倍にして表示してみましょう

x = st.slider(‘x’)と記入します。st.sliderの引数はラベルとして画面に表示されます
代入した変数xにスライダーの値が入るので、st.writeで二倍にした値を表示してみましょう

ブラウザで確認すると、スライダーが表示されているのがわかります。
このスライダーを動かすと、値に応じて表示が変更されているのがわかります
以上がスライダーの解説です

チェックボックス

続いてチェックボックスについて解説します
例として、チェックボックスのオンオフに応じてデータを表示または非表示にしてみましょう

まず、if st.checkboxと入力します。st.checkboxの引数に入力した値がラベルとして表示されます
if文のブロック内に表示したいデータを初期化し、マジックコマンドでデータを表示します

ブラウザで確認すると、最初はチェックボックスノミが表示されていますが、チェックをするとデータが表示されます
チェックボックスをオンにするとst.checkboxの値がtrueになり、if文内のコードが実行されたことでデータが表示されました
以上がチェックボックスの解説です

セレクトボックス

続いて、セレクトボックスについて解説します
セレクトボックスで選択した値を表示してみましょう

option = st.selectboxを記入します。st.selectboxの第一引数がラベルとして表示されます
第二引数がセレクトボックスの選択肢に現れるようになります
セレクトボックスで選んだ値がoption変数に代入されるので、マジックコマンドで表示してみましょう
ブラウザで確認すると、セレクトボックスが表示され、選んだ値に応じて表示が変わることが確認できます
以上がセレクトボックスの解説です

レイアウト

レイアウトに関してはサイドバーとカラムについて解説します

サイドバー

まずはサイドバーについて解説します
st.sidebar.メソッド名でサイドバーにウィジェットを配置することができます

例えばst.sidebar.selectboxならセレクトボックスを、st.sidebar.sliderならスライダーをサイドバーに配置することができます

ブラウザで確認すると、サイドバーが作られていることが確認できます
サイドバーについては以上です

カラム

続いてカラムについて解説します
カラムを利用しない場合にはウィジェットは一列に配置されますが
カラムを使用することで複数列にウィジェットを配置できます
試しにカラムを２つ作成し、そこにウィジェットを配置してみましょう

left_column, right_column = st.columns(2)でカラムを作成し、変数に代入します
左のカラムにボタンを配置してみましょう。
left_column.buttonで左のカラムにボタンを配置できます
右のカラムにセレクトボックスを配置し、選択した値によって出力が変更されるようにしてみましょう
先程はleft_column.buttonのように変数のメソッドを用いてウィジェットを配置しましたが、
with文を用いることでもウィジェットを配置可能です
with right_column:で改行し、インデント付きでセレクトボックスの配置と値の出力を行いましょう