チュートリアル: Visual Studio でビューとページ テンプレートを含む Flask アプリを作成する

この記事では、チュートリアル シリーズ「 Visual Studio での Flask Web フレームワークの操作」の手順 2 について説明します。

Visual Studio では、プロジェクトのより広範な開始点を提供するプロジェクト テンプレートから Flask アプリケーションを作成できます。 チュートリアルの手順 1 では、すべてのコードが 1 つのファイル内にある 1 つのページで Flask アプリを作成する方法について説明します。 手順 2 では、コードをリファクタリングし、ページ テンプレートの構造を作成して、さらなる開発を可能にします。 特に、アプリケーション ビューのコードをスタートアップ コードなどの他の側面から分離する必要があります。

チュートリアルの手順 2 では、次の方法を学習します。

[前提条件]

• 「手順 1: Visual Studio ソリューションと Flask プロジェクトを作成する」で作成した Visual Studio ソリューションと Flask アプリケーション プロジェクト。

Flask プロジェクトをリファクタリングしてさらなる開発を行う

Blank Flask Web Project テンプレートを使用すると、スタートアップ コードを 1 つのビューと共に含む 1 つの app.py ファイルでプロジェクトを作成できます。 複数のビューとテンプレートを使用してアプリをさらに開発できるようにするには、これらの関数を分離する必要があります。

さらに開発できるように Flask プロジェクトを調整するには、次の手順に従います。

1. ソリューション エクスプローラーで、Flask プロジェクト フォルダー (BasicProject) を右クリックし、[追加>新しいフォルダー] を選択します。

   

2. 新しいアプリケーション フォルダー に HelloFlask という名前を付けます。

3. HelloFlask フォルダーを右クリックし、[追加>新しい項目] を選択して新しいファイルを作成します。

4. [ 新しい項目の追加 ] ダイアログで、 空の Python ファイル ファイル テンプレートを選択します。

   1. ファイルに__init__.pyという名前を 付けます。 ファイル名には、単語initの周囲に先頭と末尾それぞれ2つのアンダースコア文字 (_) を含める必要があります。

   2. [] を選択し、[] を追加します。

   

5. 新しいファイルに次のコードを追加します。このコードにより、 Flask インスタンスが作成され、アプリケーション ビューが読み込まれます。

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. HelloFlask フォルダーで、views.py という名前の別の新しい Python ファイルを作成します。

   Von Bedeutung

   ファイル名は必ず views.py として指定してください。 名前ビューは、__init__.py ファイル内の import HelloFlask.views ステートメントのために重要です。 両方のインスタンスで名前 ビュー が同じでない場合、Visual Studio では実行時にエラーが表示されます。

7. views.py ファイルに次のコードを追加します。 次のコードは、関数の名前を変更し、 /home エンドポイントへの戻りルートを定義します。

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   このコードには、app.py ファイルのページ レンダリング コードも含まれており、__init__.py ファイルで宣言されたapp オブジェクトをインポートします。

8. HelloFlask フォルダーに、テンプレートという名前のサブフォルダーを作成します。 現時点では、フォルダーは空です。

9. Flask プロジェクト フォルダー (BasicProject) で、 app.py ファイルの内容を次のコードに置き換えます。

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. コードを更新した後、 app.py ファイルの名前を runserver.py に変更します。

11. リファクタリングされたFlaskプロジェクトの構造が次の例のようになっていることを確認してください。

    

    

リファクタリングされたプログラムを実行し、ルートを確認する

これで、Visual Studio でプロジェクトを実行する準備ができました。

1. Visual Studio で、 デバッグ>デバッグの開始 (F5) を選択するか、メイン ツール バーの Web サーバー を選択します (表示されるブラウザーは異なる場合があります)。

2. アプリケーションがブラウザーで開いたら、ブラウザーで / (ルート) と URL ルート エンドポイントの両方を試します。

   

デバッガーで更新されたプログラムを実行する

コードのさまざまな部分でブレークポイントを設定し、 デバッガーでアプリのスタートアップ シーケンスに従うこともできます。

1. 次の点など、いくつかのブレークポイントを設定します。

   • runserver.py ファイルの最初の行
   • __init__.py ファイルの最初の行
   • views.py ファイル内のreturn "Hello Flask!"行

2. デバッグ>デバッグの開始または F5 キーを押して、デバッガーでアプリを起動します。

3. デバッガーの実行中に、F10 でコードをステップ実行するか、F5 キーを使用して各ブレークポイントからコードを実行します。 Visual Studio のメイン ツール バーのデバッグ コントロール ( [続行]、[ 停止]、[ 再起動]、[ ステップ ] オプションなど) を使用することもできます。

   

4. 完了したら、 Ctrl+C キーを押した後、任意のキーを選択してアプリケーションを停止します。 ルートの開いているブラウザー ウィンドウを閉じることもできます。

ソース管理に変更をコミットする

コードをリファクタリングして更新プログラムをテストしたら、変更を確認してソース管理にコミットできます。

このチュートリアル シリーズの以降の手順では、ソース管理に変更をコミットする手順については、このセクションを参照してください。

コミットとプッシュの頻度を決定する

ソース管理に対する変更をコミットすると、変更ログにレコードが作成され、必要に応じてリポジトリを元に戻すことができるポイントが作成されます。 各コミットを調べて、特定の変更を確認することもできます。

Git でのコミットは安価です。 大量の変更を蓄積して 1 回のコミットとして送信するのではなく、頻繁にコミットして少量の変更を送信することをお勧めします。

