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

# 定型文を表示するのみのアプリ開発
:::note info
本記事のコマンドはMacに対応しています
Windowsの場合はpython3, pip3をpython, pipに置き換えてください（3を削除）
:::

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

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

## 2. 開発環境の構築

### 必要なツールとソフトウェアの準備
以下の作業を順番に行っていきます:
1. Python 3.xのインストール
1. 仮想環境の構築
1. Flaskのインストール
1. Node.jsのインストール

### 1. Python 3.xのインストール
手順についてはこちらのサイトを参考に実行してください

https://kinsta.com/jp/knowledgebase/install-python/#mac

### 2. 仮想環境の構築
:::note info
以降のコマンド作業は「ターミナル(Mac) or コマンドプロンプト(Windows)」で行ってください（検索で出てきます）
:::
1. 新しいディレクトリを作成し、そこに移動します  
    （こちらはコマンドで作成する例ですが、通常通りの方法で作成しても問題ありません）
    ```bash
    mkdir /make/your/folder/my_flask_app
    cd /make/your/folder/my_flask_app
    ```
    <br>
1. 仮想環境を作ります
    ```bash
    python3 -m venv venv
    ```
    <br>
1. 仮想環境を有効化します
    ```bash:Mac
    source venv/bin/activate
    ```
    ```bash:Windows
    venv¥Scripts¥activate
    ```
    以下のように、先頭に(venv)が表示されれば成功です
    ```bash
    (venv) hoge@hoge %
    ```

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

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

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

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

### ファイルの作成や連携
以下の作業を順番に行っていきます:
0. VS Codeのインストール
1. Flaskアプリケーションの作成と初期設定
1. Vueプロジェクトの作成と初期設定
1. FlaskとVueの連携

### 0. Flaskアプリケーションの作成と初期設定
[VS Codeの公式サイト](https://code.visualstudio.com/)からVSCodeアプリをインストールしましょう

### 1. Flaskアプリケーションの作成と初期設定
1. 上記のフォルダ内にVSCodeを使って、Flaskアプリケーションの基本的なファイル（app.py）を作成します
    ```python: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

    <br>
1. Flaskサーバーの起動
    以下のコマンドでサーバーを起動します
    ```bash
    python3 app.py
    ```
    <br>
1. Flaskサーバー起動の確認
    ブラウザで以下のURLにアクセスし、定型文が表示されることを確認します
    ```bash
     http://127.0.0.1:5000/ 
    ```
    <br>
    
### 2. Vueプロジェクトの作成と初期設定
1. フロントエンド用の新しいディレクトリを作成します
    ```bash
    npm create vue@latest
    ```
    <br>
1. Viteをインストールします
    ```bash
    npm install vite --save-dev
    ```
    <br>
1. @Vitejsモジュールをインストールします
    ```bash
    npm install @vitejs/plugin-vue --save-dev
    ```
    <br>
1. App.vueを編集して、"Hello World" を表示するシンプルなコンポーネントを作成します
    App.vueは「~/vue-project/src/App.vue」にあります
    ```vue:App.vue
    <template>
      <div id="app">
        <h1>Hello World</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
    };
    </script>
    ```
    <br>
1. 初期画面がうまく表示されるか確認します
    まずはvueプロジェクト内のsrcフォルダに移動します
    ```bash
    cd vue-project/src
    ```
    vueを実行します
    ```bash
    npm run dev
    ```
    
    下記のような画面が表示できていれば成功です
    ![スクリーンショット 2024-08-14 14.43.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860145/71a22737-a0f1-ed56-83f4-52101017d787.png)
    
    記載のURLをブラウザで表示してみてください
    （上記は[http://localhost:5173/](http://localhost:5173/)）


### 3. FlaskとVueの連携
1. Flaskサーバーが連携できるようにCORSをインストールします
    ```bash
    pip3 install flask-cors
    ```
    <br>
1. Flaskサーバー側でJSONデータを返すように「app.py」を変更します
    ```python: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)
    ```
    <br>
1. VueでAxiosを使用して、Flaskからデータを取得できるようAxiosをインストールします
    ```bash
    npm install axios
    ```
    <br>
1. App.vueを編集し、Flaskからのメッセージを表示するように変更します
    ```vue: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>
    ```
    <br>
1. FlaskとVueが連携できているか確認します
    Flaskを起動します
    ```bash
    cd /move/to/app.pyFolder
    python3 app.py
    ```
    <br>
    次にVueを起動します<br>
    別のコマンドプロンプト or ターミナルを開いて実行してください
    
    ```bash
    cd /move/to/vue-project/src
    npm run dev
    ```
    以下の画像のように表示されれば成功です
    ![スクリーンショット 2024-08-14 15.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860145/d6f78b46-becb-2e91-07d7-b522456403bc.png)

### 4. さらに汎用的なアプリの開発
こちらに記事を書きました---->[VueとFlaskでWebアプリを簡単に構築してみた-その2（汎用性の向上[Flaskで任意処理を実施]）-](https://qiita.com/Takeshi_Nagayasu/items/9746b847902e09e9bf29)