CodeIgniterのビュー活用術！LayoutとPartialで効率的なWebサイト制作

CodeIgniterでビューを効率的に使うための基本設計

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

生徒

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

先生

「それは『ビューの共通化』が必要ですね。CodeIgniterには、レイアウトやパーシャルという考え方を使って、画面の部品を賢く使い回す仕組みがあるんですよ。」

生徒

「レイアウト？パーシャル？初めて聞く言葉ですが、初心者でも使いこなせますか？」

先生

「もちろんです！パズルのように部品を組み合わせるだけなので、仕組みさえわかればとても簡単です。効率的な画面設計のコツを一緒に学んでいきましょう！」

1. ビュー（View）とは何かを理解しよう

プログラミングの世界、特にCodeIgniter（コードイグナイター）という道具を使ってWebサイトを作る際、「ビュー（View）」という言葉がよく登場します。これは一言で言うと、ユーザーがブラウザで目にする「画面そのもの」のことです。HTMLという言語を使って、文字の色やボタンの配置を決める役割を持っています。

CodeIgniterでは、データを処理する部分と、見た目を作る部分を切り離して管理します。これを「MVCモデル」と呼びますが、今は難しく考えなくて大丈夫です。要するに「デザイン担当のファイルを独立させることで、修正しやすくする仕組み」だと覚えておきましょう。初心者の方が最初につまずくのは、全ページに共通するメニューバーなどを、全てのファイルに手書きでコピーしてしまうことです。これでは、メニューを一箇所直したい時に、全てのファイルを修正しなければならず、非常に効率が悪くなってしまいます。

2. レイアウト（Layout）で共通の土台を作る

Webサイトを観察してみると、ロゴがある「ヘッダー」、著作権情報がある「フッター」、メインの「コンテンツ」など、どのページでも変わらない部分が多いことに気づくはずです。この「サイト全体の枠組み」をレイアウト（Layout）と呼びます。

レイアウトを導入すると、家を建てる時の「基礎」や「柱」を一度だけ作るような感覚で開発が進められます。中身のコンテンツだけを差し替えるだけで、新しいページが完成するのです。CodeIgniter 4では、renderSectionという便利な機能を使って、この共通枠を実現します。まずは、全ての土台となる基本的なHTMLファイルを準備してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?= $title ?? 'マイサイト' ?></title>
</head>
<body>
    <header>
        <h1>CodeIgniterブログ</h1>
    </header>

    <main>
        <!-- ここに各ページの中身が入ります -->
        <?= $this->renderSection('content') ?>
    </main>

    <footer>
        <p>© 2026 プログラミング学習帳</p>
    </footer>
</body>
</html>

3. パーシャル（Partial）で部品を小分けにする

レイアウトが「全体の枠組み」なら、パーシャル（Partial）は「使い回せる小さな部品」のことです。例えば、サイドバーにある「最新記事一覧」や、記事の下に表示する「SNSシェアボタン」などがこれにあたります。

「パーシャル」という言葉は、英語で「部分的な」という意味を持ちます。大きなファイルを1つ作るのではなく、小さな部品に分けて保存しておくことで、「この部品はAページとCページだけで使いたい」といった柔軟な対応が可能になります。また、ファイルが短くなるので、どこに何が書いてあるか一目でわかるようになり、初心者の方でもミスを見つけやすくなるというメリットがあります。CodeIgniterではincludeのような感覚でview()関数を使ってこれらを呼び出します。

4. 実際にレイアウトを適用してみよう

先ほど作った「土台（レイアウト）」を使って、実際のページを作成する方法を解説します。ポイントは、子となるファイル（各ページの内容）の冒頭で、「私はこのレイアウトを使います！」と宣言することです。これにはextendという命令を使います。

プログラミングに慣れていない方は、「extend（継承）」という言葉を聞くと難しく感じるかもしれませんが、要は「テンプレートを借りてくる」というイメージです。以下のコードは、トップページの内容を記述するファイル（例：index.php）の書き方です。中身だけを書けば良いので、非常にスッキリした見た目になります。


