見出し画像

Python力を高めようと思ったはずがvue.js力を高める羽目になった私と新しい領域でプログラミングをする難しさについての話

George Yoshida/吉田丈治

テキストデータが沢山集まったことも有り、自然言語処理をやるためにpythonをちょいちょい書き始めたのが昨年末くらいでした。なるほどなるほど、こうやってやるとワードクラウドができるのねというチュートリアル的な部分をささっと済ませ(嘘です、python全然わからんかった)、他にもちょこちょこっとしたアプリケーションを書いていた訳です。

Pythonと私

https://twitter.com/search?q=python%20from%3A%40geeorgey&src=typed_query&f=live

twitterを見返してみると、初出は2012年でした。9年前！一体今まで僕は何をしていたのでしょう。何もしていなかったんですね。そしてついにちゃんとやることになってしまった訳です。

何をやりたかったんだっけ

例えば、上述の自然言語処理。テキストデータとちょっとしたプログラムを書けば確かに処理はできるんですね。ただ、現実的な運用には全く足りないことに気付く訳です。私がほしいのは例えば自然言語処理をした結果であり、常に最新の情報が適切な場所に収まっている状態にしておきたい。そうなっていれば、BI使って可視化することも容易です。

ただそれをするには、解析用のデータソースがリアルタイムに更新される場所にある必要があるし、業務のワークフローの中に置かれていなければなりません。

プログラミング言語の書籍で書かれているような、単一言語による処理というのは現実的な世界にはおそらくほぼ存在せず、色々なものとつなぎこんだものが稼働しています。そこが難しい。そんな事を、最近Twitterで言語化しようと思っていた。

データ自体はPostgreSQLで作られたDBの中に入っている。それを取得してきて解析に回す。解析した結果は別のTableの中に格納する。みたいなのは比較的シンプルで、作ったスクリプトをcronで定期的に動かせば出来る。いわゆるサーバーサイドスクリプトのみで完結する世界はとっつきやすい世界だと思う。

もう一歩進んで、データ自体をWebアプリ等によって表示したり、更には作業用のWeb UIを作って加工してその結果をDBに戻したいという事になるとまた難易度が増す。ひとまずPythonにはFlaskっていうWebアプリケーションフレームワークがあって、それを使えばバックエンドもフロントエンドもpythonを使って書くことは出来る。一応。静的な動きのないページを出力するだけなら十分に使えると思う。

ただ、今どきの感覚でいくと、ちょっとクリックしたらデータ表示に変化ができたりすることを誰もが期待するじゃないですか。え、これできないのって普通はなると思う。そういう気の利いたこと(リアクティブっていう)をやろうとするとFlaskのみでは難しくて、調べてみるとVue.jsとか使ってやるといい感じに出来るらしい。というか「Flask フロントエンド」で検索するとほぼVue.jsしか出てこない。それならそれでいいかってなるでしょ。

Flask単体で難しいというのは、例えばjsを使ってデータの表示を上書きしたいというような場合、Flask単体だとページにパラメータつけたりデータをPOSTしたりしてページ自体を再度レンダリングするような処理をする必要があって、そうじゃないんだよな…っていう形になってしまう。

フロントエンドってなんだよ

上述した通り、Salesforce環境でのVisualforceの開発は割とシンプルだ。Lightning Web Component時代になって、今どきなスタイルに近付いているのだろうけど、僕自身はそこにまだアジャストしていなかったのでjs苦手マンだった。それが、python使ってFlaskっていうWebアプリケーションフレームワークを使ったアプリの構築をしていたんだけど、フロントエンドをリアクティブにしたいと思ったらFlaskだけでは難しいということに気付き、Flask-Vue.jsという組み合わせで結局再構築している。

いつの間にかPythonの世界からnode.jsの世界に突入していた。

バックエンドをpythonで書き、フロントエンドをvue.jsで書く。なるほど、簡単に言うけどなるほどなるほど…と思いながらなんとなく動き始めた。よしよしと思うじゃない。

しかしですよ。最終的には構築しているアプリケーションをHeroku上に置きたいのだ。そのためにどんな構造で作るのが良いのかみたいな事を調べて、さっきまで作っていた構成ではだめだということが分かり、構築し直してからHerokuに一度デプロイして動くかどうかを確かめてみる。やっと動いたぞ！！というところにたどり着くのにもそれなりに時間がかかる。

知見を深めていくたびに、よーし次の階段のステップが見えたぞっていう瞬間が訪れるのだけれど、次の階段のステップだと思ったそれは本当はすでに乗っておかなければいけなかったもっと手前にあるステップだったりして、登ったつもりが降りていたというような状況が少なからず発生する。いや、嫌いじゃないんだけどね？たまに途方にくれるよね。

フロントエンド凄いなって話

vue.jsとか全然使ったことなかったんだけども、そもそも自社で開発しているアプリはnuxt.js使って再構築している最中だったりするし、エンジニアチームがやってることの理解が進めば良いなと思って勉強がてら手を出してみたんだけどフロントエンドのフレームワークって凄いよね。

フレームワークのルールに沿って構築したものをビルドっていって最終的な形に出力すると、いい感じにWebブラウザで動く形に処理してくれるんだけど、それが凄い。何が起こってるのか分からないくらい凄いと思ってる。

で、そんなvue.jsにはVuetifyっていうデザインフレームワークっていうものがあって、それを使うとデザインテンプレートが比較的簡単に組み込めるっていう事でそれを使い始めてみたんだけど、簡単とは…って感じになる。ここでもまた一つレベルアップが必要になる訳です。

データのバインディングとか

先程も言ったとおり、フロントエンドを作っている訳ですから、Webアプリになにがしかの情報を表示する必要があります。表示する情報は、テンプレートに全部記入するという訳には行かないので、DBから取得してきたリストの情報を部品に突っ込んで表示するみたいな事をするのですが、そこがまた理解力を必要とする。そういうところにもまたつらさがありますね。

これまで登ってきた階段まとめ

そんな訳で、Python力を高めようと思ってちょっとしたWebアプリを作ろうと思った結果、登ってきた階段はこんな感じでした。

・Pythonで自然言語処理の勉強と実装する
・Webアプリ化したくなったのでPythonのアプリケーションフレームワークであるFlaskの勉強と実装をする
・pythonのパッケージ管理をpyenv使ったあとにはpipenvに乗り換える
・フロントエンドをリアクティブにするにはVue.jsが必要だと気付く
・node.jsのパッケージ管理にnpmを使ったあとにyarnに切り替える
・Vue.jsでデータの取り回しを楽にするのにVuexという仕組みを使ったほうが良いということに気付き、実装する
・Vue.jsにはデザインフレームワークのVuetifyっていうのがあるのでそれを利用しはじめる

長いですね。なぜだかすっかりプログラマみたいなことをやっているCIOです。

エンジニア募集中！

ということで、前置きが長くなりましたが弊社リバネスでは、エンジニアを絶賛募集中です。

Twitterでもメールでも、連絡お待ちしております！

noteにはこれまでの経験を綴っていこうかと思います。サポートによって思い出すモチベーションが上がるかもしれない。いや、上がるはずです。