先生と生徒の会話形式で理解しよう

生徒

「先生、Flaskで作ったWebアプリにVue.jsを使いたいんですけど、どうやって組み込めばいいのかわかりません…。」

先生

「FlaskはPythonでサーバーを作るフレームワークで、Vue.jsはブラウザで動くフロントエンドのJavaScriptフレームワークですね。両方を組み合わせると、見た目が動的で便利なWebアプリが作れますよ。」

生徒

「フロントエンドとかバックエンドとか、まだよく分かっていないんですけど、どんな感じでつながるんですか？」

先生

「それでは、Flaskのテンプレートエンジン（HTML）にVue.jsを組み込んで、実際に動かす流れを見ていきましょう！」

1. FlaskとVue.jsを組み合わせると何ができる？

FlaskはPythonで動く軽量なWebアプリケーションフレームワークです。一方、Vue.js（ビュージェイエス）は、JavaScriptで画面の動きを制御するフロントエンドのライブラリです。

Flaskは「サーバー側の頭脳」、Vue.jsは「画面を動かす顔」と考えるとわかりやすいです。つまり、Flaskがデータを用意して、Vue.jsがそれを見た目として表示します。

例えば、「Flaskで作ったアンケート結果を、Vue.jsでリアルタイムに表示する」といった動的なWebアプリが作れます。

2. Flaskのテンプレートとは？

Flaskでは、HTMLファイルを使ってWebページを作ります。このHTMLファイルを「テンプレート」と呼びます。FlaskはJinja2というテンプレートエンジンを使って、Pythonの変数をHTMLに埋め込むことができます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask テンプレート例</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>

Flask側でmessageに文字を入れると、その内容がHTMLに表示されます。次のPythonコードを見てみましょう。


from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', message='こんにちは、Flaskの世界へようこそ！')

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

ブラウザでhttp://localhost:5000を開くと、「こんにちは、Flaskの世界へようこそ！」と表示されます。ここにVue.jsを組み込むことで、画面を動かせるようになります。

3. Vue.jsをHTMLに読み込もう

Vue.jsは、外部のCDN（インターネット上のサーバー）から簡単に読み込めます。まずはFlaskのテンプレートHTMLにVue.jsを追加してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask × Vue.js 組み込み</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="container p-4">
    <div id="app">
        <h2>{{ message }}</h2>
        <button @click="changeMessage" class="btn btn-primary mt-3">メッセージを変更</button>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    message: "FlaskとVue.jsがつながりました！"
                };
            },
            methods: {
                changeMessage() {
                    this.message = "ボタンがクリックされました！";
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

このコードをFlaskのtemplatesフォルダ内にindex.htmlとして保存します。Flaskを起動してページを開くと、「FlaskとVue.jsがつながりました！」という文字が表示され、ボタンを押すとメッセージが変わります。

これでFlaskのテンプレートにVue.jsを組み込むことができました。

4. Flaskの変数をVue.jsに渡す方法

Flaskで用意したPythonの変数をVue.jsに渡すこともできます。例えば、サーバーでユーザー名を設定して、Vue.jsでそれを表示する例を見てみましょう。


from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    user_name = "山田太郎"
    return render_template('vue_sample.html', user_name=user_name)

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

次に、HTMLテンプレート側です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>FlaskからVueへデータを渡す</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="container p-4">
    <div id="app">
        <h2>こんにちは、{{ name }}さん！</h2>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    name: "{{ user_name }}"
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

ブラウザでアクセスすると、「こんにちは、山田太郎さん！」と表示されます。FlaskからのデータをVue.jsが受け取って表示しているわけです。

5. FlaskテンプレートとVue.jsの注意点

FlaskのテンプレートエンジンJinja2とVue.jsは、どちらも{{ }}という同じ書き方を使います。すると、FlaskがVueの部分まで先に処理してしまうことがあります。

これを避けるには、Flask側でVueのブロックを無視させる「rawタグ」を使います。


{% raw %}
<div id="app">
    <h2>{{ message }}</h2>
</div>
{% endraw %}

これで、Flaskは{{ message }}をVue.jsのものとして扱い、正しく動作するようになります。

6. まとめ：FlaskとVue.jsの組み合わせで動的なWebアプリを作ろう

FlaskとVue.jsを組み合わせると、Pythonでサーバーを動かしながら、JavaScriptで動的な画面を簡単に作ることができます。ログイン画面やチャットアプリ、ダッシュボードなども構築可能です。

今回紹介した方法は「FlaskのテンプレートにVue.jsを直接埋め込む」やり方ですが、最初の学習にはぴったりです。FlaskとVue.jsの基本をしっかり理解して、よりインタラクティブなWebアプリ開発に挑戦してみましょう。

FlaskのテンプレートにVue.jsを組み込む方法を初心者向けに解説！サーバーとフロントの連携を完全ガイド