<!-- レイアウトファイルを指定します -->
<?= $this->extend('layout/main') ?>

<!-- 'content'という名前のセクションを開始します -->
<?= $this->section('content') ?>
    <h2>ようこそ！</h2>
    <p>これはCodeIgniterのビュー機能を使ったページです。</p>
    <p>レイアウトを使うことで、コードの重複を防いでいます。</p>
<?= $this->endSection() ?>

5. コントローラーからビューを呼び出す基本

作成したビューを画面に表示するためには、コントローラー（Controller）という「司令塔」の役割を持つファイルで命令を出す必要があります。コントローラーは、ユーザーのリクエスト（このページが見たい！という要求）を受け取って、どのビューを表示するかを判断します。

ここでは、単に表示するだけでなく、ページごとに異なる「タイトル」などのデータを渡す方法も見ておきましょう。配列（データを入れる箱のようなもの）を使って、ビューに情報を送ります。これにより、同じレイアウトを使いながら、ページごとにタイトルを「プロフィール」や「お問い合わせ」と変えることができるようになります。


namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        // 画面に渡したいデータを準備します
        $data = [
            'title' => 'トップページ - はじめてのCodeIgniter',
            'message' => 'こんにちは、世界！'
        ];

        // views/index.phpを表示します
        return view('index', $data);
    }
}

6. 条件分岐を使って表示を切り替えるコツ

Webサイトを運営していると、「ログインしている時だけメニューを表示したい」とか「管理者だけに特別なボタンを見せたい」という場面が出てきます。ここで役立つのが、PHPの基本であるif文です。ビューの中でもこの条件分岐を使うことができます。

プログラム未経験の方にとって、HTMLの中にPHPのコードが混ざるのは少し複雑に見えるかもしれません。しかし、「もし〜なら、これを表示する」という日本語をそのままコードに直しているだけだと考えれば簡単です。CodeIgniterのビュー内では、以下のように記述して、状況に応じた柔軟な画面表示を実現します。


<div class="user-status">
    <?php if ($isLoggedIn): ?>
        <p>おかえりなさい、ユーザーさん！</p>
        <a href="/logout">ログアウト</a>
    <?php else: ?>
        <p>ゲストさん、こんにちは。</p>
        <a href="/login">ログインはこちら</a>
    <?php endif; ?>
</div>

7. パソコン初心者でも安心！効率化のメリット

なぜここまでして「レイアウト」や「パーシャル」にこだわるのでしょうか？それは、大規模なWebサイトになればなるほど、管理が大変になるからです。例えば、100ページあるサイトで、フッターの電話番号が変更になったとしましょう。もし共通化していなければ、100個のファイルを一つずつ開いて書き直さなければなりません。これは気が遠くなる作業ですし、間違いも起きやすいです。

しかし、今回の手法を使っていれば、footer.phpのような部品ファイルをたった一つ修正するだけで、100ページ全ての表示が一瞬で切り替わります。これこそがプログラミングの真髄であり、コンピュータに任せるべき仕事です。初心者の方こそ、最初からこの「共通化」の癖をつけておくことで、将来的に複雑なシステムを作る時にも困らない基礎体力が身につきます。

8. ビュー設計でよくある間違いと対策

効率的なビュー設計を目指す上で注意したいのが、「やりすぎ」です。あまりにも細かく部品を分けすぎると、今度はどの部品がどこで使われているか分からなくなってしまいます。最初は「ヘッダー」「フッター」「メインコンテンツ」の3つくらいから始め、慣れてきたら「サイドバー」や「バナー広告」を切り出していくのがおすすめです。

また、ビューの中に複雑な計算やデータベースの操作を書かないようにしましょう。ビューの役割はあくまで「表示」です。難しい計算はコントローラーにお願いして、ビューには「計算済みの結果」だけを渡すのが、美しく正しい設計の第一歩です。この役割分担を意識するだけで、あなたのコードは格段に読みやすく、プロフェッショナルなものへと近づいていきます。

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

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

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

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

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

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