【VSCode×Streamlit】Streamlit導入のすゝめ

# streamlitとは

StreamlitはpythonのWebフレームワークで、データ分析に特化したものです。
HTML,CSS,Javascriptを必要とせず、**pythonのみでWeb開発できる**ため、非常に魅力的なものであると思います。

開発に慣れれば一日でアプリをデプロイできたりと、何かと使い勝手の良いものです。

:::note warn

streamlitではオリジナリティのあるUI設計は基本的に行えません。
デザインについて拘りたい場合は、FlaskやDjangoでの開発を推奨します。
:::

# VSCodeでの開発

開発に利用するエディタはVSCodeです。
こちらの環境構築については記事が冗長となることを防ぐため、説明を割愛します。
以下の記事が参考になるかと思います。

https://pythonsoba.tech/vscode/

また、VSCodeを利用してローカルに環境を構築するにあたり、下記の記事を参照しています。

https://kajiblo.com/streamlit-tuto1/

### 1.フォルダ作成

今回はCドライブ直下にstreamlitフォルダを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/3e11b3dd-0c76-e9d7-13f7-cabf3f1ddd2a.png)

### 2.Vscodeでフォルダを開く

Open Folder から先ほど作成したstreamlitフォルダを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/2e9b14c1-84db-7106-a596-99e980b26180.png)

EXPLORERの表示が以下のようになることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/8ef70aa7-8bc7-2102-c3e4-9cc3069b9a1c.png)


### 3.仮想環境の構築

実際に開発するための仮想環境を構築します。

仮想環境を作らなくても問題はないのですが、作った方がなにかと便利なため、基本的には仮想環境での開発が推奨されています。

※下記の記事に詳しく解説がありました。気になる方はこちらを参照頂ければと思います。

https://engineer-lifestyle-blog.com/code/python/vscode-venv-for-beginner/

pythonのversionですが、記事の方は3.10.4のようですが、自分は``3.10.11``のまま進めてしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/73e388d0-7b8c-f4b5-9228-6a4e3e7828d3.png)

``python -m venv streamlit-sample``で、streamlit-sampleフォルダを作成します。
このフォルダは仮想環境のルートディレクトリとなっており、システムのpython環境からは完全に分離されたものになっています。
~~そのため、どれだけ汚しても問題ないです~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/b53a0a65-e944-b22d-b691-acc76bbb55a5.png)

``cd streamlit-sample``で、先ほど作成したフォルダに移動します。
(この手順は仮想環境を実行状態にしてからでも問題ありません。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/d7281826-6e31-d066-8374-81d5d14b7a71.png)

この状態で``Scripts\activate``によって、仮想環境を実行状態に変更します。
※(streamlit-sample)の表示が先頭にあることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/f0efb922-ff97-f2f4-a0b3-1a9ea8cbd99c.png)

### 4.streamlitのinstall

仮想環境内に、今回使うライブラリのstreamlitをinstallします。
``pip install streamlit``と入力してください。結構時間かかりますね...
⇒numpyやpillowのような依存関係にあるパッケージのinstallがあるからですね。

``pip show streamlit``で、installされているパッケージの情報を確認することができます。
今回は1.33.0で話を進めていこうと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/fa4c9698-6582-a8a4-616a-324fa597cba2.png)

# デモアプリ開発

### 1.streamlitの起動

はじめに、streamlit-sample配下に``テスト.py``というpyファイルを作成します。
このファイルは**streamlitのホームタブ**に当たるものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/60b245b2-1ec8-1d8e-5576-288c69cfcc49.png)

ファイルが作成出来たら、ターミナルからstreamlitを起動します。
``streamlit run テスト.py``でstreamlitが起動します。

 ``You can now view your Streamlit app in your browser.``の表示が出るのを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/d99e43de-048d-9293-6089-10c457c467a2.png)

こんな感じで何も書いてないページが開かれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/cd8c118f-3288-7b7b-6a3a-7b514e9091dd.png)

### 2.テスト表示

試しに以下のコードを書いてみます。
```python
# import
import streamlit as st

# main処理
st.write("hogehoge")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310860/e63b60a4-e9f4-ec5d-b2ca-c99876a6384b.png)

先ほど表示したページに``hogehoge``が表示されていますね。
**⇒ホーム.pyコーディングしていくことで、Webアプリを開発できるというわけです。**

主要なコマンドのチートシートは下記に良く纏められているため、必見です。
というか、ここを見れば多分他のページを見ないでも大丈夫です。

https://qiita.com/not13/items/dcd8c12d64982dc0e819

# 総括

以上の手順で、Webアプリを簡単に作成することができました。
~~hogehogeと書いてあるだけのアプリをアプリとしていいのかは一旦置いといて~~

streamlitには様々な機能が搭載されており、単純な可視化であれば簡単に実装可能です。
一方で、インタラクティブなグラフ作成を行いたい！といった場合はplotlyのようなパッケージを利用することも検討するとよいでしょう。

今回は導入手順を記した記事となりますが、少し踏み込んだ内容の記事もそのうち執筆できればと考えています。