スポンサーリンク

flaskによるWebアプリ開発②~テンプレートエンジン(Jinja2)を使って動的Webページを作る

前回までのあらすじ

(前回の内容)

【Python】初心者向けに「Flask」に使った簡単なWebサイトの作り方①

今回も引き続きpythonの軽量WEBフレームワーク「FLASK」で使って簡易的なwebアプリケーションを作っていきます。前回はURLルーティングで動きのないペラページ(静的ページ)をでしたが、今回はアクセスするごとに表示内容が変わるような動的なwebページを作っていきたいと思います。

基本的にWebアプリケーションで動的なページを作る場合にはテンプレートエンジンというものを使用します。PythonとFlaskの場合は「JINJA2」というテンプレートエンジンが用意されているので、それを使います。

テンプレートエンジン(Jinja2)の使い方

Flaskでは、Jinja2テンプレートエンジンを標準で使用できます。ここでは「Jinja2」の全機能は紹介しませんが、簡単な動的なWebアプリケーションを作成する上で、必要最低限​​の機能を紹介します。公式ドキュメント⇒http://jinja.pocoo.org/docs/dev/templates/

テンプレートエンジンとは、HTMLファイルなどの通常静的なファイルを動的にするものです。簡単なサンプルを用いてイメージを掴んでいきましょう。という訳で前回作った app.pyに、以下のように編集します。

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello_World():
  return 'HelloWorld!'


#今回追加した処理#####
@app.route('/test2') 
def test2(): 
   return render_template('test2html', name="taro") 
#####################


#テスト環境起動
app.run(debug=True)


そして、app.pyと同じフォルダに「templates」というフォルダを作成し、というtest2.htmlファイルを作成してください。ファイル名は絶対に「templates」にしてください。そうでないとローカルでアプリを起動しても404 Not Foundのエラーが起こります

ちなみにhtmlファイルの作り方は色々ありますが、新規テキストファイルを作って末尾の.txtを.htmlに変えるだけで作ることができます。作業環境はAnacondaに付属している「Visual Studio Code」というツールで作業するのがオススメです。

【Python】Anacondaのインストールと初期設定から便利な使い方までを徹底解説!

test2.htmlは以下のように記述します。

<test2.html>

<!doctype html>
<title>Flask_test</title>
<h1>Hello {{ name }}!!</h1>
</html>

そして「http://127.0.0.1:5000/test2」にアクセスしてみてください。Hello taro!と表示されているはずです。

処理の中身を開設すると、まずdef:test2():の最後のrender_template関数の部分で、引数に「name=”taro”」というパラメータを設定することで、html側に「name=”taro”」というパラメーター渡しています。

そしてhtml側ではパラメータ名と同じ名前で{{パラメータ名}}のように、波括弧を二重にして囲むことで、テンプレートの中に.py側から渡した値を書き出すことができます。

今回の場合、flask側からtest.htmlに「name=”taro”」というパラメータを与えているので、テンプレート側の{{name}}の部分には「taro」が代入されて、ページにはhello taro!と表示される・・・という流れになっています。

if文を使った変数の値による条件分岐

他にもJinja2では、テンプレート側(html)に渡した変数の値によって、それをテンプレート側で何を表示するか、という条件分岐も行うことができます。

render_template関数では、通常の関数と同様に変数も引数に指定することができるので、app.pyを以下のように書き換える(追記する)ことで、URLの値を利用して、表示する画面を変更することもできます。またtest22.htmlも新規作成して「templates」に配置してください。

<app.py>

from flask import Flask, render_template 
app = Flask(__name__) 

@app.route('/') 
def hello_World():   
    return 'HelloWorld!' 

@app.route('/test2') 
def test2(): 
    return render_template('test2html', name="taro")



###########今回追加した処理##################

@app.route('/test')
def if_test(name=None):
    name='jiro'
    return render_template('test22.html', name=name)
#############################################



#テスト環境起動 
app.run(debug=True)

<test22.html>

<!doctype html>
<title>Flask_training</title>
{% if name='jiro' %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>あなたは{{ name }}で次郎くんではありません</h1>
{% endif %}

</html>

Pythonではif文やfor文を定義するときに終わる際は改行するだけで定義することができますが、テンプレート側ではちゃんと{% %}でブロックの終了を定義しなければいけません。

{% endif %}や{% endfor %}を忘れないように注意してくださいまあPythonが少し特殊なだけで他の言語ならif・forはちゃんと括るのが一般的ですね。

Jinjaのif文が、条件文に記載された変数が、定義されてて、空やFalseであれば、真となる条件分岐です。演算子は「==」「<」「>」あたりはPythonと同じ書き方で大丈夫です。

処理の簡単な解説をすると

def if_test(name=None):
name='jiro'

~

の部分でnameという変数に’jiro’という文字型のデータが格納されます。そして、return render_template(‘test22.html’, name=name)のname=nameの部分でテンプレート側に’jiro’というデータが入ったnameという変数を渡しています。

そして、template側で書いているJinja2のifには、{% if name=’jiro’ %} という条件分岐を設定しており、今回は条件を満たしている、つまりTrueなのでその後の、<h1>Hello {{ name }}!</h1>の部分が表示されます。

ちなみに、先ほどのapp.pyの部分のname=’jiro’をname=’taro’に変えて以下のようにしてましょう。

@app.route('/test')
def if_test(name=None):
name='taro'
return render_template('test22.html', name=name)

すると、{% if name=’jiro’ %}は正しくない、つまり「False(偽)」なので、else以下の「<h1>あなたは{{ name }}で次郎くんではありません</h1>」が表示されます。今回変数nameは‘taro’としているので、taroが表示されています。

for文を使ってリストや辞書の中身を出力する

Jinja2のfor文はpythonのfor文と同様に、listや辞書型の要素をひとつずつ出すことができます。templatesに「test_for.html」を新規作成して、以下のコードをapp.pyとtest_for.htmlにそれぞれ追記して確認してみましょう。

<app.py>

@app.route('/bros')
def show_users():
brothers = ["太郎", "次郎", "三郎"]
return render_template('test_for.html', bros=brothers)

<test_for.html>

<h1>Brothers List</h1>
<ul>
<li style="list-style-type: none">
<ul>{% for name in users %}
<li>{{ name }}</li>
</ul>
</li>
</ul>
{% endfor %}

まとめ

以上がPythonのWEBフレームワークでよく使われるテンプレートエンジン「Jinja2」の基本的な使い方です。とりあえずこれらができるだけでも動的なWEBページを作ることが可能になります。

ここではテンプレートエンジンに渡す値はURLルーティング関数の中で適当に定義した「name=’taro’」みたいなものでしたが、実運用する場合はデータベースから引っ張ってきたデータや後の記事で解説している<form>タグによってテンプレート(html側)から送られてきたデータを色々と処理して渡すことが多いです。

次はGET/POSTの違いと<form>タグによるHTMLからサーバーへのデータの方法とPythonとSQLを接続させるsqlalchmyというライブラリとflaskを用いて、データベースの中身をテンプレート(HTML)に表示させるようなwebアプリを作る方法について解説していきたいと思います。

スポンサーリンク

プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。



それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」「エンジニアとして若いうちから高収入を得たい」という気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする