Windows上でFlaskの開発環境を構築する方法・データベース接続まで解説

Windows上でFlaskの開発環境を構築し、さらにデータベースに接続する方法まで解説します。

Flaskを使ってWebアプリを開発してみたいときに、参考にしてください。

Windows上でFlaskの開発環境を構築する方法
Windows上でFlaskのWebアプリ用のデータベースを作る方法
さいごに

Windows上でFlaskの開発環境を構築する方法

まずは環境の構築方法を説明します。なお、下記についてはあらかじめインストールしたという前提でお伝えしていきます。

Python 3 (すでにインストールされていることを確認してください)
テキストエディター（VSCodeなど）

仮想環境の作成

プロジェクトを作成したい場所に、「test」という名前のフォルダを作ります。この場所で、Windows Power Shellを起動します。

次のコマンドを実行して仮想環境を作成します。

python -m venv venv

仮想環境のアクティベーション

以下のコマンドを使用して、仮想環境をアクティベートします。

.venv\Scripts\activate

ライブラリのインストール

Flask ライブラリを仮想環境にインストールします。ひとつずつライブラリをインストールする場合は、次のコマンドを実行します。

pip install Flask

既にrequirements.txtに必要なライブラリを記載してしている場合は下記のコマンドで、一気にライブラリをインストールできます。

requirements.txt は、Python プロジェクトで使用される外部ライブラリやパッケージの依存関係をリスト化したファイルです。

pip install -r requirements.txt

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)

アプリケーションの実行

以下のようにファイル名を指定してコマンドを実行します。

python app.py

ブラウザで http://127.0.0.1:5000/ にアクセスし、アプリケーションが正しく実行されていることを確認します。

プログラムを停止するには、コマンドライン上でCtrl+Cを実行します。仮想環境を非アクティブにするには、deactivate コマンドを実行します。

おまけ：依存関係の管理

もしrequirements.txtがまだない場合、以下のコマンドを実行すると、インストールされているパッケージのリストを作成できます。

pip freeze > requirements.txt

Windows上でFlaskのWebアプリ用のデータベースを作る方法

次にデータベース接続について説明します。

今回はXamppを使い、XamppにインストールされているphpMyAdminをデータベースとして接続する方法を解説します。

Xamppのインストール方法は、下記をご覧ください。

Laravel用にXAMPP(ザンプ）をインストール・設定する方法

Laravel（ララベル）を使う前に、準備すべきものがいくつかあります。XAMPP（ザンプ）を利用すると、一気に色々なものがインストールできるので、手間が省けます。XAMPPをWindowsにインストールする方法と注意点をまとめて説明してい...

XamppのApacheとMySQLを起動

Xamppのコントロールパネスを開き、Apache と MySQL を起動します。

ブラウザで http://localhost/phpmyadmin/ にアクセスして、phpMyAdmin を開きます。

データベースとテーブルの作成

phpMyAdmin のダッシュボードで「新規」をクリックし、「testuser」という名前のデータベースを作成します。

「testuser」データベースを選択し、「テーブルを作成する」に名前として「user」を入力し、必要な列数（3）を選択します。

ユーザーテーブルを作成するための列（id, name, created_at)を下記のように定義します。idはAIにチェックをいれます。created_atは、デフォルト値を指定しておきます。これにより、作成日時が自動で入るようになります。

.envの設定

先ほど作成したFlaskアプリの中に、.env ファイルを作成します。以下の内容でデータベース接続情報を設定します。

DATABASE_TYPE=mysql
DBAPI=pymysql
DB_USER='root' 
DB_PASSWORD='' 
DB_HOST='localhost' 
DB_PORT=3306
DB_NAME='testuser'

ライブラリのインストール

requirements.txtファイルを作成し、下記のように記入します。

Flask
Flask-SQLAlchemy
pymysql
python-dotenv

下記コマンドで、ライブラリをインストールします。

pip install -r requirements.txt

データベース接続情報を追加

Flask アプリケーション (app.py) にデータベース接続を追加します。

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from dotenv import load_dotenv
import os

load_dotenv()
app = Flask(__name__)

# 環境変数からデータベース設定を取得し、接続文字列を構築
database_type = os.getenv('DATABASE_TYPE')
dbapi = os.getenv('DBAPI')
user = os.getenv('DB_USER')
password = os.getenv('DB_PASSWORD')
host = os.getenv('DB_HOST')
port = os.getenv('DB_PORT')
database = os.getenv('DB_NAME')
app.config['SQLALCHEMY_DATABASE_URI'] = f"{database_type}+{dbapi}://{user}:{password}@{host}:{port}/{database}"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

# モデル定義
class User(db.Model):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(20))

# 最初の画面（ボタン表示）
@app.route('/')
def index():
    return render_template('index.html')

# データベースに保存
@app.route('/add_user', methods=['POST'])
def add_user():
    new_user = User(name='Dummy User')
    db.session.add(new_user)
    db.session.commit()
    return redirect(url_for('index'))

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

表示部分を作成

プロジェクトの中にtemplates/index.htmlを作り、次のようにボタンを作成しておきます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Add User</title>
</head>
<body>
    <form action="/add_user" method="post">
        <button type="submit">ユーザー追加</button>
    </form>
</body>
</html>

プロジェクト全体のファイル構造は下記のようになります。