Vue.jsをbetter jQueryとして使う！FastAPI+Vue.jsと生成AIで作る住所録アプリ

投稿日：2024年12月30日

昔あるところに。。

昔、jquery全盛で、Vue.jsが出てきたすぐに「これはjqueryを駆逐できるかも」と思ってjqueryの実装をVue.jsに変えようとしたことがあります。

結局全部を変えたりしませんでしたが、内部ツールではVue.jsをbetter jqueryとして使ってるのが残ってます。

その頃は生成AIは世に出てませんでした。今は生成AIでサンプルぐらいは実装できそうなので再挑戦したいと思います。

具体的には、Python3 FastAPI + Vue.jsでbetter jqueryとして使ってみようと思います。

使ってみた環境は以下です。

サンプルとして住所録を作ってみました。

以下の感じになります。

[ブラウザ] -> [HTMLtemplate(Vue.js)] <- (JSON)[FastAPI]
                                (REST API)-->

初期データはjinja2に任せ、JSONの文字列データとしてHTMLtemplateに格納しました。
そうすれば、SEOよろしく、HTMLtemplateを読み込んだ瞬間に表示できることになります。

そして更新/削除はAPI経由なのでなめらかな(?)表示ができます。

Python3の準備から起動までは以下です。

$ python3 -m venv ./venv
$ source ./venv/bin/activate
$ pip install -r requirements.txt
$ cd app
$ uvicorn main:app --reload

http://127.0.0.1:8000 にアクセスすると画面を表示します。

起動した結果の画面は以下の感じになります。

コンセプト(?)としては住所録の表示と追加、そして更新削除の一通りできる画面にしています。

実装したソースはここにあります。

実装自体はgeminiに任せました。あまあま使えます。少なくともプロンプトに書いたことは実行してくれます。

ただし、以下のような注意点は実装されませんでした。まだ生成AIで終わりとはいかないようです。

Jinja2とVue.jsは区切り文字が”{{“で同じです。なのでどちらかを変更する必要があります。ここではVue.jsの区切り文字を変更してみました。

以下で区切り文字を”[[” “]]”に変更しています。

delimiters: ['[[', ']]'],

safeを使用して、素の文字列としてJSONを格納しないとエンコードされてJSONでなくなってしまいます。

以下のようにJSON文字列をエンコードなしに格納します。

data: JSON.parse('{{ data | safe }}'),

AIに作らせるとほぼ一発で終わりました。サンプルは使える生成AI。。