CodeIgniterのビュー共通化ガイド！初心者でもわかる部分ビューの読み込みとinclude設計

CodeIgniterで部分ビューを読み込む方法（include設計）

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

生徒

「CodeIgniterでWebサイトを作っているのですが、ヘッダーやフッターを全部のページに書くのが大変です。もっと楽にする方法はありますか？」

先生

「それは『部分ビュー』という仕組みを使うと解決しますよ。共通の部分を一つのファイルにまとめて、必要な場所で呼び出す『include（インクルード）設計』という考え方です。」

生徒

「部分ビューを使うと、どんな良いことがあるんですか？」

先生

「修正が一箇所で済むのでミスが減りますし、管理がとても簡単になります。具体的な作り方を一緒に学んでいきましょう！」

1. ビュー（View）とテンプレートの基本を知ろう

プログラミングの世界、特にWeb開発では、画面に表示される見た目の部分をビュー（View）と呼びます。CodeIgniter（コードイグナイター）というPHPのフレームワークを使う際、このビューを効率よく管理することが非常に重要です。パソコンに詳しくない方向けに例えると、ビューは「画用紙」のようなものです。そこに文字や色を塗って、ユーザーに見せる完成図を作ります。

しかし、普通の画用紙と違うのは、デジタルなWebサイトには「どのページにも必ずあるパーツ」が存在することです。例えば、画面の一番上にあるサイト名やメニューが入ったヘッダー、一番下にある著作権表記などのフッターがそれにあたります。これらを全てのページに手書きで写していくのは、非常に時間がかかりますし、一箇所直したいときに全部のページを修正しなければなりません。そこで登場するのが、パーツごとに画用紙を切り分けて、必要なときに組み合わる「テンプレート」という考え方です。

2. 部分ビュー（パーシャル）とは何？

部分ビューとは、Webページの一部だけを担当する小さな部品のことです。専門用語では「パーシャル（Partial）」とも呼ばれます。例えば、「ヘッダー」「サイドバー」「フッター」「メインコンテンツ」というように、役割ごとにファイルを分割します。これを行う最大のメリットは、再利用性が高まることです。一度「ヘッダー」を作っておけば、100ページあっても、その1つのファイルを読み込むだけで全てのページに同じヘッダーを表示させることができます。

初心者の皆さんが最初に躓きやすいのが、「ファイルを分けるとどこに何があるか分からなくなる」という不安です。しかし、CodeIgniterではルールに従ってフォルダに保存するだけなので、実はとても整理整頓がしやすい仕組みになっています。ファイルを分けることは、大きなパズルをピースごとに作っておいて、最後にガッチャンコと組み立てるようなイメージだと考えてください。この「組み立てる」作業をプログラムで指示することをinclude（インクルード）と言います。

3. ビューファイルを分割して保存してみよう

まずは、共通パーツとして切り出したファイルを用意しましょう。CodeIgniterでは、通常 app/Views というフォルダの中にビューファイルを保存します。管理しやすいように、共通パーツ用のフォルダを作っておくと良いでしょう。ここでは、ヘッダーとフッターを別々のファイルとして作成する例を見ていきます。これらは拡張子が .php になりますが、中身は普通のHTMLを書いていけば大丈夫です。

例えば、ヘッダー用のファイル header.php を作成します。ここにはHTMLの開始タグや、ナビゲーションメニューなどを記述します。次に、フッター用のファイル footer.php を作成し、ここにはHTMLの閉じタグなどを記述します。このように分けておくことで、中身のコンテンツ（本文）だけを入れ替えることができるようになります。


<!-- app/Views/layout/header.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>はじめてのCodeIgniter</title>
</head>
<body>
    <header>
        <h1>マイブログサイト</h1>
        <nav>
            <ul>
                <li>ホーム</li>
                <li>記事一覧</li>
            </ul>
        </nav>
    </header>

4. コントローラーから複数のビューを読み込む方法

CodeIgniterでこれらの分割したファイルを画面に表示させるには、コントローラーという司令塔の役割をするファイルで指示を出します。コントローラーは、「このページを表示して！」という命令を受け取ったときに、どのビューファイルをどの順番で表示するかを決める役割を持っています。複数のビューを連続して読み込むことで、一つの画面として合成されます。

以下のコード例では、まずヘッダーを読み込み、次にメインのコンテンツ、最後にフッターを読み込むという順番を指示しています。プログラムは上から順番に実行されるという性質があるため、この記述順がそのまま画面の表示順（上から下）になります。このように、小さな部品を順番に呼び出して組み立てるのが最もシンプルなinclude設計の基本です。PHPのコードは非常にシンプルなので、未経験の方でも読みやすいはずです。


// app/Controllers/Home.php の中のメソッド例
public function index()
{
    // ヘッダーパーツを読み込む
    echo view('layout/header');
    
    // メインのコンテンツ（本文）を読み込む
    echo view('pages/welcome_message');
    
    // フッターパーツを読み込む
    echo view('layout/footer');
}

5. ビューの中で別のビューを読み込む手法

