[簡単爆速]HTMLファイル要らずのStreamlitで数分でWebアプリを作る

## Streamlitってなんぞ？
`Streamlit`はPythonのオープンソースフレームワークです。
## 今回のゴール
とりあえずは簡単にwebアプリらしいものを作っていきたいと思います。Webアプリを作る上でめんどくさいのが、バックエンドの諸々の処理やHTMLファイルの作成ですが、Streamlitはそれらの作業をする必要が全くないですようです。なんとPythonファイル一つでwebページが作れてしまいます。

#### 追記（2021/10）
StreamliCloudによってデプロイまで簡単にできるようになりました。紹介記事は[こちら](https://qiita.com/Nate0928/items/0b192c903a41d75cb7c6)

## インストール
pipを使ってインストールできます。

```
$ pip install streamlit
```
## デモページの立ち上げ
```
$ streamlit hello 
```
上記のコマンドで http://localhost:8501 からすぐにデモ画面が立ち上がります。
簡単ですね。
![スクリーンショット 2020-05-18 19.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/5a319f31-a7ec-6dce-26a3-69514231a105.png)

## Webページ作成
適当なディレクトリ内にPythonファイルを作ります。ファイル名はなんでもいいですが、今回は公式に則って`first_app.py` とします。

```
$ touch first_app.py
$ cd first_app.py 
```
次にこのファイルに書き込んでいきます。一番最初なのでHelloworldを表示させていきましょう。

```python:first_app.py
import streamlit as st
st.title('MyApp')
st.write("HelloWorld")
```

`first_app.py`のあるディレクトリ上で下記コマンドを実行

```
$ streamlit run first_app.py
```
おそらくWebページにはHelloworldと表示されていると思います。
HTMLやCSSファイルをかかなくても、こんな少ないコード量でWebページが作れるなんてちょっと感動ですね。
他にもヘッダーやデータフレームなんかも簡単に表示できちゃいます。

```python:first_app.py
import streamlit as st
import numpy as np
import pandas as pd

st.title("HelloWorld")
st.subheader("This is subheader")
st.write("This is testdata")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))
```

![スクリーンショット 2020-05-18 22.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/4f17ba4f-5f1a-7fd5-4f27-61ff91880678.png)
このようにStreamlitには`st.write()`や`st.title()`のような様々なメソッドが用意されています。
他のメソッドに関しては [公式ドキュメント](https://docs.streamlit.io/api.html#display-text)を参照ください。

## magic commands
これだけでもHTMLファイルいらずでフロントの処理ができるので、十分便利なんですが、
なんとstreamlitには実はもっと画期的なコマンドが用意されています。

```python:first_app.py
import streamlit as st
import numpy as np
import pandas as pd

"""
# My first app
### This is subheader

This is testdata
"""

st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))
```
このように書いてアプリの方を確認してみると、

![スクリーンショット 2020-05-18 22.48.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/a41bfa1f-6933-07df-40a1-6ce1f9442ffe.png)

おお...すげええ
Streamlitはコード内にべたがきした、コメントをうまく読み取って、
アプリに書き込んでくれます。
公式ではmagic commandと呼んでいます。まさに魔法ですね
ちなみにPython3以降でないと動かないようです。

## widgetsを使用して対話性のあるアプリにする

チェックボックスやセレクトボックスも簡単に追加できます。
試しに、セレクトボックスで東京か大阪か選んで、地図に点を散らして打てるようにします。
そして、チェックボックスにチェックをつければ、座標データの一覧が見られるようにしました。

```Python
locate = {"東京":[35.68, 139.76] , "大阪":[34.70 ,135.49]}

# セレクトボックス
l = st.selectbox(
    'Which places do you like best?',
     ("東京","大阪"))
'You selected:', l

# 地図をプロット
map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + locate[l],
    columns=['lat', 'lon'])
st.map(map_data)

# チェックボックス
if st.checkbox('Show dataframe'):
    st.write(map_data)
```

また、ほとんどのコマンドは`st.sideber`を追加することで、各機能を左側のサイドバーに寄せることができます。
`st.selectbox`→`st.sidebar.selectbox`
`st.checkbox`→`st.sidebar.chechbox`
とすると

![スクリーンショット 2020-05-21 2.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/1ad2db26-fc3e-0a47-0a5d-a2c81e8feccb.png)

このように簡単なWebアプリらしくなりました。

##　終わりに
本当にPythonファイル一つで、しかも数行のコードでwebアプリが作れてしまいました。
同じPythonで`Django`や`Dash`も十分早いと感じましたが、`Streamlit`は爆速でしたね。
他にもグラフや画像、動画なんかも一行の簡単なコードで埋め込めました。
それほどデザインにこだわりがなく、サクッと自分の開発した何かしらを公開したいときは、使ってみる価値は大いにあると思います。

続きは[こちら](https://qiita.com/Nate0928/items/632e7d54c2f9c17e242b)から。