CodeIgniter 4で管理画面のレイアウトを効率化！LayoutとPartialの完全ガイド

CodeIgniterで管理画面向けレイアウトを作る方法

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

生徒

「CodeIgniterで管理画面を作っているのですが、ヘッダーやメニューを全ページにコピーして貼り付けるのが大変です。もっと楽に共通化する方法はありますか？」

先生

「それは『レイアウト（Layout）』という機能を使うと解決しますよ！共通の枠組みを一つ作っておけば、中身だけを入れ替えることができるんです。」

生徒

「なるほど！それなら修正も一箇所で済みそうですね。どうやって設定するのか教えてください！」

先生

「もちろんです。部品ごとに分ける『パーシャル（Partial）』の考え方も含めて、初心者の方にも分かりやすく解説していきますね。」

1. レイアウトとパーシャルとは？初心者向けの考え方

Webサイトや管理画面を作るとき、画面の「上（ヘッダー）」、「左（サイドメニュー）」、「下（フッター）」はどのページでも同じデザインであることが多いですよね。これをページごとに毎回書いていると、例えば「メニューの項目を増やしたい」と思ったときに、100ページあれば100回修正しなくてはなりません。これは非常に効率が悪いです。

そこで登場するのが「レイアウト（Layout）」と「パーシャル（Partial）」です。

レイアウト： ページ全体の「外枠」のこと。額縁のようなイメージです。
パーシャル： 「部品」のこと。ヘッダーだけ、ボタンだけ、といった小さなパーツを指します。

CodeIgniter 4というフレームワーク（便利な道具箱のようなもの）を使うと、この外枠と部品をパズルのように組み合わせて、管理画面をあっという間に作ることができます。

2. 共通の土台となる「ベースレイアウト」を作成する

まずは、すべてのページの基本となる「親」のファイルを作ります。これを「ベースレイアウト」と呼びます。ここにHTMLの基本的な構造を書き、中身（コンテンツ）が変わる部分にだけ「ここに中身を入れてね！」という印をつけます。

CodeIgniterでは renderSection() という命令を使って、中身を埋め込む場所を指定します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>管理画面システム</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <h1>マイ管理パネル</h1>
    </header>

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

    <footer>
        <p>© 2026 Admin System</p>
    </footer>
</body>
</html>

この renderSection('content') という部分が重要です。ここに、後で作る各ページの内容が自動的に流し込まれる仕組みになっています。

3. 各ページの「中身（ビュー）」を作成して表示する

次に、実際に画面に表示したい「中身」を作ります。これを「ビュー（View）」と呼びます。先ほど作った「ベースレイアウト」を使うことを宣言するために、ファイルの冒頭で extend() という命令を使います。


<!-- layouts/main.php を使うことを指定 -->
<?php echo $this->extend('layouts/main'); ?>

<!-- 'content' という名前のセクションを開始 -->
<?php echo $this->section('content'); ?>

    <h2>ダッシュボードへようこそ</h2>
    <p>ここは管理画面のメインページです。本日の売上やユーザー数を確認できます。</p>
    <div class="card">
        <p>最新の通知：システムは正常に稼働しています。</p>
    </div>

<?php echo $this->endSection(); ?>

このように書くと、CodeIgniterは自動的に「layouts/main」を探し出し、その中の renderSection('content') の場所に、このファイルの中身をはめ込んでくれます。これを継承（けいしょう）と呼びます。親のデザインを子が引き継ぐという意味です。

4. パーシャルを使ってメニューやヘッダーを部品化する

管理画面が大きくなってくると、ベースレイアウト自体もコードが長くなって見づらくなります。そこで、サイドメニューやヘッダーを別のファイルに切り出します。これが「パーシャル」です。料理でいうところの「作り置きのおかず」を小鉢に分けておく感覚です。

部品を読み込むときは include() ではなく、CodeIgniterの include() メソッドを使います（PHP標準のものと似ていますが、フレームワークの機能を使うのが推奨されます）。


