【jinja2】サーバーサイドからHTMLを受け取る方法

はじめに
「jinja2」とは
ワンポイントを使用するタイミング
ワンポイントの説明
まとめ

＊＊＊＊＊

はじめに

こんにちは、こんばんは。

今回は「jinja2」のワンポイントを共有したいと思います！

＊＊＊＊＊

「jinja2」とは

そもそも「jinja2」とはなんなのでしょう。

「jinja2」とはPythonのために提供されているテンプレートエンジンの1つです。

「jinja2」を使用することでテキストベースのファイルを生成することが出来ます。

Wikipediaにはこのように記述されています。

https://ja.wikipedia.org/wiki/Jinja

Jinjaは、プログラミング言語Python用のテンプレートエンジンである。Djangoのテンプレートエンジンに似ているが、Pythonライクな式が使えるようになっている（テンプレートはサンドボックス内で評価されることが保証されている）。テキストベースのテンプレートエンジンであるため、HTMLやXMLだけでなく、どのようなマークアップの文書でも（例えばソースコードなども）生成できる。Jinjaは、BSDライセンスの下で公開されている。

そして、今回はサーバーサイドとの通信における用途についての説明なので、Pythonにおいて有名なwebフレームワークである「Django」と「flask」のうち「flask」を用いた場合の説明をしようと思います！

＊＊＊＊＊

ワンポイントを使用するタイミング

皆さんはWebアプリケーションを開発している際にこのようなことを考えたことはありますか？

サーバーサイドでHTMLを動的に生成してテンプレートHTMLファイルにそのまま差し込めたら良いのになぁ...

今回記事でお伝えするワンポイントとはタイトルにあるようにサーバーサイドでstring型で生成したHTMLをフロントエンドへ送ってHTMLとして読み込ませようというものです！

＊＊＊＊＊

ワンポイントの説明

まず最初にどのようにHTML上で読み込むかを説明します！

この記法が今回のワンポイントの全てです！！

python file

from flask import Flask, render_template

# define instance
app = Flask(__name__)

@app.route("/", methods=["GET", 'POST'])
def index():
 greeting = "<p>Hello World</p>"
return render_template("index.html", greeting=greeting)

# conductor
if __name__ == '__main__':
 app.debug = True # debug mode on 
 app.run(host='0.0.0.0',port=80) # avalable acssess from anywhere

html file

<!DOCTYPE html>
<html>

<body>
 "{{ greeting }}"
</body>

</html>

このようにpython fileとhtml fileを記述すると

変数「greeting」の中身がそのままHTML fileに渡されて以下のように表示されます！

このままだとHTMLとして読み込んでもらいたい、string型がそのままstring型として読み込まれてしまっています。

そこでHTML file内の「jinja2 」部分を以下のように書き換えて見てください。

<!DOCTYPE html>
<html>

<body>
 {{ greeting | safe }}
</body>

</html>

「jinja2」の変数宣言部分に「 | safe」を追記するだけですね！

そうすると、このように表示されると思います。

HTMLのpタグとstyle要素が適用されるようになったのがわかるかと思います！

＊＊＊＊＊

まとめ

今回は「jinja2」を使用し、サーバーサイドからstring型のHTMLをフロントエンドに送信し、html file内でHTMLとして読み込む方法を説明しました！

POINT

フロントエンドでHTMLとして読み込みたいときには「 {{ ◯◯ | safe }} 」

ではまた別の記事で〜！