Flask入門|render_template関数を理解しよう【チャプター2-04】

ながみえ

一つ前のページではurl_for関数について学習しました。

今回は render_template関数 について見ていきましょう。

Chapter1:Flask入門編
Chapter2:Jinja2入門編

 ・Chapter2-1:Jinja2とは何か|テンプレートエンジン入門
 ・Chapter2-2:テンプレートの継承を理解しよう
 ・Chapter2-3:url_for関数を理解しよう
 ・Chapter2-4:render_template関数を理解しよう ◁今回はここ
 ・Chapter2-5:テンプレートと繰り返し処理
 ・Chapter2-6:テンプレートと分岐処理
Chapter3:フィルター編
Chapter4:フォーム編
Chapter5:データベース編
Chapter6:Flaskの便利機能編
Chapter7:アプリ開発編

FlaskでWebアプリケーションを作る際、HTMLファイルにPython側から値を渡して表示することがとても重要になります。

その橋渡しをしてくれるのが render_template関数 です。

この関数を使えば、HTMLのテンプレートとPythonコードをうまく組み合わせて、ユーザーごとに異なる内容を表示するような動的なページを簡単に作ることができます。

この記事では、render_template 関数の基本的な使い方について、具体的なコード例と共にわかりやすく解説していきます。

<<前のページ

Flaskの記事一覧

次のページ>>

render_template関数の役割と使い方を初心者向けにやさしく解説

【Python】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

render_template とは直訳すると「テンプレートを描画する」という意味で、FlaskにおいてHTMLテンプレートを表示する際に使われる関数です。

例えば「ユーザー名を表示する」ようなページを作りたいとき、Python側のコードでユーザー名を変数として定義し、それをHTMLに渡して表示させる場面があります。

そんなときに render_template 関数を使います。

PythonコードとHTMLテンプレートの連携例で理解する単一データの渡し方

テンプレートに渡す値が一つである場合は、以下のような書き方をします。

render_template("テンプレートファイル名", 変数名=値)

テンプレートファイルは templates フォルダ内に保存されている必要があります。

任意のフォルダ/
├── app.py
└── templates/(フォルダ)
    └── テンプレート.html

また変数名はテンプレート内で使用する名前、値はPython側で定義された値になります。

例えば、ユーザー名を渡して表示するコードを見てみましょう。以下の二つのコードをコピーして保存し、実行してみてください。

from flask import Flask, render_template  # flaskモジュールの中のFlaskクラスとrender_template関数をインポート
app = Flask(__name__)

@app.route("/")  # もしこのURLにアクセスされたら
def index():
    user_name = "太郎"  # 表示させたい名前
    return render_template("hello.html", name = user_name)  # nameという名前でテンプレートに渡す
		 # render_template("テンプレートファイル名", 変数名=値)
  
if __name__ == "__main__":
    app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>
    <h1>こんにちは、{{ name }}さん!</h1>
</body>
</html>
  • user_name というPython側の変数を name という名前でテンプレートに渡しています。
  • HTML側では {{ name }} と書くことでその値を表示できます。
  • テンプレート内の {{ }} は「この中の変数を表示」という意味になります。

h3: 複数データをまとめて渡す方法と実用例

テンプレートに渡す値が複数ある場合は、以下のような書き方をします。

render_template("テンプレートファイル名", 変数名1=値1, 変数名2=値2, ...)

複数の値を同時に渡す場合も、同様にキーワード引数で指定します。

名前と年齢を表示するコードの例を見てみましょう。

from flask import Flask, render_template  # flaskモジュールの中のFlaskクラスとrender_template関数をインポート
app = Flask(__name__)

@app.route("/profile")  # もしこのURLにアクセスされたら
def profile():
    user_name = "花子"  # 表示させたい名前
    user_age = 25       # 表示させたい年齢
    return render_template("profile.html", name = user_nam, age = user_age)
		 # render_template("テンプレートファイル名", 変数名1=値1, 変数名2=値2, ...)
  
if __name__ == "__main__":
    app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
    <title>プロフィール</title>
