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

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

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

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

出典:http://www.photo-ac.com/

共存は不可!?コンフリクト発生!!

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

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

vue.js

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

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

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

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

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

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

vue 2系

vue 1系

これで共存完了である。

Vue.jsのおすすめ書籍

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

基礎から学ぶ Vue.js

新品価格
¥3,762から
(2020/2/22 17:18時点)

Vue.js入門 基礎から実践アプリケーション開発まで

新品価格
¥3,718から
(2020/2/22 17:20時点)

一つは、猫本として有名かもしれません。このmio氏は自身のWebページも持っておられるので、そこと併用しながら読むと理解が深まりそうです。

Pythonおすすめ書籍

最初の2冊は初心者向けです。Effectiv Pythonはこの2冊を終えてから読むとかなりわかりやすく感動できると思います。

基礎 Python (IMPRESS KISO SERIES)

新品価格
¥6,200から
(2020/4/21 20:50時点)

入門 Python 3

新品価格
¥4,070から
(2020/4/21 20:53時点)

Effective Python ?Pythonプログラムを改良する59項目

新品価格
¥3,520から
(2020/4/21 20:52時点)

独学に限界を感じていませんか?

プログラミング初学者がもっとも陥りやすいのは、挫折です。

なぜ?挫折するのでしょうか?

それは独学だけでは、限界があるからです。

でも、あきらめてはそこで終わりです。

プログラミング言語習得には、メンターと呼ばれる教えてくれる人間が必要です。メンターがいれば、挫折する確率がグンと低くなります。

困ったときに、いつでも教えてくれる先生がいれば心強いと思いませんか?

でも、先生って、学校行く時間もないし、、、そんなこと思っていませんか?
今は、Webでプログラミングが学べる時代なんですよ!

でも、お高いんでしょ?

うーん。これは考え方なのかもしれないんですが、例えば、こう考えてはどうでしょうか?
スクール代金が1コース20万円として、その後、ITエンジニアに就職したら、平均30万円以上は、稼げるのですぐに元が取れますよね?
この数値は、リクナビなど転職サイトを検索すればすぐ出てくる数値です。

今一時の出し渋りにより、一生の賃金を損することになるか、倍以上手に出来るかは、自明ですよね?

でも、どこが良いのかわからない。

そこで、厳選したプログラミングスクールと動画サイトをご紹介いたします。