以下の内容はhttps://blog.hapins.net/entry/2024/10/25/125057より取得しました。


Twig 入門:PHP テンプレートエンジンの活用法

Twig 入門:PHP テンプレートエンジンの活用法

Twig とは

Twig は、PHP で使用されるテンプレートエンジンの一つです。
このテンプレートエンジンを利用することで、PHP で処理されたデータを HTML テンプレートに埋め込み、効率的にウェブページを生成することができます。PHP のコードと HTML を分離して管理できるため、開発者にとってコードの可読性や保守性が向上する点が大きな特徴です。

よく使うテンプレート構文

よく使用される Twig のテンプレート構文は以下の通りです。

{{ 変数 }}
{# コメント #}
{% if ... %} {% endif %}
{% for ... %} {% endfor %}
{% include 'ファイルの場所' %}
{% set 変数名 = 値 %}

変数の基本的な使い方

Twig での変数の基本的な使い方について説明します。まず、変数に値をセットする方法です。

変数に値をセットする

Twig では、set文を使って変数に値をセットすることができます。以下のように記述します。

{% set 変数名 = 値 %}
{% set name = '太郎' %}
{% set age = 25 %}

これで、{{ name }} や {{ age }} を使って変数の値をテンプレート内で表示することができます。

別のテンプレートを挿入

includeを使うことで、他のテンプレートファイルを部分的に挿入できます。部品化されたテンプレートを再利用する際に便利です。

{% include 'header.html.twig' %}
{% include 'footer.html.twig' %}

for 文を使って配列をループ処理する

Twig では、for文を使って配列やオブジェクトの要素をループ処理することができます。基本的な構文は以下の通りです。

{% set list = [
  {'id':'01', 'title':'リスト1'},
  {'id':'02', 'title':'リスト2'},
  {'id':'03', 'title':'リスト3'},
  {'id':'04', 'title':'リスト4'}
] %}

<ul>
{% for list in lists %}
  <li class="list-{{ list.id }}">{{ list.title }}</li>
{% endfor %}
</ul>

slice フィルターを使う方法

{% set tests = [
  {'id':'01','title':'リスト1'},
  {'id':'02','title':'リスト2'},
  {'id':'03','title':'リスト3'},
  {'id':'04','title':'リスト4'},
  {'id':'05','title':'リスト5'},
  {'id':'06','title':'リスト6'},
  {'id':'07','title':'リスト7'},
  {'id':'08','title':'リスト8'}
]%}

{%- for test in tests[:5] -%}
<p style="background: red;">{{test.id}}-{{test.title}}</p>
{%- endfor -%}
{%- for test in tests[5:] -%}
<p style="background: orange;">{{test.id}}-{{test.title}}</p>
{%- endfor -%}

条件文を指定する方法

{% for i in 1..10 if i % 2 == 0 %}
  {{ i }},
{% endfor %}
{# 2, 4, 6, 8, 10, #}

まとめ

Twig は、PHP 向けの強力で使いやすいテンプレートエンジンです。テンプレート内での変数出力、条件分岐、ループ処理などが簡潔に書けるため、HTML と PHP ロジックを分離し、コードの可読性や保守性を向上させます。 特に、for文を使ったループ処理や、sliceフィルターを活用した部分的なリスト表示など、多様なニーズに応える機能を備えています。また、条件文もシンプルに記述できるため、柔軟なテンプレート作成が可能です。Twig を活用することで、効率的に Web ページを生成し、開発速度の向上にも繋がります。




以上の内容はhttps://blog.hapins.net/entry/2024/10/25/125057より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14