フロントエンドフレームワークとwebフレームワークのテンプレートエンジンの相性の話
# Webアプリ作成中
現在簡単なwebアプリを作成中です。
面白いアプリでもなんでもなくて、普通のブログサービス的なやつです。
目的は基本的なCRUDが機能として存在するアプリを一人で全部作ることのみ。
今のところ人様にお見せできるソースが一切ないのでね。
使っているのはPython + FlaskとVue.js
今回はVueとFlask(のテンプレートエンジンjinja2)を使用して詰まったとこのお話
# 現象
Vue.jsではデータバインディング機構としてマスタッシュ構文なるものが用意されています。(正式名称かどうか知らないけど)
簡単に言うとjs側で"hoge"という変数を用意し、テンプレート側で{{ hoge }}と書くとその部分が変数の値に差し替えて表示され、動的に値を書き換えられるものです。
簡単にバックエンドを用意してサンプル的にindex.jsを書いてFlask側からtemplate_render()を通して送り返したのですが、ここでマスタッシュ構文がうまく効かず、変数名がそのまま表示されていました。
# 原因
知っている人には当たり前なのでしょうが、template_render()は単にhtmlを投げるためのおまじないじゃないんですよね。
htmlを解析してjinja2(Flaskに標準で搭載されているテンプレートエンジン)のやり方にしたがって送信データを作っているわけです。
これを使うとPython側の変数をhtmlに埋め込めるわけですが、その目印にjinja2はデフォルトで{}を使用するようになっていました。
つまりjija2を通った時点で{}が消えてしまうのでVue.js側でマスタッシュ構文と認識されず、js変数の割り当てが行われなかったということですね。
今回は動的なページ作成にはVue.jsを使っているのでテンプレートエンジンのお仕事を全く意識していませんでした。
# 解決方法
こちらのブログを参考にさせていただきました。
https://muunyblue.github.io/0b7acbba52fb92b2e9c818f7f56bac99.html
① Flaskを直接インスタンス化せずに継承したクラスを作成し、デリミタ文字を変更する。(今回採用した方法)
以下のような感じ
```
from flask import Flask, render_template
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='(%',
block_end_string='%)',
comment_start_string='(#',
comment_end_string='#)',
))
app = CustomFlask(__name__,
static_folder = './static',
template_folder = './templates')
```
② SFCを利用する
そもそもシングルファイルコンポーネントならデリミタ文字変更とかいらないらしい
普通はこっちかなと…
(③ Vue.js側のデリミタ文字を変更する たぶんできる。具体的なやり方知らないけど)
今回はVue.jsはcdnで遊んでるだけなので①番を採用しましたとさ
おわり
*1:',
variable_end_string='
