見出し画像

【第13回】FlaskでWebアプリ作成練習。 Vue.jsのコンポーネントを使う。

物理・プログラミング・Python、Web制作・自己啓発


こんにちは（@t_kun_kamakiri）

はじめに行っておきますが、Flaskというタイトルがついていますが、今回の内容はほとんどがVue.jsの内容です。

👆これで勉強していたらVue.jsが出てくるから学んでいます。
この書籍は「Bootstrap」についても結構詳しく書かれていますが、僕自身がBootstrapは使ったことがあるのでnoteであまりまとめていませんでした。
でも、Vue.jsは本当にはじめて学ぶのでnoteでも勉強記録を残しておこうと思って書いています。

前回は、「Vue.jsを使ってみた」という内容でしたが、本日もVue.jsの勉強を進めています。
☟前回の内容。

前回の内容はとりあえずVue.jsを使ってみたという内容でしたが、今回は「Vue」を使って

●データ（変数）
●メソッド（関数）
などを「コンポーネント」というのにまとめておいてブラウザ上に表示するというのをやります。

サーバー側の操作はPythonのフレームワークであるFlaskを使っています。

Vue.jsのコンポーネントを学んだら、Flaskで定義した変数もVueを通してブラウザ上に表示してみたいと思います。

ファイル構成

ファイル構成を以下のようにしておきます。

--templates
|--layout.html
|--index.html
--static
|--style.css
run.py
※style.cssには特に何も書いていません。

まずは、Vueのコンポーネントを使う方法からやります。

index.htmlに以下の4つの部品を用意します。

画像1

各コードを見た方がわかりやすいので👆こちらの絵を意識しながらコードを確認すると理解が深まります。

各コード

layout.html

<!doctype html>
<html lang="ja">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   
   <title>{% block title %}{% endblock %}</title>
 </head>
 <body>
   <div class="container">
   <h1 class="my-4">{% block headline %}}{% endblock %}</h1>
       {% block content %}{% endblock %}
   </div>

   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> -->
   <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
</html>

これはFlaskでおなじみ「htmlのテンプレートファイル」ですね。

index.html

{% extends "layout.html" %}

{% block title %}
{{title}}
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
<div class="mb-4" id="Vue_test">
   <mycomp/>
</div>

<!-- Vue.js -->
{% raw %}
<script type="text/x-template" id="mycomp-temp">
   <div class="btn-light">
       <p class="alert h5" >
           Vue.jsのコンポーネントを使った。
       </p>
   </div>
</script>
{% endraw %}

<!-- Vue.js script -->
<script>

Vue.component('mycomp',{
   template:'#mycomp-temp'
});

new Vue({
       el: '#Vue_test',
});
</script>
{% endblock %}

Vueのスクリプトが書かれているのが確認できます。
もう一度、それぞれの関係性を絵で示しておきます。

画像2

このように「②コンポーネントテンプレート」を用意しておくと、修正する部分は③の何の「データ」と「処理」を②に渡すかだけになりとても管理がしやすくなります。

さらに②を変更することで、①に埋め込むテンプレートを変えることができます。
このように各①～④で役割をまとめておくと編集した際の管理がしやすいというメリットがあります。

Flaskで設定した変数を表示（※全体のコードは載せていません）

Flaskで設定した変数を出力する方法を見ていく前に、Veuで設定した変数を表示する方法を先に見ておきます。

※ちょっと確認を行う程度ですので読み流しても良いかと思います。

index.htmlをちょっと編集します。

{% extends "layout.html" %}

{% block title %}
{{title}}
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
<div class="mb-4" id="Vue_test">
   <mycomp/>
</div>

<!-- Vue.js -->
{% raw %}
<script type="text/x-template" id="mycomp-temp">
   <div class="btn-light">
       <p class="alert h5" >
           Vue.jsのコンポーネントを使った。<br>
           {{data_fff}} 
       </p>
   </div>
</script>
{% endraw %}

<!-- Vue.js script -->
<script>
const data_f = "テスト";

Vue.component('mycomp',{
   template:'#mycomp-temp',
   data :function(){
       return {data_fff : data_f};
   }
});

new Vue({
       el: '#Vue_test',
});
</script>
{% endblock %}

今の構図は以下のようになっています。

画像3

こうすると以下のようにブラウザで表示されます。

画像4

ここで、data_fと設定した部分をFaskで設定した変数を格納するようにすれば良いという事なります。

画像5

👆このようにするとブラウザでの表示は以下のようになります。

画像6

Flaskで設定した変数（リスト型）を表示

Flaskで設定したリスト型もVueを通してブラウザ上に表示したいと思います。

全体のコードを載せておきます。

layout.html

<!doctype html>
<html lang="ja">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   
   <title>{% block title %}{% endblock %}</title>
 </head>
 <body>
   <div class="container">
   <h1 class="my-4">{% block headline %}}{% endblock %}</h1>
       {% block content %}{% endblock %}
   </div>

   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> -->
   <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
</html>

index.html

{% extends "layout.html" %}

{% block title %}
{{title}}
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
<div class="mb-4" id="Vue_test">
   <mycomp/>
</div>

<!-- Vue.js -->
{% raw %}
<script type="text/x-template" id="mycomp-temp">
   <div class="btn-light">
       <p class="alert h5" >
           Vue.jsのコンポーネントを使った。<br>
           <br>
           {{msg}} <br>
           <br>
           {{data_fff}} 
       </p>
   </div>
</script>
{% endraw %}

<!-- Vue.js script -->
<script>
const data_f = eval({{data_flask|tojson}});
Vue.component('mycomp',{
   template:'#mycomp-temp',
   data :function(){
       return {msg: "これはVueの変数です。",
               data_fff : data_f};
   }
});

new Vue({
       el: '#Vue_test',
});
</script>
{% endblock %}

run.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods = ['GET'])
def index():
   list = ['山田','鈴木','田中']
   return render_template('index.html',\
               title ='はじめてVue.jsを使います。',\
               message = '※動作確認です。',\
               data_flask = list)

if __name__ == '__main__':
   app.run(debug=True)

全体の構図は以下のようになります。

画像7

これでどことどこが関連付けられているかがわかると思います。

※注意する点は、Pythonの文字列をJavascriptの文字列に変換している部分です。☟ここ。

const data_f = eval({{data_flask|tojson}});

これで実行して「http://127.0.0.1:5000/」にアクセスします。

画像8

ブラウザ上は以下のようになっているのが確認出来たら上手くいっています。

画像9

まだ、Vue.jsを使ってみただけというレベルですが色々Flaskと連携できれば良いなと思っています。

では、今回は以上です。

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）

この記事が気に入ったらサポートをしてみませんか？