Vue.jsとFlaskを組み合わせたSPA開発ガイド

Vue.jsとFlaskの概要

Vue.jsとFlaskは、それぞれフロントエンドとバックエンドの開発に使用される人気のあるJavaScriptとPythonのフレームワークです。

Vue.jsは、ユーザーインターフェースを構築するためのプログレッシブフレームワークです。Vue.jsの主な目標は、開発者が高品質のユーザーインターフェースを簡単に作成できるようにすることです。そのため、Vue.jsはコンポーネントベースのアーキテクチャを採用しており、開発者が再利用可能なコンポーネントを作成し、それらを組み合わせて複雑なユーザーインターフェースを構築できます。

一方、Flaskは、Pythonで書かれた軽量なウェブアプリケーションフレームワークです。Flaskは「マイクロ」フレームワークとも呼ばれ、その主な理由は、Flaskが小さく、簡単に理解でき、必要なものだけを提供することです。しかし、Flaskは拡張性が高く、プラグインを使用して追加の機能を追加することができます。

Vue.jsとFlaskを組み合わせることで、開発者はフロントエンドとバックエンドの両方で強力なツールを使用でき、効率的にシングルページアプリケーションを開発できます。これらのフレームワークは、それぞれが独立して機能することができ、それぞれが自身の役割に集中できるため、組み合わせて使用するのが理想的です。Vue.jsはユーザーインターフェースの構築を担当し、Flaskはサーバーサイドのロジックを処理します。

開発環境の設定

Vue.jsとFlaskの開発環境を設定するためには、以下の手順を実行します。

Node.jsとnpmのインストール

まず、Vue.jsの開発に必要なNode.jsとnpmをインストールします。以下のコマンドを実行してください。

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Vue CLIのインストール

次に、Vue.jsのプロジェクトを作成するためのVue CLIをインストールします。

$ npm install -g @vue/cli

Pythonとpipのインストール

Flaskの開発に必要なPythonとpipをインストールします。

$ sudo apt-get update
$ sudo apt-get install python3.8 python3-pip

Flaskのインストール

最後に、Flaskをインストールします。

$ pip3 install flask

これで、Vue.jsとFlaskの開発環境が整いました。次のステップは、フロントエンドとバックエンドの準備です。

フロントエンドの準備: Vue.js

Vue.jsのフロントエンド開発環境を設定するためには、以下の手順を実行します。

Vue.jsプロジェクトの作成

まず、Vue CLIを使用して新しいVue.jsプロジェクトを作成します。以下のコマンドを実行してください。

$ vue create my-project

このコマンドを実行すると、対話式のプロジェクト設定が開始されます。必要な設定を選択し、プロジェクトの作成を進めてください。

プロジェクトの実行

プロジェクトが作成されたら、そのディレクトリに移動し、以下のコマンドを実行してプロジェクトを起動します。

$ cd my-project
$ npm run serve

これで、Vue.jsのフロントエンド開発環境が整いました。次のステップは、バックエンドの準備: Flaskです。

バックエンドの準備: Flask

Flaskのバックエンド開発環境を設定するためには、以下の手順を実行します。

新しいFlaskアプリケーションの作成

まず、新しいFlaskアプリケーションを作成します。以下のコマンドを実行してください。

$ mkdir my-flask-app
$ cd my-flask-app
$ touch app.py

Flaskアプリケーションの設定

次に、app.pyファイルを開き、以下のコードを追加します。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

このコードは、最も基本的なFlaskアプリケーションを作成します。@app.route('/')デコレータは、ルートURL（http://localhost:5000/）にアクセスしたときに実行される関数を指定します。

Flaskアプリケーションの実行

最後に、以下のコマンドを実行してFlaskアプリケーションを起動します。

$ export FLASK_APP=app.py
$ flask run

これで、Flaskのバックエンド開発環境が整いました。次のステップは、Vue.jsとFlaskの統合です。

Vue.jsとFlaskの統合

Vue.jsとFlaskを統合するためには、以下の手順を実行します。

Vue.jsのビルド設定

まず、Vue.jsのビルド設定を変更します。これにより、ビルドされたVue.jsのアプリケーションがFlaskアプリケーションから直接配信できるようになります。

Vue.jsプロジェクトのルートディレクトリにあるvue.config.jsファイルを開き、以下のコードを追加します。

module.exports = {
  outputDir: '../my-flask-app/static',
  publicPath: process.env.NODE_ENV === 'production'
    ? '/static/'
    : '/'
}

この設定により、Vue.jsのアプリケーションはmy-flask-app/staticディレクトリにビルドされます。

Flaskアプリケーションの設定

次に、Flaskアプリケーションを設定して、Vue.jsのアプリケーションを配信できるようにします。

app.pyファイルを開き、以下のコードを追加します。

from flask import Flask, render_template

app = Flask(__name__, static_folder="static")

@app.route('/')
def hello_world():
    return render_template('index.html')

この設定により、Flaskアプリケーションはstaticディレクトリから静的ファイルを配信し、ルートURLにアクセスしたときにはindex.htmlを表示します。

Vue.jsとFlaskの統合

最後に、Vue.jsとFlaskを統合します。

Vue.jsプロジェクトのルートディレクトリで以下のコマンドを実行して、Vue.jsのアプリケーションをビルドします。

$ npm run build

その後、Flaskアプリケーションを起動します。

$ export FLASK_APP=app.py
$ flask run

これで、Vue.jsとFlaskの統合が完了しました。これにより、Vue.jsで作成したフロントエンドとFlaskで作成したバックエンドを一緒に使用できます。これは、シングルページアプリケーションの開発に非常に便利です。