Flask Academy · レッスン

繰り返し使うマークアップをマクロにする

コピー&ペーストを避けるためテンプレート関数を書きます

レッスン 4/413 ステップ

「繰り返し使うマークアップをマクロにする」はCoddyKit上の無料Flask Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFlask Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flask Academyコースには全4レッスンが含まれています。

Repeated Markup Begs for a Function

同じ入力フィールドやカードのマークアップが少しずつ変わりながら現れる場合、コピーしていくと管理が難しくなります。macroを使えば、そのパターンを再利用可能な関数にできます。🛠️

What a Macro Is

macroはテンプレート関数です。パラメーター付きでマークアップを一度定義し、異なる引数で何度も呼び出します。

Define a Macro

macroは名前とパラメーターを指定して宣言し、マークアップを記述してendmacroで閉じます。これ以降、再利用できるようになります。

{% macro field(name) %}
  <input name="{{ name }}">
{% endmacro %}

Call a Macro

macroは関数と同じように、引数を渡して呼び出します。Jinja2は、呼び出した場所でその値を使ってmacroの本体をレンダリングします。

{{ field("email") }}

Parameters Customize Output

macroのparametersを使うと、1つのマークアップ定義から、入力タイプやラベルが異なる複数のバリエーションを生成できます。

{% macro field(name, type="text") %}
  <input name="{{ name }}" type="{{ type }}">
{% endmacro %}

Default Argument Values

パラメーターにdefaultsを設定すると、よく使う呼び出しを短くできます。呼び出し側では、異なる値が必要な場合だけデフォルトを上書きします。

{{ field("age", type="number") }}

Keep Macros in Their Own File

共通macroをforms.htmlのようなファイルに保存すると、多くのテンプレートから同じヘルパーをimportして再利用できます。

{% import "forms.html" as forms %}

Import Then Call

importした後は、名前空間を通してmacroを呼び出します。これにより、macroライブラリをそれを使うページから分離できます。

{{ forms.field("email") }}

Import Specific Macros

from importを使うと、必要なmacroだけを名前で取り込めます。テンプレートがすっきりし、意図も明確になります。

{% from "forms.html" import field %}

Macros vs Includes

includeは固定のマークアップを挿入しますが、macroは引数を受け取り、出力を変えられます。呼び出しごとに断片を変える必要がある場合はmacroを使います。

DRY Templates at Last

macroを使うと、テンプレートからコピーと貼り付けをなくせます。フィールドのマークアップを一度修正すれば、すべての呼び出し箇所が更新されます。これがrightなテンプレート設計です。✨

Quick Check

macroはincludeと何が違いますか?

Recap: Macros

macroは、再利用可能でパラメーター化されたテンプレート関数です。一度定義してimportし、どこからでも呼び出すことで、テンプレートをDRYに保てます。🎯

無料で開始

AI チューターと学ぶ Python — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
30
レッスン
120

よくある質問

「繰り返し使うマークアップをマクロにする」レッスンは無料ですか?

はい。「繰り返し使うマークアップをマクロにする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Flask Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flask Academyコースには全4レッスンが含まれています。

「繰り返し使うマークアップをマクロにする」で何を学びますか?

コピー&ペーストを避けるためテンプレート関数を書きます ブラウザで直接実行するハンズオンコードでFlask Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flask Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのFlask Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「繰り返し使うマークアップをマクロにする」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlask Academyレッスンでコードを書いて実行できますか?

はい。すべてのFlask Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ブロックを持つベーステンプレートを定義する
  2. 子ページでベースを拡張する
  3. 再利用可能なパーシャルをインクルードする
  4. 繰り返し使うマークアップをマクロにする
← Flask Academyに戻る