[python]Flask入門　Jinja2を用いてhtmlを動的に表示

はじめに
Jinja2について
テンプレートに値を設定する
パラメーターを渡して動的に表示させる
まとめ

はじめに

Python側でセットしたパラメータをFlaskで使用されるJinja2という仕組みを用いてhtmlを動的に作成します。

しげっち

Flask+jinja2の基本的な使い方について解説するよ。

にゃーすけ

はりきっていってみよう！

Flask学習におすすめの本を紹介します。
⇨【Python】Flask入門におすすめの本 3選

Jinja2について

表示させるhtmlの内容は、ユーザーの操作により異なります。
ユーザーが操作した選択肢の数だけhtmlファイルを準備すると膨大な量になります。

そこでユーザーの操作に合わせて、htmlの内容を部分的に適した内容に書き換える仕組みがテンプレートエンジンです。

ウィキペディアでは下記のように説明されています。

テンプレートエンジンはテンプレートと呼ばれる雛形と、あるデータモデルで表現される入力データを合成し、成果ドキュメントを出力するソフトウェアまたはソフトウェアコンポーネントである。
ウィキペディアより

FlaskではJinja2と呼ばれるpython用テンプレートエンジンが使用されています。
Flaskをインストールした時点でJinja2もインストールされるため、
別途インストールする必要はありません。

Flaskのインストールや実行方法についてはこちらで解説しています。

しげっち

まずはjinja2単体での動作を確認してみよう！

にゃーすけ

にゃーすけがサンプルを作ってみたにゃ。

from jinja2 import Template

txt = '昨日は{{ name1 }}を食べ、今日は{{ name2 }}を食べ、そして明日は{{ name3 }}を食べるのだ。'
tmp = Template(txt)

dict_a = {'name1': 'アイス','name2': 'パフェ','name3': 'ケーキ'}
msg = tmp.render(dict_a)

print(msg)

# 実行結果
# 昨日はアイスを食べ、今日はパフェを食べ、そして明日はケーキを食べるのだ。

Jinja2では値を設定する場所を二重波括弧{{}}の中に変数を記載して指定します。
その文字列変数(txt)をTemplateに渡し、戻り値の変数(tmp)のrenderメソッドに辞書データを渡すことでデータの紐付けが行われてきちんとした文章が表示されました。

しげっち

サンプルの内容が毎日デザート…

因みに、{{}}で記載する方法をマスタッシュ記法と言うようです。
{が口ひげのように見えるため、口ひげを英単語ではmustacheと呼ぶところから来ています。

jinja2単体での動作を確認できました。
次はFlask+jinja2の動作を確認していきましょう。

テンプレートに値を設定する

ここでいうテンプレートとは、templatesフォルダに入っているファイルを指します。
index.htmlファイルもテンプレートの一つです。

Flaskでjinja2を正しく動作させるためには、pyファイルとtemplatesフォルダ、index.htmlを以下の階層構造にしておく必要があります。

.
├── app.py
└── templates
    └── index.html

それではindex.htmlファイルのテンプレートに、値を設定してブラウザ表示させてみましょう。
まずはindex.htmlを以下のように修正します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>にゃーすけの野望</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <h1>{{title}}</h1>
        <p>{{message}}</p>
    </body>
</html>

二重波括弧で括っているtitleとmessageの部分が、jinja2の機能で動的に変換したい箇所です。

続いて、app.pyファイルで値を設定できるようにします。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html',
        title = "にゃーすけの野望",
        message = "この世を甘いデザートで埋め尽くす事")

if __name__ == '__main__':
    app.debug = True
    app.run(host='localhost')

render_templateの引数でtitleとmessageに文章を設定しました。
実行してWEBブラウザで確認してみましょう。

前述のjinja2単体の動作で確認した時には、表示させる内容の紐付け方法として辞書データを渡していました。
Flaskではrender_templateの中で処理してくれるので、辞書データを作成する必要はありません。
また、jinja2のTemplateをimportする必要もありません。

なおこのマスタッシュ記法はJinjaだけでなくVue.jsでも使用します。
もし、開発環境がFlask+Vue.jsの場合、マスタッシュがどちらで使用されているものなのか
判別できずエラーとなる場合があります。

その場合の対策方法はこちらに記載しました。

パラメーターを渡して動的に表示させる

先程は固定の文章を渡しました。
今度はアドレスに記載したパラメーターを渡して表示させてみます。

app.pyに新たにindex2という関数を追加します。

@app.route('/<id>/<name>')
def index2(id, name):
    message = 'id: %s, name: %s' % (id, name)
    return render_template('index.html',
        title = "IDと氏名",
        message = message)

デコレータに<id>と<name>を指定しました。
アドレスにスラッシュ区切りで２つのパラメータがある場合、index2関数の内容を実行します。
index2関数では引数にidとnameがあり、アドレスで指定したパラメータの内容が格納されています。
それを加工し、message変数に入れてrender_templateの引数に渡します。
実行してIDと名前が表示されたら成功です。