Flask入門！PythonでWebアプリ作成まで初心者向けに解説

Pythonは、初心者にも学びやすく、多くの分野で活躍する人気のプログラミング言語。その中でも軽量フレームワーク「Flask」は、シンプルで直感的なWebアプリ開発が可能です。

この記事では、Windows PCを前提にFlaskの環境構築から簡単なWebアプリ作成までを分かりやすく解説します！👨‍💻

しおり

Flaskとは？そして選ばれる理由 🚀
環境構築：PythonとFlaskを準備する 💻
- Pythonのインストール
- 仮想環境を作成する
Flaskアプリを作ってみよう！🌟
- プロジェクト構造を作成
- 基本のWeb表示「Hello, World!」
Webページを作成しよう 🌐
- HTMLテンプレートの準備
フォームを使ってデータ送信 ✉️
- フォームページを作成
静的ファイルを扱う（画像やCSS） 🎨
データベースの基本操作 🗄️
まとめ 🏁

Flaskとは？そして選ばれる理由 🚀

Flaskは、Pythonで作られた軽量フレームワークで、以下の特徴を持っています。

軽量で自由度が高い：必要な機能だけを追加してアプリを構築可能。
学びやすい：最小限のコードで動作するので初心者にも優しい。
小規模アプリや個人開発に最適：プロトタイプやシンプルなアプリを短期間で作れる。

特に、「Pythonを少し学んだし、Webアプリも作りたい！」という人に最適です。

環境構築：PythonとFlaskを準備する 💻

Pythonのインストール

Pythonのダウンロード

公式サイトからPythonをダウンロード。
Windows向けの最新バージョンを選択します。

インストール

ダウンロードしたインストーラーを実行。
インストール画面で「Add Python to PATH」にチェックを入れ、Customize installation をクリック。
「pip」や「Python Launcher」にチェックが入っていることを確認し、インストールを完了させます。

インストール確認

python --version

ターミナルにバージョンが表示されればOKです。

仮想環境を作成する

仮想環境を使うと、プロジェクトごとに依存関係を分離できます。

プロジェクトフォルダを作成

mkdir Project
cd Project

仮想環境を作成

python -m venv venv

仮想環境を起動

venv\Scripts\activate

成功すると、コマンドプロンプトに (venv) と表示されます：

(venv) C:\path\to\Project>

Flaskのインストール

pip install flask

インストール確認

flask --version

Flaskアプリを作ってみよう！🌟

プロジェクト構造を作成

以下のような構造にします。


├── Project/
│   ├── __init__.py
│   ├── views.py
├── run.py

基本のWeb表示「Hello, World!」

アプリ初期化（__init__.py）

from flask import Flask

app = Flask(__name__)

import Project.views

ルート設定（views.py）

from Project import app

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

アプリ起動スクリプト（run.py）

from Project import app

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

サーバーの起動

仮想環境を有効にした状態で以下を実行。

python run.py

ブラウザで確認

http://127.0.0.1:5000 にアクセスすると、「Hello, World!」が表示されます！🎉

Webページを作成しよう 🌐

次に、HTMLテンプレートを使ったWebページを作成します。

HTMLテンプレートの準備

テンプレートフォルダを作成

Project/ 
├── templates/ 
│     └── index.html

