CodeIgniterのテンプレート構成を整理する方法！初心者でも分かるビュー管理術

CodeIgniterのテンプレート構成を整理する方法

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

生徒

「CodeIgniterでWebサイトを作っているんですが、ヘッダーやフッターを毎回書くのが大変で…何か良い方法はありますか?」

先生

「それなら、テンプレート構成を整理することで解決できますよ。CodeIgniterには、共通部分を効率的に管理する仕組みがあります。」

生徒

「テンプレート構成って何ですか?具体的にどうやって整理するんでしょうか?」

先生

「では、基本から順番に見ていきましょう。まずはテンプレート構成の基本概念から説明しますね。」

1. テンプレート構成とは?

CodeIgniterのテンプレート構成とは、Webサイトの見た目を作るHTMLファイルを効率的に管理する仕組みのことです。例えば、レストランのメニュー表を想像してください。すべてのページに「お店のロゴ」や「営業時間」が書いてありますよね。これを毎回書くのは大変です。テンプレート構成を使えば、共通部分を一度だけ書いて、それを全ページで使い回すことができます。

CodeIgniterでは、ビュー(View)と呼ばれるファイルでHTMLを管理します。ビューはapp/Views/フォルダの中に保存されます。このビューファイルを上手に分割して組み合わせることで、メンテナンスしやすいWebサイトが作れるのです。

2. 基本的なテンプレート分割の考え方

Webサイトは通常、いくつかの共通パーツで構成されています。代表的なものは以下の通りです。

ヘッダー(header): サイトの上部にあるロゴやナビゲーションメニュー
フッター(footer): サイトの下部にある著作権情報やリンク
サイドバー(sidebar): 横に表示されるメニューや広告エリア
メインコンテンツ: ページごとに異なる主要な内容

これらを別々のビューファイルに分けることで、例えばヘッダーのデザインを変更したいときは、ヘッダーファイル1つを修正するだけで全ページに反映されます。まるでブロックを組み合わせるように、Webページを構築できるのです。

3. ビューファイルの基本的な構成例

実際にビューファイルをどのように分割するか見てみましょう。まず、app/Views/フォルダ内に以下のようなファイル構成を作ります。

推奨フォルダ構成:

app/Views/templates/header.php - ヘッダー部分
app/Views/templates/footer.php - フッター部分
app/Views/pages/home.php - ホームページのメインコンテンツ
app/Views/pages/about.php - アバウトページのメインコンテンツ

ヘッダーファイルの基本的な内容は次のようになります。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title) ?></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <h1>私のWebサイト</h1>
        <nav>
            <a href="/">ホーム</a>
            <a href="/about">会社概要</a>
        </nav>
    </header>

このheader.phpには、HTMLの開始タグから<header>要素までが含まれています。$title変数は、コントローラーから渡されるページタイトルです。esc()関数は、セキュリティのためにHTMLの特殊文字をエスケープする関数です。

4. フッターファイルの作成

次に、フッター部分を作成します。app/Views/templates/footer.phpというファイルを作り、以下のような内容にします。


    <footer>
        <p>&copy; 2025 私のWebサイト. All rights reserved.</p>
        <p>お問い合わせ: info@example.com</p>
    </footer>
    <script src="/js/script.js"></script>
</body>
</html>

フッターファイルには、<footer>要素とHTMLの閉じタグが含まれています。JavaScriptファイルの読み込みもここに書くことで、ページの表示速度を向上させることができます。これは、HTMLの基本的なベストプラクティスです。

5. コントローラーでビューを組み立てる方法

分割したビューファイルは、コントローラー(Controller)で組み立てます。コントローラーは、ユーザーからのリクエストを受け取り、どのビューを表示するかを決定する役割を持ちます。まるで料理のレシピのように、「まずヘッダーを出して、次にメインコンテンツ、最後にフッター」という順番を指定します。

app/Controllers/Home.phpというコントローラーファイルを作成し、以下のように記述します。


<?php

namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        $data['title'] = 'ホームページ';
        
        echo view('templates/header', $data);
        echo view('pages/home');
        echo view('templates/footer');
    }
    
    public function about()
    {
        $data['title'] = '会社概要';
        
        echo view('templates/header', $data);
        echo view('pages/about');
        echo view('templates/footer');
    }
}

