Twigのblockとextendsを完全マスター！初心者向けSymfonyテンプレート入門

Twigのブロック定義（block）と内容の挿入（extends）

先生と生徒の会話形式で理解しよう

生徒

「SymfonyのTwigってよく聞くけど、どうやってテンプレートを使いまわすの？」

先生

「それはTwigのextendsとblockという機能を使うことでできますよ。」

生徒

「難しそう……。でも、覚えると便利そうですね！」

先生

「安心してください。基本から順番に、わかりやすく解説していきますね！」

1. Twigとは？初心者でもわかるテンプレートエンジンの基本

Symfony（サンフォニー）でウェブサイトの画面を作る際、欠かせないのがTwig（トゥイッグ）という「テンプレートエンジン」です。プログラミング未経験の方には聞き馴染みがない言葉かもしれませんが、一言でいうと「HTMLをより便利に、スマートに書くための道具」だと考えてください。

通常のHTMLだけでは、例えば「ユーザーの名前をページごとに変える」といった動的な表示が苦手です。しかし、Twigを使えば、HTMLの中に簡単なプログラムのような命令を組み込むことができます。

【イメージ例：名前を表示する】

たとえば、PHPから「名前（name）」というデータを受け取って表示する場合、Twigなら以下のように直感的に書けます。


<p>こんにちは、{{ name }}さん！</p>

実行結果（ブラウザに表示される内容）：


こんにちは、山田太郎さん！

このように、{{ }} という特殊な記号（二重中かっこ）を使うだけで、中身を自由に入れ替えられるのが大きな特徴です。また、記事のヘッダーやフッターといった、どのページでも必ず使う「共通パーツ」を一箇所で管理できるため、修正作業が劇的に楽になります。

「コードの書き直しを減らし、ミスを防ぎながら効率よくサイトを作る」。それが、現代のウェブ開発においてTwigが選ばれている最大の理由です。

2. extendsとblockの役割とは？（テンプレートの継承）

Twigで効率的にサイト制作を行うために欠かせないのが、extends（エクステンズ）とblock（ブロック）という2つの機能です。これらをマスターすると、同じHTMLを何度も書く手間が省け、修正も一箇所で済むようになります。

extends：土台を借りる

別のテンプレート（親）をまるごとコピーして「継承」するための命令です。ヘッダーやフッターなどの共通部分を使い回す際に使用します。

block：中身を入れ替える

テンプレートの中で「ここだけはページごとに書き換えたい！」という場所を予約しておくための命令です。メインコンテンツやタイトル等に使用します。

イメージとしては、「Webサイトの共通の枠組み（親）」を先に作り、個別のページ（子）で「必要な部分だけを上書き」していく感覚です。プログラミングが初めての方でも分かりやすいよう、具体的なサンプルコードで見ていきましょう。

【初心者向け】テンプレート継承の書き方例

まずは、サイト全体の土台となる「base.html.twig」を作ります。後で中身を入れ替えたい場所に {% block ◯◯ %} を配置するのがポイントです。