先程の方法はコントローラーで組み立てましたが、実はビューファイルの中から別のビューファイルを呼び出すことも可能です。これは「この部品の中に、さらにあの部品を埋め込みたい」というときに使います。例えば、サイドバーの中に「注目記事ランキング」という小さな部品を表示させたい場合などに便利です。CodeIgniterでは、ビューの中で echo view('ファイル名') と書くだけで、その場所に別のファイルの内容を差し込むことができます。

この手法を使うと、コントローラーの記述がスッキリするというメリットがあります。コントローラーは「メインの枠組み」だけを指定し、枠組みとなるファイルが自分自身で「ここにはこれが必要だ」とパーツを集めてくるイメージです。この入れ子構造をマスターすると、複雑なデザインのWebサイトも驚くほど簡単に作れるようになります。ただし、あまりに深くまで入れ子にすると、どこで何を読み込んでいるか迷子になってしまうので注意が必要です。


<!-- app/Views/main_template.php -->
<div class="container">
    <main>
        <h2>本日のニュース</h2>
        <p>ここに記事の本文が入ります。</p>
    </main>

    <aside>
        <!-- サイドバーという部品をここで呼び出す -->
        <?php echo view('layout/sidebar'); ?>
    </aside>
</div>

6. データを部分ビューに渡して表示を変えよう

部分ビューはただ同じものを表示するだけではありません。データ（変数）を渡すことで、読み込む場所によって中身を少しだけ変えることができます。例えば、ログインしているときはヘッダーに「こんにちは、〇〇さん」と表示し、ログアウトしているときは「ログインしてください」と表示するようなケースです。これを行うには、view() 関数の第2引数にデータをセットした配列を渡します。

配列とは、複数のデータをひとまとめにした箱のようなものです。この箱に名前を付けてビューに渡すと、ビュー側ではその名前を使ってデータを取り出すことができます。これにより、共通のパーツを使いつつも、ページごとにタイトルを変えたり、ユーザーごとにメッセージを変えたりといった柔軟な対応が可能になります。プログラミングにおいて、この「共通化しつつ、変化する部分だけを後から流し込む」という考え方は非常に効率的です。


// コントローラーでデータを準備して渡す例
public function showProfile()
{
    $data = [
        'user_name' => 'たろう',
        'status'    => 'プレミアム会員'
    ];

    // 第2引数に $data を渡すことで、ビュー内で変数として使えるようになる
    echo view('layout/header', $data);
    echo view('pages/profile');
    echo view('layout/footer');
}

7. include設計で意識すべきポイント

効率的なWeb制作のために「include設計」を考える際、意識しておきたいのは「どこまで細かく分けるか」というバランスです。ボタン一つ、アイコン一つを全て別ファイルに分けると、ファイル数が膨大になり管理が大変になります。一般的には、ヘッダー、フッター、ナビゲーション、サイドバー、そしてよく使うバナー広告やお問い合わせボタンのまとまり、といった単位で分けるのが初心者にはおすすめです。

また、ファイルの命名規則も重要です。一目でそれが「部分的なパーツ」だとわかるように、ファイル名の先頭にアンダースコアを付けて _header.php としたり、parts フォルダにまとめたりといった工夫をしましょう。後から見返したときや、他の人と一緒に作業をするときに「このファイルは何のためのものか」がすぐに分かる状態にしておくことが、プログラミングの上達への近道です。整理整頓が得意な人は、プログラミングの設計も上手になると言われています。

8. エラーが起きた時のチェックリスト

初心者の方が部分ビューを扱っていると、画面が真っ白になったり、エラーメッセージが出たりすることがあります。そんな時は焦らずに以下の点を確認してみましょう。まず一番多いのが、ファイルの保存場所の間違いです。app/Views フォルダの中に正しく配置されているか、スペルミスがないかを確認してください。大文字と小文字を区別する環境もあるので、そこも注意点です。

次に、PHPのタグ <?php ... ?> が正しく閉じられているか、セミコロン ; を忘れていないかチェックしましょう。特にビューの中で別のビューを呼び出す際に、エコー（表示命令）の echo を書き忘れると、読み込み自体はされていても画面に何も表示されないという現象が起きます。実行結果を確認しながら、一つずつパーツを組み合わせていくのがコツです。最初は小さなパーツから試して、徐々に大きなレイアウトを作っていくようにしましょう。


// 正常に読み込まれた場合のHTML出力イメージ
<header>...</header>
<main>プロフィール画面</main>
<footer>...</footer>

9. include設計がもたらす未来の保守性

最後に、なぜここまでして「分けること」にこだわるのかをお話しします。それは、Webサイトを運用していく中で必ず発生する「変更」に強くするためです。例えば、サイトのロゴが変わったときに、全てのページのHTMLを書き換えるのは現実的ではありません。しかし、header.php という一つの部分ビューを使っていれば、そこを1箇所直すだけで、数千、数万ページある大規模なサイトでも一瞬で修正が完了します。

このように、将来の自分が楽をするために、あらかじめ共通部分を切り出しておく設計を「保守性を高める」と言います。初心者の方は、まず「楽をするための工夫」として部分ビューを楽しんで使ってみてください。CodeIgniterは、そうした開発者の「楽をしたい」という願いを叶えてくれる非常に強力なツールです。一つ一つのパーツを丁寧に作り、それを組み合わせて自分だけのWebアプリケーションを完成させていきましょう。

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

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

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

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

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

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