view()関数は、指定したビューファイルを読み込む関数です。第一引数にファイルパス(拡張子.phpは省略可能)、第二引数にビューに渡すデータを配列で指定します。echoで出力することで、ヘッダー・コンテンツ・フッターが順番に表示されます。

6. レイアウトテンプレートを使った効率化

毎回3つのビューを読み込むのは少し面倒です。そこで、レイアウトテンプレートという手法を使うと、さらに効率的になります。レイアウトファイルは、共通部分をまとめた枠組みのようなものです。

app/Views/layouts/default.phpというファイルを作成します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title) ?></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <h1>私のWebサイト</h1>
        <nav>
            <a href="/">ホーム</a>
            <a href="/about">会社概要</a>
        </nav>
    </header>
    
    <main>
        <?= $this->renderSection('content') ?>
    </main>
    
    <footer>
        <p>&copy; 2025 私のWebサイト. All rights reserved.</p>
    </footer>
    <script src="/js/script.js"></script>
</body>
</html>

renderSection('content')は、各ページ固有のコンテンツが挿入される場所を示します。これは、料理の型のようなもので、中身だけを入れ替えることができます。

7. セクションを使ったコンテンツの差し込み

レイアウトテンプレートを使う場合、各ページのビューファイルは以下のように書きます。app/Views/pages/home.phpの例です。


<?= $this->extend('layouts/default') ?>

<?= $this->section('content') ?>
<div class="container">
    <h2>ようこそ!</h2>
    <p>これはホームページのコンテンツです。</p>
    <p>CodeIgniterのテンプレート機能を使って、効率的にサイトを構築しています。</p>
</div>
<?= $this->endSection() ?>

extend()で使用するレイアウトを指定し、section()とendSection()で囲まれた部分がレイアウトのrenderSection()の場所に挿入されます。コントローラーでは、return view('pages/home', $data);と書くだけで、自動的にレイアウトが適用されます。

8. 複数のセクションを使う応用テクニック

レイアウトテンプレートでは、複数のセクションを定義できます。例えば、特定のページだけに追加のJavaScriptを読み込みたい場合などに便利です。レイアウトファイルにrenderSection('scripts')を追加し、必要なページでのみsection('scripts')を定義します。

ポイント: セクションは必須ではありません。定義されていないセクションは単に何も表示されないだけなので、柔軟に使い分けることができます。

9. パーツの再利用でさらに効率化

サイドバーやお知らせエリアなど、複数のページで使い回したい部品は、app/Views/partials/フォルダに保存すると管理しやすくなります。例えば、サイドバーをpartials/sidebar.phpとして作成し、必要なページでecho view('partials/sidebar');と読み込めば、簡単に追加できます。

このように、パーツを小さく分割することで、変更があった際の修正箇所が明確になり、バグの混入も防げます。プログラミングでは、このような「関心の分離」という考え方が非常に重要です。

10. テンプレート構成のベストプラクティス

CodeIgniterでテンプレートを整理する際のポイントをまとめます。

命名規則を統一する: ファイル名は小文字とアンダースコアを使い、内容が分かりやすい名前にします
フォルダ構成を明確にする: templates、layouts、pages、partialsなど、用途別にフォルダ分けします
変数名を分かりやすくする: コントローラーからビューに渡す変数は、$data['page_title']のように具体的な名前にします
セキュリティを意識する: ユーザー入力を表示する際は、必ずesc()関数でエスケープします

これらのルールに従うことで、チームでの開発でも混乱が少なく、長期的にメンテナンスしやすいコードになります。最初は難しく感じるかもしれませんが、慣れてくると自然に身につきますので、実際に手を動かして試してみることが大切です。

公的機関での指導実績【CodeIgniterモダン開発実践セミナー】

商用CodeIgniter 4 徹底実践講座：軽量MVCによる高速開発とシステムのモダナイゼーション

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

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

「極限のパフォーマンス」を実装する。CodeIgniter 4で軽量・高速な商用システムを構築。

本講座では、フレームワークのオーバーヘッドを最小限に抑えた「高レスポンスなWebアプリケーション設計」を学びます。シンプルながら強力なCodeIgniter 4を通じ、既存システムのPHP 8.x対応や、リソース効率を極めたAPI開発など、実務で重宝される最適化技術を習得します。