【Python】FlaskでWebアプリケーションを作る④ -画面をHTMLで表現する

2025年2月3日
2026年3月8日
Flask
Flask, Python

Flask

これまでの記事では、Flaskのコード内にHTMLを直接記述してレスポンスを返していました。しかし、実際のWebアプリケーションではHTMLの記述量が膨大になるため、HTMLファイルを別ファイルとして管理するのが一般的です。

この記事では、Flaskでrender_template()を使ってHTMLファイルを読み込み、画面を表示する方法を解説します。

1 FlaskスクリプトにHTMLを直接埋め込む方法
2 FlaskからHTMLファイルを読み込む方法
3 templatesフォルダ以外でHTMLファイルを管理する場合
4 まとめ

FlaskスクリプトにHTMLを直接埋め込む方法

まず、これまでの方法を確認します。以下のように、関数の戻り値にHTMLを直接記述する方法です。

from flask import Flask

app = Flask(**name**)

@app.route("/")
def main_page():
    return "<p>This is the main page</p>"

if **name** == "**main**":
    app.run()

この方法は簡単ですが、HTMLが複雑になると以下のような問題が発生します。

可読性の低下: Pythonコードの中にHTMLが混在し、どちらのコードなのか判別しづらくなる
保守性の低下: HTMLの修正にPythonファイルを編集する必要があり、意図しないバグを生みやすい
責務の混在: FlaskのビジネスロジックとHTMLの表示ロジックが分離されず、コードの見通しが悪くなる

そのため、一般的にはHTMLファイルを別ファイルとして管理し、Flaskから読み込む方法が推奨されます。

FlaskからHTMLファイルを読み込む方法

HTMLファイルの準備

まず、表示するHTMLファイルを作成します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML Sample</title>
</head>
<body>
  <div class="main">
    <h1>サンプルページ</h1>
    <p>HTMLファイルから読み込んだページです</p>
  </div>
</body>
</html>

ディレクトリ構成

HTMLファイルはtemplatesディレクトリの中に配置します。FlaskはデフォルトでtemplatesフォルダをHTMLファイルの格納場所として参照します。

sample_app
├─ main.py
└─ templates
    └─ index.html

Flaskコードの実装

render_template()を使ってHTMLファイルを読み込みます。この関数を使用するには、flaskパッケージからrender_templateをインポートする必要があります。

from flask import Flask, render_template

app = Flask(**name**)

@app.route("/")
def main_page():
    return "<p>This is the main page</p>"

@app.route("/htmlFile")
def html_page():
    return render_template('index.html')

if **name** == "**main**":
    app.run()

render_template()の引数にはHTMLファイル名を指定します。templates/index.htmlのようにディレクトリパスを含める必要はなく、ファイル名のみで参照できます。

render_template()の仕組み

render_template()は、内部的に以下の処理を行います。

templatesディレクトリからHTMLファイルを検索する
Jinja2テンプレートエンジンでHTMLを処理する
処理結果をクライアントにレスポンスとして返す

Jinja2テンプレートエンジンにより、HTMLファイル内で変数の埋め込みや条件分岐、ループなどの動的な処理が可能になります。


# テンプレートに変数を渡す例

@app.route("/user/<name>")
def user_page(name):
    return render_template('user.html', username=name)

templatesフォルダ以外でHTMLファイルを管理する場合

デフォルトのtemplatesフォルダ以外にHTMLファイルを配置したい場合は、Flask()コンストラクタのtemplate_folder引数で指定します。

app = Flask(**name**, template_folder='my_templates')

この指定により、render_template()はmy_templatesフォルダからHTMLファイルを検索するようになります。

ポイント: 特別な理由がない限り、デフォルトのtemplatesフォルダを使用することを推奨します。チーム開発やフレームワークの慣習に沿った構成にすることで、他の開発者が理解しやすくなります。

まとめ

この記事では、FlaskでHTMLファイルを読み込んで画面を表示する方法を解説しました。

HTMLは別ファイルとして管理し、Pythonコードと分離するのが基本
render_template()でtemplatesフォルダ内のHTMLファイルを読み込む
template_folder引数で格納先のフォルダ名を変更できる
Jinja2テンプレートエンジンにより、HTMLに動的な処理を組み込める

FlaskスクリプトとHTML（CSS・JavaScriptも含む）をそれぞれ独立したファイルとして管理することで、コードの可読性と保守性が大きく向上します。