• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer

AI活用エンジニアへの道

生成AI時代のエンジニアの生き方を考えるメディア(作成途中)

  • コラム
  • 生成AI
  • プログラミング
    • Python入門
    • Flask入門
    • Django入門
  • プロフィール
Home / プログラミング / Flask / Flaskのテンプレートで表示。テンプレートに値を渡す。テンプレートのフォルダを変更する

Flaskのテンプレートで表示。テンプレートに値を渡す。テンプレートのフォルダを変更する

1 テンプレートを用いてHTMLファイルを表示する
2 値を渡して動的にテンプレートの表示を変更する(文字列、辞書、リスト、自作クラスのインスタンス)
3 テンプレートのフォルダの変更
4 関連記事
  • Flaskでのテンプレートの基本的な使い方
  • 値を渡して動的にテンプレートの内容を変更する
  • テンプレートのフォルダを変更する

について、必要なだけ、詳細に説明します。

 

[rtoc_mokuji title="" title_display="" heading="h3" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]

テンプレートを用いてHTMLファイルを表示する

テンプレートのHTMLファイルは、デフォルトでアプリケーションのpythonファイルと同じ階層のtemplatesフォルダ内に配置する。
また、テンプレートを表示するには、render_template(from flask import render_template)を用いる

Example

  • Viewの記述(app.py)
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/index')
def index():
    return render_template('index.html') # templatesフォルダ内のindex.htmlを表示する

if __name__ == '__main__':
    app.run()

 
次に、index.htmlを実装する

  • index.htmlの記述
<h1>Hello</h1>

 

  • ファイルの階層構造

app.pyとtemplatesフォルダ内にindex.htmlを配置する。

 

  • アプリケーションを実行した結果

アプリケーションを立ち上げて、http://127.0.0.1:5000/indexを表示すると、以下の画面が表示される。

値を渡して動的にテンプレートの表示を変更する(文字列、辞書、リスト、自作クラスのインスタンス)

変数をテンプレートに渡して、その変数をテンプレートで画面上に表示することができる。
つまり、動的にページの内容を変更することができる。

 

文字列や、数値などの変数を送ることもあれば、リストや辞書、オブジェクトのインスタンスなど様々な型で変数をテンプレートに送り表示することもあるので、それぞれのやり方を以下に記載した。

Example

  • 変数を渡して表示する
ビューの実装
@app.route('/index')
    name = 'Taro'
    age = 12
    return render_template('index.html', name=name, age = age) # nameとageを変数としてテンプレートに渡す

if __name__ == '__main__':
    app.run()

 
次に、index.htmlを実装する

  • index.htmlの記述
<!-- {{ }} で渡した変数を囲うとその変数の中身を表示することができる。 -->
<h2>My name is {{ name }} age is {{ age }}</h2>

 
次に、アプリケーションを立ち上げてhttp://127.0.0.1:5000/indexを表示すると、nameとageに値が渡されて以下のように表示される。

 
次に、リストをテンプレートに渡して表示してみる。

  • リストをテンプレートで扱う
ビューの実装
@app.route('/index')
    gafa = ['apple', 'google', 'facebook', 'amazon']
    return render_template('index.html', gafa=gafa) # gafaを変数としてテンプレートに渡す

if __name__ == '__main__':
    app.run()

 
次に、index.htmlを実装する

  • index.htmlの記述
<p>{{ gafa }}</p> <!-- ['apple', 'google', 'facebook', 'amazon'] -->
<p>{{ gafa.0 }}</p> <!-- インデックス0のapple -->
<p>{{ gafa.2 }}</p> <!-- インデックス2のfacebook が表示される-->
<ul>
{% for g in gafa %} <!-- ループさせてそれぞれ要素を取り出す -->
<li>{{ g }}</li> <!-- apple google facebook amazonがそれぞれ表示される -->
{% endfor %}
</ul>

 

次に、辞書型をテンプレートに渡して表示してみる。

  • 辞書型をテンプレートで扱う
ビューの実装
@app.route('/index')
    user = {'name': 'Taro', 'age': 17}
    return render_template('index.html', user=user) # userを変数としてテンプレートに渡す

if __name__ == '__main__':
    app.run()

 
次に、index.htmlを実装する

  • index.htmlの記述
<!-- {{ 変数名.キー名 }}とすると値を取り出すことができる。
<h2>My name is {{ user.name }} age is {{ user.age }}</h2>

