【Python】Flaskとvue.jsは共存できるのか？mustache記法の衝突問題【vue.js】

最近、フロントエンジニア界隈で人気のvue.js。こじんまりと始められ、直感的に扱えるところが初心者の敷居を低くしているといっても過言ではないJavascriptのフレームワークです。

今回、PythonのフレームワークであるFlaskと一緒に使えるのか実験したところ悩ましい問題が起こったので記載していこうと思う。

共存は不可！？コンフリクト発生！！

mustache記法が同じだった！

例えば、会員サイトを作ったとしよう。ログイン部分をFlaskで書いて、ログイン後のページをvue.jsでなにがしか処理するサイトを構築するとする。

実際に書いてみれば分かることなんだが、HTMLで共存させたとき、勘のいい読者ははたと気付くかもしれない。

そう、変数の出力記法が同じであること。これは、mustache記法というんだけど、どちらも「{{}}」という書き方をする。しかし、vue.jsは、elで指定しているブロックは問題ないだろうと思ったかもしれない。
しかし、ここの住み分けはされていないのだった。
そのため、vue.jsで書いているブロックでjinja2のエラーが実行時に出ると思う。
おそらく変数が宣言されていないと怒られたかもしれない。

これは、バグではなく、紛れもなく仕様であり、デリミタのコンフリクトが発生しているということである。

共存は無理なのか？

Flaskで採用しているテンプレートエンジン、jinja2とvue.jsの出力記法は、紛れもなく同じで、どうやらPythonのデリミタを優先するようだ。

これは困った。

そこでvue.jsの公式ページを見ていると、このことを懸念していたのか回避策を講じてあったので紹介しておく。

解法としては、2通りあり結論から言うと、Flask側かvue.js側のどちらかのデリミタを変更すればOKという話である。

Flask

class CustomFlask(Flask):
  jinja_options = Flask.jinja_options.copy()
  jinja_options.update(dict(
    block_start_string='(%',
    block_end_string='%)',
    variable_start_string='((',
    variable_end_string='))',
    comment_start_string='(#',
    comment_end_string='#)',
  ))

app = CustomFlask(__name__)

class CustomFlask(Flask):

jinja_options = Flask.jinja_options.copy()

jinja_options.update(dict(

block_start_string='(%',

block_end_string='%)',

variable_start_string='((',

variable_end_string='))',

comment_start_string='(#',

comment_end_string='#)',

))

app = CustomFlask(__name__)

{{}} → (())
に変更している。

vue.js

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})

var app = new Vue({

el: "#app",

delimiters: ["[[", "]]"],

data: {

message: "Hello Vue!"

}

})

{{}} → [[]]
に変更している。

これでHTML側の出力も変更するとエラーがなくなる。
意外に簡単にできるところが良きかな。

個人的には、jinja2は、フレームワークに依存してしまうことを考慮して、vue.jsの方を変更する方がいろいろ楽なのでこっちを推している。

記法の変更は、他の言語で使用されていないものが望ましい。
上記の例は、よく使われているものだ。
他にも、<% %>もあったが、railsと被るものであるので今回はやめた。

vue 2系とvue 1系では変更方法が異なる！

ここで、vue 2系とvue 1系では変更方法が異なるので変更例を示しておく。

vue 2系

new Vue({
  delimiters: ['[[', ']]']
})

new Vue({

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

})

vue 1系

Vue.config.delimiters = ['[[', ']]'];

1	Vue.config.delimiters = ['[[', ']]'];

これで共存完了である。

Vue.jsのおすすめ書籍

最初に今回動画をおすすめしているのですが、その理由は、結構簡単です。
Vue.jsは比較的新しい言語であり、参考書が少ないというのが理由の一つに挙げられます。ただ、動画を見るのが嫌、時間を束縛されるのが嫌という方は、厳選したこの2冊をおすすめしていますが、個人的には、のちに紹介する動画学習する方がはるかに効率的かもしれません。