</head>
<body>
    <h1>プロフィールページ</h1>
    <p>名前:{{ name }}</p>
    <p>年齢:{{ age }}歳</p>
</body>
</html>
  • Python側で user_nameuser_age を定義し、それぞれ nameage としてテンプレートに渡しています。
  • テンプレートでは {{ name }}{{ age }} を使って表示します。
  • 複数のデータを一度に渡せることで、より柔軟なテンプレートが作れるようになります。

Render_templateの基本を押さえてFlaskアプリに活用しよう!

render_template 関数は、Flaskにおけるテンプレート(HTML)とPythonの値をつなぐ重要な関数です。

1つの値を渡すのも、複数の値を渡すのも基本構文は簡単で、初心者でも直感的に使いやすく設計されています。

次回の記事では、テンプレート内での繰り返し処理(for文)について学び、より動的で実用的なページの作り方を学習していきましょう。

練習問題:本のタイトルと著者名をWebページで表示するアプリを作ろう

【Python】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

この問題では、Python側で定義した「本のタイトル」と「著者名」をテンプレートに渡し、それらの情報をWebページ上に表示するアプリを作成します。

テンプレートでは変数を使って受け取った値を画面に表示できるようにしてください。

この問題の要件

以下の要件に従ってコードを完成させてください。

  • / にアクセスしたときに、「本のタイトル」と「著者名」の2つの情報をテンプレートに渡して表示すること
  • タイトルには「吾輩は猫である」、著者には「夏目漱石」という文字列を使用すること
  • render_template() 関数を使用して、テンプレートファイル(book.html)を返すこと
  • book.html では、渡された2つの情報を {{ }} を使ってHTML上に表示すること
  • HTMLには「タイトル:」と「著者:」というラベルをつけて表示すること

ただし、以下のような実行結果となるコードを書くこと。

おすすめの本

タイトル:吾輩は猫である  
著者:夏目漱石

正解コード

例えば、以下のようなプログラムが考えられます。

Q
正解コード
from flask import Flask, render_template

# Flaskのアプリケーションオブジェクトを作成
app = Flask(__name__)

# "/" にアクセスがあったときに実行される処理
@app.route("/")
def show_info():
    # 表示させたい情報(今回は本のタイトルと著者名)
    # → 今回の記事で学んだ「テンプレートに複数の値を渡す方法」を使用
    title = "吾輩は猫である"
    author = "夏目漱石"
    
    # render_template関数を使って、テンプレートファイルを表示
    # この関数はテンプレートと値を結びつけてHTMLとして返す
    return render_template("book.html", book_title=title, book_author=author)

# Flaskアプリを起動(デバッグモードON)
if __name__ == "__main__":
    app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おすすめの本</title>
</head>
<body>
    <h1>おすすめの本</h1>

    <!-- Pythonから渡された「book_title」と「book_author」を表示 -->
    <!-- {{ }} はJinja2の構文で、変数の中身をテンプレート内に表示する -->
    <p>タイトル:{{ book_title }}</p>
    <p>著者:{{ book_author }}</p>
</body>
</html>

<<前のページ

Flaskの記事一覧

次のページ>>

FAQ|render_template関数の使い方に関するよくある質問

Q
Q1. render_template関数で渡せるのは変数だけですか?

いいえ、変数以外にも辞書やリスト、数値や文字列などの基本データ型も渡せます。ただし、テンプレート内で扱いやすいように、辞書形式で渡すのが一般的です。

Q
Q2. render_templateで指定するHTMLファイルはどこに置くべきですか?

通常は「templates」フォルダの中にHTMLファイルを置きます。Flaskはこのフォルダ名をデフォルトで認識するので、特別な設定なしで読み込むことができます。

Q
Q3. render_template関数の引数に日本語の変数名を使っても大丈夫ですか?

Pythonとしてはエラーにならない場合もありますが、テンプレート側との整合性や可読性の観点から、英語の変数名を使うのが推奨されます。

質問用コンタクトフォーム

この記事を書くにあたりAIを活用しています。

人間の目による確認も行っていますが、もし間違い等ありましたらご指摘頂けると大変助かります。

記事URLをコピーしました