HTMLファイルを作成(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Webアプリ作成</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
</body>
</html>

Pythonコードでデータを渡す

views.py↓

from Project import app
from flask import render_template

@app.route("/")
def home():
    return render_template("index.html", title="Flaskアプリ", message="ページを表示！")

ブラウザで確認

http://127.0.0.1:5000 にアクセスすると、

フォームを使ってデータ送信 ✉️

ディレクトリ構造

├── Project/
│   ├── __init__.py
│   ├── views.py
│   ├── templates/ 
│          └── index.html
│　        └── other1.html
├── run.py

フォームを使って、ユーザーからの入力を受け取ります。

フォームページを作成

HTMLフォームの作成(other1.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォーム送信</title>
</head>
<body>
    <h1>フォームからのデータ送信</h1>
    <form action="/other1" method="POST">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <button type="submit">送信</button>
    </form>
</body>
</html>

データ受け取り処理

views.py↓

from Project import app
from flask import render_template, request

@app.route("/")
def home():
    return render_template("index.html", title="Flaskアプリ", message="ページを表示！")

@app.route("/other1", methods=["GET", "POST"])
def other1():
    if request.method == "POST":
        name = request.form["name"]
        return f"こんにちは、{name}さん！"
    return render_template("other1.html")

ブラウザで名前を入力して送信すると、メッセージが表示されます。

↓↓↓

↓↓↓

静的ファイルを扱う（画像やCSS） 🎨

Flaskで画像やCSS、JavaScriptを使用するには、staticフォルダを利用します。

ディレクトリ構造

Project/
├── static/
│     ├── images/
│     │     └── flask-logo.png
│     ├── css/
│     │     └── style.css

HTMLで静的ファイルを読み込む

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<img src="{{ url_for('static', filename='images/flask-logo.png') }}" alt="Flaskロゴ">

CSSファイルの例

/* static/css/style.css */
body {
    background-color:hsl(104, 49.50%, 80.60%);
    font-family: Arial, sans-serif;
}

ブラウザで確認して、スタイルが適用されていればOKです！

今までのディレクトリ構造

├── Project/
│    ├── __init__.py
│    ├── views.py
│    ├── templates/ 
│    │    ├── index.html
│    │    └── other1.html
│    ├── static/
│    │    ├── images/
│    │    │     └── flask-logo.png
│          └── css/
│                 └── style.css
├── run.py

データベースの基本操作 🗄️

データの保存や管理にはデータベースが必要です。ここではSQLiteを使った基本的なCRUD操作を説明します。

ディレクトリ構造

├── Project/
│    ├── __init__.py
│    ├── views.py
│    ├── models.py # モデルを定義
│    ├── templates/ 
│    │    ├── index.html
│    │    └── other1.html
│    │    └── users.html
│    ├── static/
│    │    ├── images/
│    │    │     └── flask-logo.png
│          └── css/
│                 └── style.css
├── instance/
│　 　└── app.db    # SQLiteデータベース
│　
├── run.py

instance/app.db は、アプリの初回実行時にflask-sqlalchemyによって自動生成され、定義されたモデルに基づいてテーブルが作成されます。

Flask-SQLAlchemyのインストール

pip install flask-sqlalchemy

データベース設定

アプリとデータベースの設定を行います。

__init__.py ↓↓

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# データベース設定
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///app.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
db = SQLAlchemy(app)

import Project.views
import Project.models

モデル（テーブル）の作成

データベースのテーブル構造（モデル）を定義します。

models.py ↓↓

from Project import db

# ユーザーテーブルのモデル定義
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)  # 主キー
    name = db.Column(db.String(80), nullable=False)  # 名前（必須）
    email = db.Column(db.String(120), nullable=True)  # 必須ではない場合はnullable=Trueにする

    def __repr__(self):
        return f"<User {self.name}>"

データの登録と取得

データベース操作のルートを追加します。

views.py ↓↓

from Project import app, db
from Project.models import User
from flask import render_template, request, redirect, url_for

@app.route("/")
def home():
    return render_template("index.html", title="Flaskアプリ", message="ページを表示！")

@app.route("/other1", methods=["GET", "POST"])
def other1():
    if request.method == "POST":
        name = request.form["name"]
        email = request.form.get("email")  # フォームからemailを取得
        user = User(name=name, email=email) # 登録
        db.session.add(user)  # 登録
        db.session.commit()   # 登録
        return f"こんにちは、{name}さん！ メールアドレス: {email}"
    return render_template("other1.html")

@app.route("/users")
def show_users():
    users = User.query.all()  # 取得
    return render_template("users.html", users=users)

登録されたユーザーを一覧表示します。

users.html ↓↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>一覧表</title>
</head>
<body>
    <h1>ユーザー一覧</h1>
    <ul>
        {% if users %}
            {% for user in users %}
                <li>{{ user.name }} - {{ user.email or "メール未登録" }}</li>
            {% endfor %}
        {% else %}
            <p>ユーザーが登録されていません。</p>
        {% endif %}
    </ul>
</body>
</html>

動作確認

↓↓

↓↓

↓↓

まとめ 🏁

この記事では、Windows PCを使ったPython Flaskの環境構築から、簡単なWebアプリの作成までを紹介しました。

PythonとFlaskのセットアップ
「Hello, World!」アプリ作成
HTMLテンプレートで動的ページ作成
フォームとデータ送信
静的ファイルの扱い
データベースとの連携

あなたのアイデアを形にしたWebアプリを作りましょう！✨

以下のリンクでは、Pythonに関する記事をまとめています。各記事をクリックして、詳しい情報をご確認ください。