<!-- layouts/main.php の中での書き方例 -->
<body>
    <!-- ヘッダー部品を読み込む -->
    <?= $this->include('parts/header') ?>

    <div class="container">
        <aside>
            <!-- サイドナビ部品を読み込む -->
            <?= $this->include('parts/sidebar') ?>
        </aside>

        <article>
            <?= $this->renderSection('content') ?>
        </article>
    </div>
</body>

こうすることで、サイドメニューのデザインを変えたいときは parts/sidebar.php だけを直せば、全ページに反映されます。修正漏れがなくなるので、ミスを劇的に減らすことができます。

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

さて、ファイルを作っただけでは画面には表示されません。プログラムの司令塔である「コントローラー」から、「このビューを表示してね」と命令を送る必要があります。プログラミングが初めての方にとって、コントローラーは「ボタンを押されたときに動く処理のまとまり」だと考えてください。


namespace App\Controllers;

class Admin extends BaseController
{
    public function index()
    {
        // データの準備（例：ユーザー名など）
        $data = [
            'page_title' => 'ダッシュボード',
            'username'   => '田中太郎'
        ];

        // views/admin/dashboard.php を表示する
        return view('admin/dashboard', $data);
    }
}

このコードでは、view() という関数を使って画面を呼び出しています。第2引数の $data を渡すことで、画面側で「田中太郎」という名前を表示させたりすることも可能になります。

6. 管理画面に特化したレイアウト設計のコツ

管理画面を作る際に意識したいのは「情報の整理」です。一般ユーザー向けのサイトと違い、管理画面は「作業のしやすさ」が最優先されます。そのため、レイアウトを組むときは以下の点に注意しましょう。

パンくずリスト： 今、自分が管理画面のどの階層にいるかを示す「道しるべ」です。これもパーシャル化しておくと便利です。
一貫したナビゲーション： どのページにいても、常に同じ場所にメニューがあるようにします。
レスポンシブ対応： 最近はタブレットで在庫管理をするケースも多いため、画面サイズに合わせてレイアウトが崩れないようにします。

これらを実現するためには、HTMLの中に class="container" や class="row" といったBootstrap（デザインを整えるためのツール）のルールを組み込んでおくと、よりプロフェッショナルな管理画面になります。

7. セクションを複数使ってJavaScriptやCSSを制御する

特定のページだけで使いたい「グラフ表示用のプログラム」や「特別なスタイルシート（見た目の設定）」がある場合、どうすればいいでしょうか？ベースレイアウトに全部書いてしまうと、不要なページでも読み込まれてしまい、動作が重くなる原因になります。

そんな時は、renderSection を複数使いましょう。例えば、フッターの直前に javascript という名前のセクションを用意しておきます。


<!-- ベースレイアウト（layouts/main.php）の最後の方 -->
    <script src="/js/common.js"></script>
    <!-- 各ページ独自のスクリプトをここに差し込む -->
    <?= $this->renderSection('scripts') ?>
</body>

そして、特定のページ（ビュー）側でこのように書きます。


<?php echo $this->section('scripts'); ?>
<script>
    console.log('このページだけで動く特別な処理です！');
    alert('売上グラフを読み込みました');
</script>
<?php echo $this->endSection(); ?>

これによって、ページごとに必要な部品だけを「外枠」に送り込むことができるようになります。非常に柔軟で、プログラミングらしい効率的な書き方ですね。

8. エラーを防ぐための注意点とトラブルシューティング

初心者がよくやってしまうミスに「セクション名の打ち間違い」があります。例えば、レイアウト側で renderSection('content') と書いているのに、ビュー側で section('contant') （eがaになっている）と書いてしまうと、中身が何も表示されません。パソコンは一文字でも違うと正しく理解してくれないので、スペルチェックは丁寧に行いましょう。

また、ファイルの保存場所（パス）にも注意が必要です。extend('layouts/main') と書いた場合、実際のファイルは app/Views/layouts/main.php にある必要があります。フォルダの階層構造をしっかり把握しておくことが、Web開発の上達への近道です。

もし画面が真っ白になってしまったら、ブラウザの「開発者ツール」を確認したり、CodeIgniterのログファイルを見て、どこでつまずいているかを探してみましょう。一つずつ解決していくことで、確実にスキルが身についていきます。

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

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

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

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

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

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