VueとFlaskでWebアプリを簡単に構築してみた-その1（環境構築とサンプル構築）-

Last updated at 2024-08-23Posted at 2024-08-14

定型文を表示するのみのアプリ開発

本記事のコマンドはMacに対応しています
Windowsの場合はpython3, pip3をpython, pipに置き換えてください（3を削除）

1. はじめに

このプロジェクトでは、Vue.jsとFlaskを使用して、シンプルなWebアプリを作成します。まずは、定型文を表示するだけのアプリを作成し、フロントエンドとバックエンドの基本的な連携方法を学びます。

学習目標

FlaskでシンプルなWebサーバーを作成する
Vue.jsでフロントエンドを構築し、サーバーからのデータを表示する
フロントエンドとバックエンド間のデータ連携の基本を理解する

2. 開発環境の構築

必要なツールとソフトウェアの準備

以下の作業を順番に行っていきます:

Python 3.xのインストール
仮想環境の構築
Flaskのインストール
Node.jsのインストール

1. Python 3.xのインストール

手順についてはこちらのサイトを参考に実行してください

2. 仮想環境の構築

以降のコマンド作業は「ターミナル(Mac) or コマンドプロンプト(Windows)」で行ってください（検索で出てきます）

新しいディレクトリを作成し、そこに移動します
（こちらはコマンドで作成する例ですが、通常通りの方法で作成しても問題ありません）
```
mkdir /make/your/folder/my_flask_app
cd /make/your/folder/my_flask_app
```
仮想環境を作ります
```
python3 -m venv venv
```
仮想環境を有効化します
Mac
```
source venv/bin/activate
```
Windows
```
venv¥Scripts¥activate
```
以下のように、先頭に(venv)が表示されれば成功です
```
(venv) hoge@hoge %
```

3. Flaskのインストール

以下のコマンドを実行します
```
pip3 install Flask
```
インストールが完了したら、以下のコマンドでFlaskが正しくインストールされたことを確認します
```
python3 -m flask --version
```
正しくインストールされていれば、Flaskのバージョンが表示されます。

4. Node.jsのインストール

Node.jsにアクセスし、OSに対応したインストーラーをダウンロードします
インストーラーを実行し、画面の指示に従ってインストールを完了します
インストールが完了したら、以下のコマンドでNode.jsが正しくインストールされたことを確認します
```
node -v
```
正しくインストールされていれば、Node.jsのバージョンが表示されます。
次に、Node.jsと共にインストールされたnpm（Node Package Manager）のバージョンを確認します
```
npm -v
```
正しくインストールされていれば、npmのバージョンが表示されます。

ここまででツールの準備は完了です

3. 開発プロジェクトの構築

ファイルの作成や連携

以下の作業を順番に行っていきます:
0. VS Codeのインストール

Flaskアプリケーションの作成と初期設定
Vueプロジェクトの作成と初期設定
FlaskとVueの連携

0. Flaskアプリケーションの作成と初期設定

[VS Codeの公式サイト](

1. Flaskアプリケーションの作成と初期設定

上記のフォルダ内にVSCodeを使って、Flaskアプリケーションの基本的なファイル（app.py）を作成します
app.py
```
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == '__main__':
    app.run(debug=True)
```
詳しいファイルの作成方法はこちらのサイトを参考にしてみてください
https://www.python.jp/python_vscode/windows/run/write_source.html
Flaskサーバーの起動
以下のコマンドでサーバーを起動します
```
python3 app.py
```
Flaskサーバー起動の確認
ブラウザで以下のURLにアクセスし、定型文が表示されることを確認します
```
 http://127.0.0.1:5000/ 
```

2. Vueプロジェクトの作成と初期設定

フロントエンド用の新しいディレクトリを作成します
```
npm create vue@latest
```
Viteをインストールします
```
npm install vite --save-dev
```
@Vitejsモジュールをインストールします
```
npm install @vitejs/plugin-vue --save-dev
```
App.vueを編集して、"Hello World" を表示するシンプルなコンポーネントを作成します
App.vueは「~/vue-project/src/App.vue」にあります
App.vue
```
<template>
  <div id="app">
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>
```
初期画面がうまく表示されるか確認します
まずはvueプロジェクト内のsrcフォルダに移動します
```
cd vue-project/src
```
vueを実行します
```
npm run dev
```
下記のような画面が表示できていれば成功です

記載のURLをブラウザで表示してみてください
（上記はhttp://localhost:5173/）

3. FlaskとVueの連携

Flaskサーバーが連携できるようにCORSをインストールします
```
pip3 install flask-cors
```

Flaskサーバー側でJSONデータを返すように「app.py」を変更します

app.py

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # CORSを有効にする

@app.route('/api/message')
def message():
    return jsonify({"message": "Hello from Flask!"})

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

VueでAxiosを使用して、Flaskからデータを取得できるようAxiosをインストールします
```
npm install axios
```

App.vueを編集し、Flaskからのメッセージを表示するように変更します

App.vue

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    axios.get('http://127.0.0.1:5000/api/message')
      .then(response => {
        this.message = response.data.message;
      });
  }
};
</script>

FlaskとVueが連携できているか確認します
Flaskを起動します
```
cd /move/to/app.pyFolder
python3 app.py
```
次にVueを起動します
別のコマンドプロンプト or ターミナルを開いて実行してください
```
cd /move/to/vue-project/src
npm run dev
```
以下の画像のように表示されれば成功です

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up