Dashについて学ぶ

Dashとは何か?

Plotly社が開発したPythonのオープンソースライブラリで、React、Plotli.jsで作られているとのこと。
Pythonのコードを書くだけで、Webアプリを作ることができる。

公式ドキュメントはこちら
https://dash.plotly.com/introduction

必要なPythonのパッケージをインストールする。作るものによってPandasを追加でインストールしたりする。

pip install dash

今回は、UIの部品となるコンポーネントをmain.pyで作成しています。
Dash HTML Componentsパッケージなどのクラスから生成されています。

こちらが、import文の内部のコード。PyCharmだとマウスを上に合わせて、commandキーを押しながらクリックすると見れます。

from dash.html import *  # noqa: F401, F403, E402
from dash.html import __version__  # noqa: F401, F403, E402
import warnings

warnings.warn(
    """
The dash_html_components package is deprecated. Please replace
`import dash_html_components as html` with `from dash import html`""",
    stacklevel=2,
)	

Layoutを作る最小限のコード

Dashの機能を使って、htmlの<p>タグを生成して、CSSをinlineスタイルで適用する。
Pythonで書くとこんな感じになるんですね。独特で違和感ありますね。

main.py

import dash
import dash_html_components as html
# Dashインスタンスを生成する
app = dash.Dash(__name__)
# コンポーネントをlayout属性に渡す
app.layout = html.P(
    "こんにちは。昨日は雪が降りました。",
    # スタイルの設定
    style={
        "fontSize": 50,  # 文字サイズ
        "color": "white",  # 文字色
        "backgroundColor": "#000000",  # 背景色
    },
)

if __name__ == "__main__":
# アプリケーションを起動する
    app.run_server(debug=True)

これだけなら、理解するのは簡単なんですけど、callbackっていうのが、まだ理解が足りなかったので、何度かやってみました。

callbackとは?

コンポーネント属性の変化などをトリガーに呼び出されるコールバック関数を定義することで、アプリケーションにインタラクティブな動きを与える。
インタラクティブっていうのは、相対的、対話的なという意味。
もっとわかりやすくいうと、画面に動きをつける。
公式を参考にカウンター機能を作ってみました。

main.py

import dash
from dash import html
from dash.dependencies import Output, Input

app = dash.Dash(__name__)
app.layout = html.Div([
    # htmlの<button>タグにInputで使うid属性を指定する
    html.Button('Submit', id='button-example-1'),
    # htmlの<div>タグにOutputで使うid属性を指定する
    html.Div(id='output-value', children='counter-value')
])


@app.callback(
    # Outputで戻り値の出力先を指定する
    # ボタンがクリックされると<div>タグに値が渡されて、数値が増えていくカウンターが表示される
    Output('output-value', 'children'),
    # コールバックの呼び出し要素の指定
    Input('button-example-1', 'n_clicks'))
# ボタンがクリックされると属性が変化して、処理が呼び出される
def update_output(n_clicks):
    # 返り値を返す
    return n_clicks


if __name__ == '__main__':
    app.run_server(debug=True)	

右下のボタンを押すと、デバッグする画面を表示することができます。どこが繋がっていて、プログラムが実行されているのかを見れます。

childrenがよくわかってなかった

main.pyに書かれている<div>タグというか、Divクラスはどんなものか?
Divクラスの引数がchildenというらしく、(第１引数)で、main.pyのコードだと、ButtonとDivの２つのコンポーネントを格納していて、childrenに渡している。
childrenには、文字列や数値のほか、コンポーネントをリストに格納して渡せます。

こんな風にグラフのコンポーネントも渡せる

どんな人たちが、グラフなどのコンポーネントを使うのかというと、機械学習をやっている人たちですね。
JavaScriptのChart.jsみたいですね。

やってみた感想

pythonのデコレーターだとか独特の文法に苦しめられた😭
PHPの人ばっかりの福岡で、まさかPython使うことになるとは思わなかったよ。

デコレータとは

デコレータとは、すでにある関数に処理の追加や変更を行う為の機能です。

デコレータを使うことによって、既存の関数の中身を直接変更することなく、それらに機能を追加したり変更したりすることが出来るようになります。

自分で動くコードを作ってみました

# デコレーターを作成(装飾という意味)
def greet_func(say_func):
    print("おはよう")
    return 0
# @の後にデコレーターの名前を記述して新しい関数say_funcを定義
@greet_func
def say_func():
    pass
# ---------------------------------------------------------
def parent(children):
    def children():
        print("関数の中の関数を実行")
    return  children # 関数を戻り値として返す

@parent
def child(v):
    print(v)

child()# 実行するとparentの中のchildren関数が実行される

実行結果

おはよう
関数の中の関数を実行