こんにちは。
今回の記事では、PythonのFlaskでVueを使う方法を書きます。
長くなりそうなので、複数に分けて書きたいと思います。
この記事が誰かの役に立ったら幸いです。
Vueとは
概要
Vue.jsとは、フロントエンドのフレームワークです。
CDNのタグを追加するだけで使用出来るシンプルさも相まって、日本ではかなり人気の高いフレームワークです。
GET/POSTのメソッドを使用したページ移動は煩わしいこともあり、最近のWebアプリケーションは、ページ移動することなく、その場でダイナミックにページの内容を書き換えるのが主流になっています。
これをVue.jsを使って実現できます。
主要機能
Vue.jsの主要機能について書いてみます。
SPAとルーティング
Vue.jsでは「SPA」と呼ばれるアプリケーション開発が行えます。
これは「Single Page Application」の略で、1つのWebページですべて完結する、というアプリケーションです。そのため、1ページでありながらアドレスを割り当てて、表示を切り替えるルーティング機能もオプションとして用意されています。
コンポーネント指向
Vue.jsは「コンポーネント」として画面表示を作成します。
これは、画面に表示される内容、使用するデータ、実行する処理といったものをひとまとめにして扱えるのです。
このコンポーネントがVue.jsの基本です。
Mustache(マスタッシュ)
コンポーネントでは画面の表示も作成しますが、Vue.jsでは「Mustache(マスタッシュ)」と呼ばれる便利なテンプレート機能があります。
これは、Flaskのテンプレート(Jimja)などとも違い、フロントエンドのみで動きます。
リアクティブプログラミング
Vue.jsでは、管理するデータと、それを使った表示が密接につながっています。
データを修正するとそれに合わせて表示が更新されたり、表示を操作すると関連するデータの内容も更新されたりします。いちいち値の変更に対して、連動する表示を更新する必要がないので便利ですね。
Flaskとの連携
FlaskでVueを利用するには当然、連携を考えなければなりません。
SPA or MPA
MPA(Multi Page Application)：複数ページで構成
SPA(Single Page Application)：1つのWebページですべて完結
Flaskは、基本的にはMPAで作成することが多いため、SPA開発となると色々週背うする必要があります。
また、SPAのルーティング機能はFlask自体のルーティング機能とバッティングしないように注意しなければなりません。
なので、最初は一般的にMPA方式でVue.jsを実装して、最終的にSPAを目指すのが良いと思います。
データとテンプレートの管理
Vue.jsにはテンプレート機能があり、コンポーネント内でデータを管理する機能もあります。ただ、Flaskにもテンプレートやデータ管理の機能がありますので、同じような機能が両方にあるのです。
この「両方にある機能をうまく使い分ける」という点は、慣れてないと結構大変かもしれません。
特にテンプレートは、JinjaとMustacheをどう組み合わせるのかを良く考えて実装するようにしましょう。
Vue.jsとFlaskのやりとり
Flaskはバックエンドで、Vueはフロントエンドなので、両者で同やり取りをするのかを考える必要があります。
FlaskからVue.jsに値を送るのは比較的簡単です。テンプレートに値を渡すのと同様のやり方です。ただ、逆にVue.jsからFlaskに値を渡したり、画面の表示が完了した後でFlaskからVue.jsに値を渡したりするような場合には、Ajazを使いJavaScriptでサーバーにアクセスする手法をとる必要があります。
Vueの使い方
↑のが画像は何となく綺麗なので載せました。意味はないです。（文字ばかりだと読みにくいと思いまして）
Vue.jsをCNDで参照する
Vue.jsはhtmlに以下の参照URLを書くだけで、最新版のVueを使えるようになります。簡単です。
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
Ajaxを使う場合は以下のCDNも必要なので、書いておきましょう。
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” ></script>
Vueオブジェクト
Vue.jsは「Vue」というオブジェクトが用意されており、このオブジェクトを作成して利用するのがVue.jsの基本になります。
Vueオブジェクトは、作成したらHTMLの特定のタグに割り当て、そこに表示を組み込みます。
つまり、Vue.jsは「Vueオブジェクトを作る」部分と「表示を組み込む」部分の2つの部分で構成されます。
Vueオブジェクトの作成
以下でVueのオブジェクトを作成することできます。
new Vue({
el:#app(組み込みタグの指定),
data:vue_msg(使用する値をまとめたもの)
} ) ;
elはVueオブジェクトを組み込むタグの指定を行うためのものです。
dataはVueオブジェクトに渡す値です。これは、{}でオブジェクトとしてまとめておきます、
Vueの組み込み
次にVueオブジェクトの組み込み方法を記載します。
{% raw %}
<div id=”app” class=”m-5″>
<h2>{{vue_msg}}</h2>
</div>
{% endraw %}
id=”app”は、オブジェクトのタグに割り当てています。
この指定されたタグをVue.jsの「コンテナ」と呼びます。
このコンテナの中にVue.jsによって生成されるオブジェクトが組み込まれて表示されます。
コンテナの中には、{{}vue_msg}と指定がされています。
Vue.jsは{{}}で変数を埋め込むことができます。
※{% raw %}を使用しないと、jinjaとの区別がつかなくなってしまうため、vue,jsを使用する場合は{% raw %}を使用しましょう。
Vueコンポーネント
コンポーネントとは、「表示」、「データ」、「処理」を一体化したものです。
Vueオブジェクトで土台を作って、そこにコンポーネントを組み込んでいくイメージです。
コンポーネントのテンプレート
<script type=”text/x-template” id=”テンプレートのID”>
表示内容
</script>
コンポーネントのオブジェクト
Vue.component(コンポーネント名,{
template: テンプレートの指定
});
Vue使い方まとめ
Vueの使い方を纏めます。
Vue.jsコンテナ
<div id=”app” class=”m-5″>
<コンポーネント />
</div>
コンポーネントのテンプレート
{% raw %}
<script type=”text/x-template” id=”mycomp-template”>
表示内容
</script>
{% endraw %}
コンポーネントのスクリプト
<script>
Vue.component(‘mycomp’, {
コンポーネントの内容
});
Vueオブジェクト作成
new Vue({
el:”#app’,
});
</script>
以上になります。
続きはまた別のページで！
コメント