Symfony Twigテンプレートのベースレイアウト作成方法を完全解説！初心者でもわかる画面共通化の基本

Twigテンプレートのベースレイアウトを作成する方法

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

生徒

「SymfonyでWebページを作ると、毎回同じヘッダーやメニューを書くのが大変です…」

先生

「SymfonyではTwigテンプレートのベースレイアウトを使うことで、その悩みを解決できます。」

生徒

「ベースレイアウトって何ですか？パソコン初心者でも使えますか？」

先生

「大丈夫です。画面の型紙を作るイメージで、順番に説明していきます。」

1. Twigテンプレートとベースレイアウトとは？

Symfonyで画面を作るときに使うのがTwigテンプレートです。Twigとは、HTMLの中に少しだけ特別な書き方を追加できる仕組みで、画面表示を分かりやすく管理できます。 ベースレイアウトとは、ヘッダー・フッター・メニューなど、どのページでも共通して使う部分を一つにまとめた土台のことです。例えるなら、ノートの表紙や罫線のような存在で、中身だけを差し替えて使い回せます。

2. SymfonyにおけるTwigの役割

Symfonyは、処理を行うPHPと、画面を表示するTwigを分けて管理します。これにより、プログラム初心者でも「見た目」と「動き」を混乱せずに理解できます。 TwigはHTMLに近い書き方なので、パソコンを触ったことがない人でも、文章を書く感覚で画面を作れます。ファイルは通常、templatesフォルダの中に保存されます。

3. ベースレイアウト用Twigファイルを作成する

まず、画面の共通部分をまとめるためのファイルを作ります。一般的にはbase.html.twigという名前を使います。このファイルが、すべてのページの土台になります。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Symfony入門{% endblock %}</title>
</head>
<body>
    <header>
        <h1>サンプルサイト</h1>
    </header>

    {% block body %}{% endblock %}

    <footer>
        <p>© Symfony Twig練習</p>
    </footer>
</body>
</html>

4. block（ブロック）の考え方を理解する

blockとは、後から内容を差し替えられる場所の目印です。「ここは空欄にしておいて、あとでページごとに内容を書く」という意味になります。初心者の方は「付せんを貼る場所」と考えると分かりやすいです。

5. 子テンプレートでベースレイアウトを使う

次に、ベースレイアウトを利用するページを作ります。 extendsを使うことで、先ほど作った型紙を読み込みます。


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

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

{% block body %}
<p>これはトップページの内容です。</p>
{% endblock %}

6. 複数ページで同じレイアウトを使うメリット

ベースレイアウトを使うと、デザイン変更が一か所で済みます。例えば、ヘッダーの文字を変えたい場合でも、base.html.twigを直すだけで全ページに反映されます。修正ミスが減り、作業時間も短くなります。

7. TwigテンプレートとSymfonyコントローラの関係

Symfonyでは、コントローラと呼ばれるPHPファイルからTwigを呼び出します。コントローラは「どの画面を表示するか」を決める役割です。


return $this->render('sample/index.html.twig');

8. 初心者がつまずきやすいポイント

よくある失敗は、ファイル名の間違いや、blockの書き忘れです。 Twigはエラー内容を画面に表示してくれるので、表示された英単語を落ち着いて確認しましょう。最初は完璧を目指さず、動くことを優先すると理解が進みます。

まとめ

SymfonyフレームワークにおけるTwigテンプレートの活用、特にベースレイアウトによる画面共通化の手法について詳しく解説してきました。Web制作の現場では、保守性と効率性が極めて重要視されます。今回学んだ「継承」の仕組みを導入することで、何百ページとある大規模なシステムであっても、ヘッダーやフッターの修正を一箇所の変更だけで全ページに反映させることが可能になります。

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

改めて、実務で役立つ重要なポイントを整理しておきましょう。これらを意識するだけで、コードの品質が劇的に向上し、バグの少ない開発が可能になります。

extendsタグの役割： 子テンプレートの最上部で必ず宣言し、どの親レイアウトを継承するかを指定します。
blockタグによる動的制御： タイトル、メインコンテンツ、個別のCSSやJavaScript読み込み位置など、ページごとに変化する部分を明確に定義します。
templatesディレクトリの構造： 管理しやすいように、機能単位でフォルダを分ける運用が一般的です。

