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

生徒

「先生、Flaskってよく聞くんですけど、フロントエンドとどう関係があるんですか？」

先生

「とても良い質問ですね。Flask（フラスク）はPythonで作られた“Webアプリの後ろ側”、つまりサーバー側を担当する仕組みなんです。」

生徒

「えっ？サーバー側？フロントエンドっていうのもよく聞きますけど、それとは違うんですか？」

先生

「そうですね。フロントエンドは“見える部分”、Flaskは“見えない部分”の役割を持っています。では、もう少し詳しく見てみましょう！」

1. Flaskとは？Pythonで作るWebアプリの裏側担当

Flask（フラスク）は、Pythonというプログラミング言語で作られた軽量なWebフレームワークです。「フレームワーク」とは、Webサイトを作るときに必要な機能をまとめた“道具箱”のようなものです。

Flaskを使うと、難しい設定を一から行わなくても、Webアプリケーション（Web上で動くアプリ）を簡単に作ることができます。

例えば、ブラウザで「こんにちは！」と表示する簡単なWebページを作るには、次のようなPythonコードを書きます。


from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "こんにちは！Flaskの世界へようこそ！"

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

このコードを実行すると、自分のパソコンでWebサーバーが起動し、ブラウザに「こんにちは！Flaskの世界へようこそ！」と表示されます。

2. フロントエンドとは？ユーザーが見て触る部分

フロントエンドとは、ユーザーが実際に見る部分、つまり画面のデザインやボタン、入力フォームなどのことです。例えば、あなたがネットショッピングのサイトで「カートに入れる」ボタンを押すとき、それはフロントエンドの仕組みが動いています。

フロントエンドでは主に以下の3つの言語が使われます。

HTML（エイチティーエムエル）：Webページの構造を作る
CSS（シーエスエス）：デザインや色をつける
JavaScript（ジャバスクリプト）：動きをつける

例えば、Flaskで作ったWebページにHTMLを使って「ようこそ！」という文字を表示する場合は、次のようにします。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flaskの練習</title>
</head>
<body>
    <h1>ようこそ！Flaskとフロントエンドの世界へ！</h1>
</body>
</html>

このHTMLファイルをFlaskと組み合わせることで、ブラウザに綺麗なページを表示することができます。

3. Flaskとフロントエンドの関係を図でイメージしよう

初心者の方がイメージしやすいように、Flaskとフロントエンドの関係を「レストラン」にたとえて説明します。

フロントエンド：お客さんが見るメニューや料理（見える部分）
Flask：料理を作るキッチン（見えない部分）
ブラウザ：お客さん（ユーザー）が料理を注文する場所

お客さんが「注文ボタン」を押すと、Flaskがその情報を受け取り、必要なデータを用意して、料理（ページ）としてお客さんに返します。つまり、Flaskはデータを処理して、フロントエンドに渡す役目を持っています。

4. FlaskでHTMLテンプレートを使う方法

Flaskでは、テンプレートエンジン（てんぷれーとえんじん）という仕組みを使ってHTMLとPythonを組み合わせることができます。 Flaskでは「Jinja2（じんじゃツー）」というテンプレートエンジンが標準で使われています。


from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", name="太郎")

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

このコードでは、Flaskがtemplatesフォルダの中にあるindex.htmlを探し、その中でPythonから渡されたデータ（name="太郎"）を使います。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flaskテンプレート</title>
</head>
<body>
    <h1>{{ name }}さん、こんにちは！</h1>
</body>
</html>

これを実行すると、ブラウザには「太郎さん、こんにちは！」と表示されます。つまり、FlaskがPythonでデータを用意し、HTMLがそのデータを表示するという流れです。