AsaHP
Python PandasとJavascriptで高速にWeb開発 サンプル付き (1/5)
Python Pandasはデータ分析で用いられるツールで、表形式のデータの扱いに優れている。これにJavascriptフレームワークを組み合わせる事で、扱いやすいSPA（単一ページ）型のWebアプリを開発する。様々なツールを組み合わせるが、開発はできるだけシンプルに行う。この方法はWebアプリの行数を減らし、高速に開発できる。
WebアプリはPythonのFlaskフレームワーク上に構築する。Javascriptフレームワークは、最も一般的でシンプルなjQueryを使用する。画面構成のためCSSフレームワークであるBootstrapを使用する。グラフ作成用にD3.jsと、これを簡易に利用できるC3.jsを使う。
簡単なデータ分析と機械学習ができるWebアプリを開発する。最終的にそのまま使えるサンプル形態までまとめる。色々なツールを使うので、サンプルから直した方が分かりやすいだろう。
ソース行数は、各種ツールの多用などにより可能な限り短くしている。行数を短縮してシンプルにすることは、品質向上や開発速度向上に役立つ。これは情報の整理と構造化に直結する重要な方法論である。方法論の詳細は高品質・高速な開発のためのソフトウェア方法論を見て欲しい。
このソースは2019年に作成したものであり、現在の環境ではうまく動かない可能性がある。
基本構造
基本構造は以下のようになる。Javascript側で画面制御をすべて行う事で、Python側はデータの処理に専念できる。このようにクライアントとサーバをきれいに分ける事は、Web開発において一般的ではない。
1つの処理でHTML、Javascript、Pythonの3つを扱う必要があるものの、それぞれの機能がきれいに分かれているので扱いやすい。SPA（単一ページ）型なので画面遷移に対する労力は減る。ただし様々な機能を利用するので、学習負荷は少し高い。使っているのは一般的なツールなので、使用時にWeb検索をする事で学習負荷を減らせる。
これは昔からあるクライアント・サーバモデルに似ている。またサーバ側にRDBを置いたオブジェクト指向GUIソフトにも似ている。どちらも歴史のある扱いやすいモデルである。今回の開発で重要なの細かい技法よりも基本的な枠組みである。これはミドルウェア的な考え方であり、細かい技法などと比べて分かりにくい。この枠組みから外れると扱いにくいプログラムになってしまう。
Pandasとデータフレーム
Pandasで扱うデータの形式をデータフレームと呼ぶ。データフレームは2次元の表形式データであり、同一形式の列データを持つ行データの集まりである。RDBのデータ構造や、単純なExcelデータに似ている。データフレームは主にデータ科学で使用される技術である。
表形式は構造が比較的簡単な上、まとめて扱う事で処理を短くできる強力なデータ構造である。RDBやExcelでは一般的だが、一般的なプログラム言語で表形式を扱える場合は少ない。Python Pandasは有力な汎用プログラム言語において表形式を扱う事ができる強力なツールである。
データフレームはR言語やPython Pandasの中核的データ構造であり、統計やデータ分析の作業をやり易いように様々な機能が入っている。機能を覚えるのに時間が掛かるが、理解するとデータの加工・編集作業を簡単に行えるようになる。RDBと異なりすべてメモリ上で処理されるため、ファイルを読み込んでしまえば処理が高速なのも利点である。
PandasはRDBアクセスなどもできるが、特にCSVファイルの読み書きが容易である。CSVファイルを経由してExcelでデータの表示や編集を行えば、作る機能が少なくて済む。Excelでもメモリに入りさえすれば大きなサイズのデータを扱える。
Webアプリの最終形
Webアプリの最終形は以下の2段階とした。
- 第1段階：元データの取得・ダウンロード・アップロードと、Javascriptによるグラフ表示
- 第2段階：第1段階に、機械学習と学習結果の管理を追加
第1段階のアプリは以下のようになる。
第2段階のアプリは、第1段階に以下の内容が追加される。
Webアプリの行数は以下のようなり、機能から見ると少なくて済む。
| Python | HTML | Javascript | |
|---|---|---|---|
| 第1段階 | 68 | 85 | 75 |
| 第2段階 | 223 | 158 | 226 |
Webアプリの最終形は以下のリンクからダウンロードできる。
第1段階のソース 第2段階のソース開発はPython 3を使い、Windows上で行っている。ソースファイルの文字コードはUTF-8、CSVファイルの文字コードはExcelで開く事を前提にShift-JISを使っている。
app.pyプログラムをPythonから実行する事でWebアプリを起動できる。以下のリンクをブラウザに指定する。
実行時にPythonのライブラリが不足しているとエラーになる。その場合はpipやcondaを使ってインストールする必要がある。
ディレクトリ構成
ディレクトリ構成は以下のようになる。親ディレクトリ、templates、staticはFlaskに基づくファイルを入れるディレクトリである。srcとresultはデータを入れるディレクトリである。
- 親ディレクトリ：Pythonプログラムを入れる。FlaskによるWebアプリの処理や、Pandasによる表形式のデータ処理などである。Jupyterで開発する際は、このディレクトリにJupyterファイルを入れるとディレクトリ構造が同じで開発しやすい。
- templates：HTMLファイルを入れる。このファイルはFlaskによって加工された後に、ブラウザ上で表示される。
- static：Flaskによる加工をしないファイルを入れる。JavascriptやCSSのファイルが相当する。各種フレームワークをダウンロードして使う際はすべてここに入れる。
- src：データ分析の元になるデータを入れる。これはFlaskの管理外にあるディレクトリである。
- result：機械学習の学習結果データを入れる。これもFlaskの管理外にあるディレクトリである。
高機能なWeb開発
今回の開発手法は簡単なWeb開発に向いているが、より高機能なWeb開発もできる。
根幹となるフレームワークであるPythonのFlaskとJavascriptのjQueryは一般的なものであり、高機能なWeb開発でも耐えられる。Flaskの機能が足りない場合は、より豊富な機能を持つDjangoに入れ替えればよい。
jQueryは高機能なWeb開発でも使われているので特に変える必要はない。現在はより高度な機能を持つJavascriptフレームワークであるReactやAngularが存在する。しかしこれらはサーバ側でもJavascriptを使い、HTMLもJavascriptで書くなど、すべてをJavascriptで処理しようとする。そのため今回の手法と相性が悪い。またReactやAngularは複雑で学習負荷も高い。もし高度なJavascriptフレームワークを使いたい場合は、Vueが選択肢になるかもしれない。VueはReactやAngularより軽量で、サーバ側のJavascriptを使わなくても開発できる。
Webサーバとの通信をREST APIに切り替える事も比較的簡単である。REST APIの詳しい説明は省略するが、現在のWeb開発では一般的に使用されている。
1ページにより多くの機能を入れたい場合は、HTMLのタブの使用も考えられる。Bootstrapはタブにも対応している。
Javascriptのグラフツールは多種類あり、C3.js以外を使う事でグラフの高度化もできる。D3.jsを直接扱うと様々な事ができるが、D3.jsそのものは扱いが難しい。Plotlyを使うと高度なインタラクティブグラフが簡単に作れる。インタラクティブ時系列グラフや三次元散布図なども作成でき、しかもPythonから直接グラフを作成できる。しかしPlotlyはランセンスが複雑で、完全に無料で使える訳ではなさそうである。中国の百度（バイドゥ）が作ったEChartsは非常に多くの機能があり、三次元散布図なども作成できる。EChartsはApacheの管理下になってライセンスの問題もないので、今後は広まるかもしれない。
クライアントとサーバが明確に分かれているので、複数人での開発も容易である。PythonとJavascriptの両方ができる人材がいなくても、複数人で分ければ開発できる。
表データをまとめて扱う
条件分岐やループ処理が入るとプログラムが複雑になり、テストも難しくなる。分岐処理はできるだけない方がいい。データフレームは最終的に数式を当てはめる事が目的であり、数式のように分岐のない命令でデータ加工ができる。これがデータフレームの利点である。分岐処理を入れてしまうとデータフレームを使う利点がなくなる。
同様の手法は他のツールにもある。RDBではSELECT文により様々なデータ加工ができる。これも分岐のない命令であり、データフレームとよく似ている。Excelではピボットテーブルにより一括した集計や分析ができる。ピボットテーブルにもある程度汎用性があるが、データフレームやRDBほどの機能や使いやすさはない。BIツールにもデータをまとめて扱うための様々な機能がある。
このようなツールを使い表データをまとめて扱う事に慣れてくると、高速かつ正確にデータを扱えるようになる。プログラムで細かい分岐処理を多量に書いたり、Excelで1データごとに変換処理を入れるのは非常に手間がかかる。Excelマクロもまとめてデータを扱えないので同様である。日本ではExcelでの業務から離れられない事が問題になっているが、表データをまとめて扱う事の理解がExcel離れをするために必要である。