さらに応用！動的なタイトル設定のサンプルコード

実際の開発現場では、サイト名と各ページ固有のタイトルを組み合わせて表示させることがよくあります。ベースレイアウト側でデフォルト値を設定しつつ、子テンプレートでそれを拡張する方法を見てみましょう。

親テンプレート：base.html.twig


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}デフォルトタイトル{% endblock %} | Symfony公式サイト</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    {% block stylesheets %}{% endblock %}
</head>
<body class="bg-light">
    <nav class="navbar navbar-dark bg-dark mb-4">
        <div class="container">
            <a class="navbar-brand" href="#">Symfony App</a>
        </div>
    </nav>

    <main class="container shadow-sm p-4 bg-white rounded">
        {% block body %}{% endblock %}
    </main>

    <footer class="text-center mt-5 py-3 border-top">
        <p class="text-muted">&copy; 2026 Symfony学習帳</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    {% block javascripts %}{% endblock %}
</body>
</html>

子テンプレート：blog/show.html.twig


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

{% block title %}記事の詳細表示{% endblock %}

{% block body %}
    <h2 class="display-6">Twigの継承は魔法のツール</h2>
    <p class="lead">
        このように、親で定義したレイアウトの中に、子テンプレートの内容がガチャンとはめ込まれます。
    </p>
    <div class="alert alert-info">
        <i class="bi bi-info-circle-fill"></i> ヒント：blockの中身を空にすると、そのページでは何も表示されない設定になります。
    </div>
    <a href="#" class="btn btn-outline-primary">一覧に戻る</a>
{% endblock %}

PHPコントローラ側での記述例

Symfonyのコントローラ側では、以下のようにテンプレートを指定して呼び出します。テンプレートへ変数を渡すことで、より動的なページ作成が可能になります。


namespace App\Controller;

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

class SampleController extends AbstractController
{
    #[Route('/sample', name: 'app_sample')]
    public function index(): Response
    {
        // templates/sample/index.html.twig を表示する
        return $this->render('sample/index.html.twig', [
            'controller_name' => 'SampleController',
            'message' => 'Symfonyの世界へようこそ！',
        ]);
    }
}

開発効率を最大化するためのアドバイス

Symfonyを使いこなすための第一歩は、このTwigの構造に慣れることです。最初はHTMLタグの羅列に見えて戸惑うかもしれませんが、一度ベースを作ってしまえば、その後の追加開発は驚くほどスムーズになります。また、BootstrapなどのCSSフレームワークと組み合わせることで、デザイン面でもプロフェッショナルな仕上がりを短時間で実現できるでしょう。エラーが出たときは、大抵の場合、閉じタグの不足やスペルミスが原因です。Symfonyのデバッグツールバーを有効活用して、一つずつ解決していく姿勢が上達の近道です。

これからのWebサイト制作において、共通化は避けて通れないテーマです。Twigを味方につけて、美しく管理しやすいコードを書いていきましょう。

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

生徒

「先生、まとめを読んでさらによく分かりました！ベースレイアウトを修正すれば、全部のページが一度に変わるって、まさに魔法みたいですね。これまでの苦労は何だったんだろうって思います。」

先生

「そう感じてもらえて嬉しいです。それがプログラミングにおける『効率化』の醍醐味なんですよ。同じことを二度書かないという原則は、エンジニアにとって非常に大切な考え方です。」

生徒

「今回出てきたblockタグですけど、例えばページごとに読み込むJavaScriptを変えたいときにも使えるんですか？」

先生

「鋭いですね！その通りです。ベースレイアウトの</body>の直前あたりに{% block javascripts %}{% endblock %}を作っておけば、特定のページだけで動かしたいスクリプトを安全に追加できますよ。無駄な読み込みを減らせるので、サイトの表示速度アップにもつながります。」

生徒

「なるほど、SEO対策やユーザー体験の向上にも繋がるわけですね。Symfonyのコントローラからデータを渡す方法も練習して、もっと本格的なサイトを作ってみたくなりました！」

先生

「その意気です。一歩ずつ、基礎を固めていきましょう。Twigの継承がマスターできれば、Symfonyでの開発スピードは一気に加速しますからね。次はデータベースとの連携にも挑戦してみましょうか。」

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

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

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

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

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

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

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

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

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