Flaskとフロントエンドを組み合わせた構成のベストプラクティス集！初心者でも理解できる完全ガイド

Flaskとフロントエンドを組み合わせた構成のベストプラクティス集

先生と生徒の会話形式で理解しよう

生徒

「FlaskでWebアプリを作っているんですが、HTMLやJavaScriptをどう組み合わせるのが正しいのか分かりません。どんな構成にすればいいですか？」

先生

「Flaskとフロントエンドの構成にはいくつかの“ベストプラクティス”があります。これは、後で困らないための設計ルールのようなものです。今回は初心者にも分かりやすく、フォルダ構成から開発の考え方まで解説していきましょう。」

生徒

「お願いします！できれば具体的な例も見たいです。」

先生

「もちろんです。FlaskでHTML、CSS、JavaScriptを使う基本構成から、一歩進んだフロントエンド分離型の開発まで紹介します。」

1. Flaskとフロントエンドの関係を理解しよう

まず、FlaskはPythonで動くWebアプリケーションフレームワークです。簡単に言うと、「Webサイトの裏側（サーバー）」を担当します。一方、HTMLやCSS、JavaScriptは「見た目（フロントエンド）」を担当します。

つまり、Flaskは“料理を作るシェフ”、フロントエンドは“その料理をお客様に見せるお皿や盛り付け”のような関係です。

この2つをうまく連携させると、機能的で美しいWebアプリが作れるのです。

2. Flaskプロジェクトの基本構成

まずは、FlaskでHTMLやCSSを使うときの基本的なフォルダ構成を見てみましょう。


my_flask_app/
│
├── app.py
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── logo.png
└── templates/
    └── index.html

templatesフォルダにはHTMLファイル、staticフォルダにはCSS・JavaScript・画像などを入れます。これはFlaskが決めたルールで、特別な設定をしなくても自動で認識してくれます。

3. FlaskとHTMLを連携させる基本

Flaskでは、PythonのコードからHTMLテンプレートを呼び出すことで、Webページを動的に表示します。


from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html", title="Flaskとフロントエンド連携サンプル")

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


<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Flaskとフロントエンドの連携！</h1>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

このように、Flaskのrender_template関数でHTMLを呼び出し、url_for()で静的ファイルを指定するのが基本です。

4. Jinja2テンプレートで効率的にHTMLを作る

Flaskでは、Jinja2（ジンジャツー）というテンプレートエンジンを使って、変数の埋め込みや繰り返し表示ができます。たとえば、商品リストを自動で出力することができます。


@app.route("/products")
def products():
    items = ["パソコン", "スマートフォン", "タブレット"]
    return render_template("products.html", items=items)


<!-- templates/products.html -->
<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

このように{% for %}や{{ }}を使えば、PythonのリストをHTMLに簡単に表示できます。テンプレートを使うことで、複数ページでもデザインを統一しやすくなります。

5. JavaScriptとの連携で動きをつける

FlaskのHTMLテンプレートは、普通のWebページと同じようにJavaScriptを使うことができます。たとえば、ボタンを押すとFlaskからデータを取得する処理を追加できます。


from flask import jsonify

@app.route("/api/message")
def message():
    return jsonify({"text": "Flaskからこんにちは！"})


<button id="btn">メッセージを取得</button>
<p id="output"></p>

<script>
document.getElementById("btn").addEventListener("click", () => {
    fetch("/api/message")
      .then(response => response.json())
      .then(data => {
          document.getElementById("output").innerText = data.text;
      });
});
</script>

これで、ボタンをクリックするたびにサーバーからメッセージを取得し、ページに表示できます。FlaskとJavaScriptの連携の第一歩です。