<!-- {{ 変数名['キー名'] }}としても同様に値を取り出すことができる。
<h2>My name is {{ user['name'] }} age is {{ user['age'] }}</h2>

{% for key in user %} <!-- ループしてキーを取り出す -->
{{ key }} <!-- キーだけ表示 -->
{{ user[key] }} <!-- キーを利用して変数の中の値を取り出す -->
{% endfor %}

 
次に、作成したクラスのインスタンスをテンプレートに渡して表示してみる。

  • 作成したクラスのインスタンスをテンプレートで扱う
# views.py
from flask import Flask, render_template
app = Flask(__name__)

class User: # クラスを作成する
    def __init__(self, name, age):
        self.name = name # プロパティの定義
        self.age = age

@app.route('/index')
def index():
    user = User(name='Taro', age=18) # インスタンスの作成
    return render_template('index.html', user=user) # インスタンスをテンプレートに渡す

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

 
テンプレートに渡したuserのプロパティnameとageにアクセスするには、{{ user.name }} {{ user.age }}とすればよい。

# template.html
{{ user.name }} <!-- .nameでプロパティにアクセス -->
{{ user.age }} <!-- .ageでプロパティにアクセス -->

以上、テンプレートに値を渡す方法について説明した。

テンプレートのフォルダの変更

テンプレートのフォルダはデフォルトでは、アプリケーションの立ち上げファイルと同じ階層のtemplatesフォルダです。

テンプレートのフォルダのパスを変えるには、FlasK(__name__)でアプリケーション作成時に、template_folderを第2引数に取ればよいです。

Example

  • テンプレートのパスの変更(相対パス)
from flask import Flask, render_template
import os

# template_folder引数を指定して、実行ファイルと同じ階層のtemplates2の中のmyfolderに変更
# os.path.joinを用いると、Windows, Linuxの環境に依存せずにフォルダのパスを作成できる
app = Flask(__name__, template_folder=os.path.join(os.path.dirname(__file__), 'templates2', 'myfolder'))

@app.route('/index')
def index():
    return render_template('index.html') # templatesフォルダ内のindex.htmlを表示する

if __name__ == '__main__':
    app.run()

以上、Flaskのテンプレートの利用方法の一つ目として、templateの作成とViewから値を送る、テンプレートのフォルダの変更方法について記述しました。


« Previous

URLマッピング

Next »

DEBUGの方法


Flask入門記事一覧はこちら

関連記事

FlaskでFormを用いてPOSTリクエストを行い、送信された値を取得する
FlaskでFormを用いてPOSTリクエストを行い、送信さ…
Flaskでabortを用いてHTTPException例外を強制的に発生させる
Flaskでabortを用いてHTTPException例外…
Flaskで404, 500などのエラーハンドリングを行う方法についてまとめました
Flaskで404, 500などのエラーハンドリングを行う方…
flaskでリダイレクト処理を行う(flask.redirect)
flaskでリダイレクト処理を行う(flask.redire…
Flaskのテンプレートでurl_forを用いてリンク作成、画像表示を行う。
Flaskのテンプレートでurl_forを用いてリンク作成、…
Flaskのテンプレートのフィルターを自作する方法についてまとめました
Flaskのテンプレートのフィルターを自作する方法についてま…

Primary Sidebar

人気記事

  • 1
    PyCharm,IntelliJのおすすめプラグイン一覧
  • no image 2
    Python未経験だが、フリーランスの案件に採用さ…
  • 3
    ITエンジニアとしてスキルを高めるためのUdemy講…
  • 4
    アメリカのシリコンバレーでプログラミングを無…

特集記事

  • 1
    Cursorの使用のポイントとコツ(コード補完、イ…
  • 2
    ITエンジニアとしてスキルを高めるためのUdemy講…

目次

1 テンプレートを用いてHTMLファイルを表示する
2 値を渡して動的にテンプレートの表示を変更する(文字列、辞書、リスト、自作クラスのインスタンス)
3 テンプレートのフォルダの変更
4 関連記事
StartCode ロゴ
AI時代のエンジニアを最速で育てる
法人向けIT研修で即戦力を育成しています。詳しくはお問い合わせください。
▶ 詳細はこちら
Flask講座
【Udemy】Flask入門講座(0からFlaskを学習: Python講座つき)
受講生6500人ほどの人気講座。<strong>View, Template, Model</str...
詳細 ▶

Footer

利用規約