小さな変更をすべて個々のファイルにコミットする必要はありません。 一般的に、機能の追加、チュートリアル シリーズのこの手順に示すように構造の変更、またはコードのリファクタリングを行うときにコミットを行います。 また、コラボレーターに確認して、すべてのユーザーに最適なコミットの細分性についての同意を取り付けることもお勧めします。

コミットの頻度と、コミットをリモート リポジトリにプッシュする頻度は、2 つの異なる問題です。 リモート リポジトリにプッシュする前に、ローカル リポジトリに複数のコミットを蓄積することがあります。 コミットの頻度は、チームがリポジトリを管理する方法によって異なります。

テンプレートを使用してページとビューをレンダリングする

views.py ファイルのhome関数は、ページのプレーンテキスト HTTP 応答を生成します。 ほとんどの実際の Web ページは、多くの場合、ライブ データを組み込むリッチ HTML ページで応答します。 開発者が関数を使用してビューを定義する主な理由は、コンテンツを動的に生成するためです。

ビューの戻り値は単なる文字列です。 動的コンテンツを使用して、文字列内の任意の HTML を構築できます。 マークアップをデータから分離することをお勧めします。そのため、マークアップをテンプレートに配置し、データをコードに保持することをお勧めします。

インライン HTML を使用するようにビューを調整する

最初の手順では、ビュー処理を変換して、動的コンテンツのあるページにインライン HTML を使用します。

1. views.py ファイルの内容を次のコードに置き換えます。

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. 変更を保存し、アプリをもう一度実行します。

3. ページを数回更新して、日付と時刻が更新されることを確認します。 完了したら、アプリを停止します。

HTML テンプレートを作成する

次に、HTML テンプレートを使用するようにページレンダリングプロセスを変換します。

1. テンプレート フォルダーを右クリックし、追加>新しい項目を選択して新しいファイルを作成します。

2. [ 新しい項目の追加 ] ダイアログで、 HTML ページ ファイル テンプレートを選択します。 ファイルに index.html 名前を付け、[ 追加] を選択します。

3. HTML ファイルの指定された内容を次のマークアップに置き換えます。

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   このコードでは、 {{ content }} ステートメントはプレースホルダーまたは置換トークン ( テンプレート変数とも呼ばれます) であり、コードに値を指定します。

テンプレートを読み込むホーム関数を調整する

render_template メソッドを使用するには、home関数を変更する必要があります。 このメソッドは HTML テンプレートを読み込み、プレースホルダーの名前と一致する名前付き引数を使用して {{ content }} の値を提供します。

1. views.py ファイルで、home関数の定義を次のコードに置き換えます。

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   Flask は テンプレート フォルダー内 のテンプレートを自動的に検索するため、テンプレートへのパスはそのフォルダーを基準にしています。

2. プロジェクトの変更を保存し、アプリをもう一度実行します。

   テンプレート エンジン (Jinja) は HTML コンテンツを自動的にエスケープするため、content値内のインライン HTML 構文 (\<strong> ...) が HTML としてレンダリングされない点に注意してください。 自動エスケープは、インジェクション攻撃に対する偶発的な脆弱性を防ぎます。

   開発者は多くの場合、あるページから入力を収集し、テンプレート プレースホルダーを使用して別のページの値として使用します。 エスケープは、HTML をコードから離しておくのが望ましいことを思い出させてくれます。

   完了したら、アプリを停止します。

個別のプレースホルダーを使用する

HTML マークアップ内のデータごとに個別のプレースホルダーを使用できます。 次に、 home 関数をもう一度調整して、特定のプレースホルダー値を指定します。

1. index.html ファイルの内容を次のマークアップに置き換えます。

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. views.py ファイルで、home関数の定義を次のコードに置き換えて、すべてのプレースホルダーの値を指定します。

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. 変更を保存し、アプリをもう一度実行します。 今回は、正しくレンダリングされた出力が表示されます。

   

4. 変更をソース管理にコミットし、リモート リポジトリを更新できます。 詳細については、「 ソース管理への変更のコミット」を参照してください。

個別のページ テンプレート

テンプレートは通常、個別の HTML ファイルに保持されますが、インライン テンプレートを使用することもできます。 マークアップとコードを完全に分離するために、個別のファイルを使用することをお勧めします。

テンプレート .html 拡張機能を使用する

ページ テンプレート ファイルの .html 拡張機能は完全に省略可能です。 render_template関数の最初の引数で、ファイルへの正確な相対パスを常に識別できます。 ただし、Visual Studio (およびその他のエディター) には、通常、ページ テンプレートが HTML ではないという事実を上回る、 .html ファイルでのコード補完や構文の色付けなどの機能が用意されています。

Flask プロジェクトを操作すると、編集中の HTML ファイルが実際に Flask テンプレートであるかどうかを自動的に検出し、特定のオートコンプリート機能を提供します。 Flask ページ テンプレート コメント ({#) の入力を開始すると、Visual Studio によって終了 #} 文字が自動的に提供されます。 [コメントの選択] コマンドと [コメント解除の選択] コマンド ([編集]>[追加] メニュー) では、HTML コメントの代わりにテンプレート コメントも使用されます。

テンプレートをサブフォルダーに整理する

サブフォルダーを使用し、render_template関数の呼び出しで templates フォルダーの下の相対パスを参照できます。 この方法は、テンプレートの名前空間を効果的に作成するための優れた方法です。

次のステップ