{# 1. 親テンプレート（base.html.twig） #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}デフォルトのタイトル{% endblock %}</title>
</head>
<body>
    <header><h1>マイサイト</h1></header>

    <main>
        {# ここに各ページ独自の内容が入ります #}
        {% block content %}{% endblock %}
    </main>

    <footer>© 2026 Sample Site</footer>
</body>
</html>

次に、この土台を使って実際の「お問い合わせページ」などを作ります。extends で親を呼び出し、block の中身だけを記述します。


{# 2. 子テンプレート（contact.html.twig） #}
{% extends "base.html.twig" %}

{% block title %}お問い合わせページ{% endblock %}

{% block content %}
    <h2>お問い合わせ</h2>
    <p>お気軽にご連絡ください。</p>
{% endblock %}

実際の表示結果（実行イメージ）

このテンプレートをブラウザで表示すると、親の共通枠の中に、子が書いた内容が自動的にはめ込まれた状態で出力されます。


<!DOCTYPE html>
<html>
<head>
    <title>お問い合わせページ</title>
</head>
<body>
    <header><h1>マイサイト</h1></header>

    <main>
        <h2>お問い合わせ</h2>
        <p>お気軽にご連絡ください。</p>
    </main>

    <footer>© 2026 Sample Site</footer>
</body>
</html>

3. 親テンプレートを作ってみよう（layout.html.twig）

まずは共通のレイアウトファイル（親テンプレート）を作ります。このファイルには、HTMLの基本構造やヘッダー・フッターなどを記述し、コンテンツ部分にblockを定義します。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{% block title %}マイサイト{% endblock %}</title>
  </head>
  <body>
    <header>
      <h1>共通ヘッダー</h1>
    </header>

    <main>
      {% block body %}{% endblock %}
    </main>

    <footer>
      <p>共通フッター</p>
    </footer>
  </body>
</html>

{% block %}で囲んだ部分が、子テンプレートで変更できる領域になります。

4. 子テンプレートで内容を挿入しよう（home.html.twig）

次に、親テンプレートをextendsして、特定のページ用のテンプレート（子テンプレート）を作ってみましょう。


{% extends 'layout.html.twig' %}

{% block title %}トップページ{% endblock %}

{% block body %}
  <p>ようこそ！これはトップページのコンテンツです。</p>
{% endblock %}

{% extends %}を使うことで、親テンプレートのレイアウトが自動的に読み込まれ、blockで定義された場所に中身が挿入されます。

5. Twigで共通デザインを保つメリットとは？

Twigのextendsとblockを使うことで、同じデザインのテンプレートを複数のページで再利用できます。これは、メンテナンス性や作業効率の面で大きなメリットがあります。

例えば、ヘッダーに変更があった場合でも、親テンプレート（layout.html.twig）を修正すれば、すべてのページに自動で反映されるため、個別に修正する必要がありません。

6. Twigを使う上での注意点

親テンプレートと子テンプレートのファイル名は正しく書きましょう。
extendsは必ずテンプレートの一番上に書く必要があります。
blockの名前（titleやbodyなど）は親子で一致している必要があります。

これらを守ることで、Twigのテンプレートは正しく動作します。

7. 実行結果のイメージ

上記のテンプレートを組み合わせた場合、最終的な出力は以下のようになります。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>トップページ</title>
  </head>
  <body>
    <header>
      <h1>共通ヘッダー</h1>
    </header>

    <main>
      <p>ようこそ！これはトップページのコンテンツです。</p>
    </main>

    <footer>
      <p>共通フッター</p>
    </footer>
  </body>
</html>

このように、HTMLの構造を保ちながら、ページごとに中身を変えることができます。

8. Twigテンプレートの活用例

Twigテンプレートは、次のような場面で特に活躍します。

ブログ記事一覧ページと記事詳細ページでレイアウトがほぼ同じとき
管理画面とユーザー画面で共通の見た目を使いたいとき
レスポンシブ対応のヘッダー・フッターを一括管理したいとき

こうした場面では、Twigのblockとextendsを活用することで、作業量がぐっと減り、デザインの統一感も保てます。

まとめ

ここまで、Symfonyフレームワークで標準採用されているテンプレートエンジン「Twig」の核となる機能、extends（継承）とblock（ブロック）について詳しく解説してきました。Web開発において、同じコードを何度も書く「重複」は、バグの温床になるだけでなく、修正が必要になった際に膨大な作業時間を消費する原因となります。Twigの継承システムを導入すれば、サイト全体の骨組みを一度定義するだけで、各ページのデザインの一貫性を保ちながら、保守性の高いコードを実現できることがお分かりいただけたかと思います。

Twigテンプレート活用のポイント再確認

効率的なWeb制作を行うために、以下の3つのポイントを常に意識しておきましょう。

ベースレイアウトの設計: headタグ内のメタ情報や、共通のCSS・JavaScriptの読み込み、ナビゲーションメニューなどは必ず親テンプレート（layout.html.twigなど）に集約させます。
適切なブロック分割: 子テンプレートで書き換える可能性がある場所は、あらかじめ{% block 名前 %}で定義しておきます。特にタイトル、メインコンテンツ、サイドバー、カスタムスクリプト領域などが一般的です。
コードの再利用性: 部分的なコンポーネント（ボタンやカードUIなど）は、includeタグなども併用することで、さらに細かく再利用が可能です。

実践的なPHPとTwigの連携サンプル

実際にSymfonyのコントローラーからTwigを呼び出す際のPHPコードの書き方をおさらいしましょう。コントローラー側で変数を定義し、それをテンプレートに渡すことで、動的なページ生成が可能になります。


namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class PageController extends AbstractController
{
    /**
     * @Route("/home", name="app_home")
     */
    public function index(): Response
    {
        // テンプレートに渡すデータを用意
        $user_name = 'Web太郎';
        $items = ['PHP', 'Symfony', 'Twig', 'Doctrine'];

        // renderメソッドで子テンプレートを指定し、配列でデータを渡す
        return $this->render('home.html.twig', [
            'name' => $user_name,
            'items' => $items,
        ]);
    }
}

次に、このデータを受け取る子テンプレート（home.html.twig）の記述例です。親から継承しつつ、PHPから渡された配列をループ処理で表示する例を見てみましょう。


{% extends 'layout.html.twig' %}

{% block title %}マイページ - {{ name }}{% endblock %}

{% block body %}
    <h2>こんにちは、{{ name }}さん！</h2>
    <p>学習中の技術一覧：</p>
    <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
{% endblock %}

このように、PHP側のロジックと、HTML側のデザイン（Twig）を明確に切り分けることで、チーム開発での分業もしやすくなります。デザイナーはTwigファイルを、エンジニアはPHPファイルをといった具合に、お互いの領域を汚さずに開発を進められるのがSymfonyとTwigの最大の強みです。

Twig習得へのステップアップ

基本のextendsとblockに慣れてきたら、次は「フィルター（filters）」や「関数（functions）」、そして「マクロ（macros）」についても学んでみてください。例えば、日付を特定のフォーマットで表示したり、文字列を加工したりする処理が、テンプレート内で非常にスマートに記述できるようになります。Twigを使いこなすことは、モダンなPHP開発者としてステップアップするための必須条件と言っても過言ではありません。

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！extendsとblockの関係がやっとスッキリ理解できました。親テンプレートがいわば『台本』で、子テンプレートがその『役者（中身）』を入れ替えるようなイメージですね！」

先生

「その例え、すごく分かりやすいですね！まさにその通りです。共通の台本（レイアウト）があれば、演出（コンテンツ）を変えるだけで、何十ページものWebサイトを簡単に管理できるようになるんですよ。」

生徒

「今までは、全ページに同じヘッダーをコピペして貼り付けていました……。もしロゴ画像が変わったら全部のファイルを直さなきゃいけないから、冷や汗ものですよね。Twigを使えば、親テンプレートの1箇所を変えるだけで済むから、ミスも減りそうです。」

先生

「そうですね。Web制作の現場では『DRY（Don't Repeat Yourself）』、つまり同じことを繰り返さないという原則がとても大切です。PHPのコントローラーから渡したデータも、Twigなら{{ name }}のように二重中括弧で簡単に表示できますし、セキュリティ対策（エスケープ処理）も自動で行ってくれるので安心です。」

生徒

「なるほど。さっきのサンプルコードで見せてもらったfor文でのループも、HTMLがスッキリして見やすかったです。条件によって表示を変えるif文なんかも同じように使えるんですよね？」

先生

「もちろんです。例えばログインしている時だけメニューを出すといった処理も、テンプレート内で簡単に書けますよ。これからもっと複雑なサイトを作っていくことになりますが、このTwigの基礎さえしっかり押さえておけば、どんな大規模なサイトでも怖くありません。自信を持って進んでいきましょう！」

生徒

「はい！どんどんコードを書いて、自分だけのオリジナルサイトを作ってみます。Symfonyの学習がもっと楽しくなってきました！」

公的機関での指導実績【Symfony大規模設計実践セミナー】

エンタープライズSymfony実践講座：大規模DX基盤を支える疎結合設計とドメイン駆動開発

#商用設計 #APIアーキテクチャ #市場価値最大化

ハローワーク職業訓練講師の実績を持つプロが監修。商用PHP開発の「現場の作法」を完全伝授。

「大規模システムの秩序」を設計する。SymfonyでエンタープライズLOD（設計の質）を極める。

本講座では、単なるWeb機能の構築ではなく、「再利用性とテスト容易性を追求した疎結合設計」という高度な技術を学びます。世界標準の堅牢性を誇るSymfonyを通じて、大規模開発やマイクロサービス化で必須となるDI（依存性の注入）やイベント駆動設計を最短距離で身につけます。

具体的なワークショップ内容と環境

【つくるもの】
エンタープライズ環境の標準となる「疎結合なバックエンド基盤」を構築します。Service Containerの高度な設定、Doctrine ORMによる複雑なデータマッピング、Bundle構造の理解など、「数年先もメンテナンス可能な商用コード」をゼロから体験してください。

【開発環境】
高度なリファクタリングを可能にするPHPStormの機能をフル活用。Docker環境での開発はもちろん、静的解析ツール（PHPStan）やCI/CDを意識した自動テスト環境まで、大規模プロジェクトの標準フローを再現します。