【Python入門】FlaskとViteで簡単にVueプロジェクトを作ってみる

最近Vueを研究していて、ふとPythonのFlaskとどう連携するのかなと思い調べてみた。

Flaskを利用すると数行でAPIが作れるので、簡単に使ってみたいならおすすめ。
（Flaskとは、PythonでWebアプリケーションを開発するための軽量なフレームワークのこと。小規模でシンプルなWebアプリケーションを開発するのに適している）

Vue + Flask の関係は、以下のとおり。

Vue → ブラウザ上で動くUI（見た目・操作）
Flask → サーバー側でデータや処理を担当（裏方）

Vueってなに？　Viteってなに？　という方はこちら→Vue.jsってなに？TypeScriptで始める、Vue 3の基本と画面表示までの流れ①　〜概要編〜

「フロント（Vue）」と「バックエンド（Flask）」をHTTP（API）で接続し、データを受け渡してみよう。

まずはFlaskをインストールできるように準備する

Python3とpipが使えなくては始まらない。Macの方はHomebrewから導入するのがおすすめ。
公式サイト→https://brew.sh/ja/

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1	$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

上記のような部分があるので、サイトからコピーし、ターミナルに貼り付けて実行。
※すべてをダウンロード＆インストールするのには時間がかかるので、Homebrewインストールは余裕があるときに行うのをおすすめする。

実行すると下記のようになる。

Homebrew,Python3,pipなどがわからなければ、個別に検索してほしい。

Flaskをインストール&表示させてみる

フォルダ構成は以下のように組む。（PCはMacを使う）

vue-flask-sample/
├── backend/ ← Flaskプロジェクト（Python）
│ └── api.py ← FlaskのAPIコード
├── frontend/ ← Vue + Vite（あとで作る）

backendフォルダに移動し、Pythonの仮想環境を有効化。Flaskとflask-corsをインストール。

$ source venv/bin/activate

1	$ source venv/bin/activate

$ pip install flask flask-cors

1	$ pip install flask flask-cors

ターミナルを開いて書類（Documents）フォルダに移動し、
backendフォルダ作成、移動など、一連の様子は下記のようになる。

※補足
Flaskはvenv（仮想環境）を使わなくても動くが、仮想環境下でインストールすることを推奨。普通にインストールすると、pipの性質上、PCへのインストールと同義となり、PCがカオスになる。仮想環境を作り、そこにインストールしたほうがよい。あまり考えずに、venvっていうのは使うものなんだと思っておこう。

次に、backendフォルダにapi.pyを作成する。

from flask import Flask, jsonify
from flask_cors import CORS
import random

app = Flask(__name__)
CORS(app)

items = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]

@app.route("/lucky")
def lucky():
    return jsonify(item=random.choice(items))

if __name__ == "__main__":
    app.run(port=5000)

from flask import Flask, jsonify

from flask_cors import CORS

import random

app = Flask(__name__)

CORS(app)

items = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]

@app.route("/lucky")

def lucky():

return jsonify(item=random.choice(items))

if __name__ == "__main__":

app.run(port=5000)

Flaskサーバーを起動させるため、下記を実行。

$ python api.py

1	$ python api.py

http://127.0.0.1:5000/lucky にアクセスする。たとえば

{"item":"\u4e2d\u5409"}

1	{"item":"\u4e2d\u5409"}

のようなJSON形式のレスポンスが返ってきていたら、成功。
Flask API が動いていて、Vueや他のアプリと連携する準備が整った。

Vue + Vite プロジェクトを作成する

vue-flask-sampleの中のfrontendフォルダに、viteを導入。

$ npm create vite@latest frontend -- --template vue

1	$ npm create vite@latest frontend -- --template vue

cd frontend
npm install

1 2	cd frontend npm install

$ npm run dev

1	$ npm run dev

ブラウザで http://localhost:5173 を開くと、Vite + Vue のウェルカム画面が出るはず。

VueとFlaskの接続。データの受け渡し

frontend/src/App.vueの内容を下記に書き換える。

<template>
  <div>
    <h1>今日の運勢は…</h1>
    <p v-if="item">{{ item }}</p>
    <button @click="getLuckyItem">占う！</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const item = ref("");

function getLuckyItem() {
  fetch("http://127.0.0.1:5000/lucky")
    .then((res) => res.json())
    .then((data) => {
      item.value = data.item;
    })
    .catch(() => {
      item.value = "エラーが起きました";
    });
}
</script>

<style scoped>
button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<div>

<h1>今日の運勢は…</h1>

</div>

</template>

import { ref } from "vue";

const item = ref("");

function getLuckyItem() {

fetch("http://127.0.0.1:5000/lucky")

.then((res) => res.json())

.then((data) => {

item.value = data.item;

})

.catch(() => {

item.value = "エラーが起きました";

});

}

</script>

button {

margin-top: 1rem;

padding: 0.5rem 1rem;

font-size: 16px;

background-color: #42b983;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

</style>

fetch('http://localhost:5000/lucky')
 →FlaskにGETリクエストを送る

.then(res => res.json())	
→JSONに変換

item.value = data.item	
→Vueの画面に表示させる

<p v-if="item">	
→最初は何も表示せず、結果が来たら表示する

fetch('http://localhost:5000/lucky')

→FlaskにGETリクエストを送る

.then(res => res.json())

→JSONに変換

item.value = data.item

→Vueの画面に表示させる

→最初は何も表示せず、結果が来たら表示する

FlaskとVueの連携は、両方のサーバーを起動しておく必要がある

サーバーを2つ立ち上げなくてはならないので、簡単な方法としては
・ターミナルを2つ起動する
・VSCode内でターミナルを2つ立ち上げる
などがある。

今回は後者で進める。

VSCodeでターミナルを立ち上げて、「＋」ボタンを押せば増える。それだけ。

cd backend
source venv/bin/activate
python api.py

cd backend

source venv/bin/activate

python api.py

cd ../frontend
npm run dev

1 2	cd ../frontend npm run dev

あとはブラウザでhttp://localhost:5173にアクセス。

無事占いアプリが作れたかな？