CodeIgniterでビューを作成・表示する基本手順！初心者でもわかる完全ガイド

CodeIgniterでビューを作成・表示する基本手順

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

生徒

「CodeIgniterでWebページの画面を表示するにはどうすればいいんですか？」

先生

「CodeIgniterでは、ビューという機能を使って、HTMLの画面を表示します。これは画面表示専用のファイルで、プログラムのロジックと分けて管理できるんですよ。」

生徒

「ビューって何ですか？どうやって作るんでしょうか？」

先生

「ビューはHTMLファイルのようなものです。それでは、基本的な作り方と表示方法を順番に見ていきましょう！」

1. CodeIgniterのビューとは？

CodeIgniterのビューとは、Webページの見た目を作るためのファイルのことです。例えるなら、レストランのメニュー表のようなもので、お客様（ユーザー）に見せる部分を担当します。プログラムの処理を行うコントローラーとは別に管理することで、デザインとプログラムを分けて作業できるという大きなメリットがあります。

ビューファイルは主にHTMLで書かれていますが、その中にPHPコードを埋め込むこともできます。これにより、データベースから取得した情報を画面に表示したり、条件によって表示内容を変えたりすることが可能になります。MVCアーキテクチャというWebアプリケーションの設計パターンの中で、ビューは「V（View）」の部分を担当しています。

2. ビューファイルの保存場所と命名規則

CodeIgniterでビューファイルを作成する際は、決められた場所に保存する必要があります。ビューファイルはapplication/viewsフォルダの中に配置します。このフォルダがビュー専用の保管場所になっています。例えるなら、図書館で本をジャンルごとに分けて棚に並べるように、CodeIgniterでもファイルを種類ごとに分けて管理しているのです。

ファイル名は自由につけられますが、分かりやすい名前にすることが推奨されます。例えば、トップページならhome.php、お問い合わせページならcontact.phpといった具合です。拡張子は.phpをつけます。また、複数のページで共通して使う部分（ヘッダーやフッターなど）は、別々のビューファイルとして作成し、後で組み合わせることもできます。

3. 最もシンプルなビューの作成

まずは、最もシンプルなビューファイルを作成してみましょう。application/viewsフォルダにwelcome.phpという名前でファイルを作成します。このファイルは、HTMLの基本的な構造で書いていきます。以下のコードは、簡単な挨拶メッセージを表示するビューの例です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ようこそ</title>
</head>
<body>
    <h1>CodeIgniterへようこそ！</h1>
    <p>これは最初のビューファイルです。</p>
</body>
</html>

このファイルは通常のHTMLファイルとほとんど同じです。<!DOCTYPE html>はHTML5の文書であることを宣言し、<html lang="ja">は日本語のページであることを示しています。<head>タグの中には文字コードやタイトルを設定し、<body>タグの中に実際に表示する内容を書きます。

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

作成したビューファイルを実際に表示するには、コントローラーから呼び出す必要があります。コントローラーは、プログラムの司令塔のような役割を果たします。application/controllersフォルダにWelcome.phpというコントローラーファイルを作成します。


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

    public function index()
    {
        $this->load->view('welcome');
    }
}

このコードの$this->load->view('welcome');という部分が、ビューファイルを読み込む命令です。'welcome'という文字列は、先ほど作成したwelcome.phpのファイル名（拡張子を除いた部分）を指定しています。$thisはコントローラー自身を指し、loadはCodeIgniterの読み込み機能、viewはビューを表示するメソッドです。

indexメソッドは、このコントローラーが呼ばれたときに最初に実行される標準的なメソッドです。例えるなら、お店に入ったときに最初に案内される受付のようなものです。

5. ビューにデータを渡す方法

ビューに動的なデータを表示するには、コントローラーからビューへデータを渡す必要があります。これは、料理人（コントローラー）が作った料理（データ）をウェイター（ビュー）がお客様に届けるイメージです。データは配列の形式で渡します。


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

    public function index()
    {
        $data['title'] = 'ホームページ';
        $data['message'] = 'CodeIgniterでビューを表示しています！';
        $data['user_name'] = '田中太郎';
        
        $this->load->view('welcome', $data);
    }
}

$dataという配列にキーと値のペアを設定します。キーは変数名、値は実際のデータです。そして、viewメソッドの第二引数に$dataを渡すことで、ビュー側でこれらのデータが使えるようになります。

ビュー側では、配列のキー名がそのまま変数名として使用できます。以下のように、ビューファイルで受け取ったデータを表示します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php echo $title; ?></title>
</head>
<body>
    <h1><?php echo $message; ?></h1>
    <p>ユーザー名：<?php echo $user_name; ?></p>
</body>
</html>

<?php echo $title; ?>のように書くことで、コントローラーから渡されたデータを画面に表示できます。echoは画面に文字を出力するPHPの命令です。

6. 複数のビューを組み合わせる方法

実際のWebサイトでは、ヘッダー、本文、フッターなど、複数の部品を組み合わせてページを構成することが一般的です。CodeIgniterでは、複数のビューファイルを順番に読み込むことで、これを実現できます。まず、共通部分となるヘッダーとフッターのビューファイルを作成しましょう。

application/views/header.phpを作成します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のサイト</title>
</head>
<body>
    <header>
        <h1>サイトのタイトル</h1>
        <nav>
            <a href="/">ホーム</a> | <a href="/about">会社概要</a>
        </nav>
    </header>

次にapplication/views/footer.phpを作成します。


    <footer>
        <p>&copy; 2025 私のサイト All rights reserved.</p>
    </footer>
</body>
</html>

そして、コントローラーで順番に読み込みます。


public function index()
{
    $this->load->view('header');
    $this->load->view('welcome');
    $this->load->view('footer');
}

このように、viewメソッドを複数回呼び出すことで、ヘッダー、本文、フッターを順番に連結して一つのページとして表示できます。これにより、共通部分を一度作成すれば、すべてのページで再利用できるため、メンテナンスが非常に楽になります。

7. ビューで条件分岐を使う実践例

ビューファイルの中でPHPの条件分岐を使うことで、状況に応じて表示内容を変えることができます。例えば、ユーザーがログインしているかどうかで、表示するメッセージを変えたい場合などに便利です。

コントローラーで、ログイン状態のデータを渡します。


public function index()
{
    $data['is_logged_in'] = true;
    $data['user_name'] = '山田花子';
    
    $this->load->view('dashboard', $data);
}

ビューファイルでは、受け取ったデータを使って条件分岐します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ダッシュボード</title>
</head>
<body>
    <?php if ($is_logged_in): ?>
        <h1>ようこそ、<?php echo $user_name; ?>さん！</h1>
        <p>ログイン中です。</p>
    <?php else: ?>
        <h1>ようこそ、ゲストさん</h1>
        <p><a href="/login">ログインしてください</a></p>
    <?php endif; ?>
</body>
</html>

if ($is_logged_in):からendif;までが条件分岐の構文です。コロン記法と呼ばれるこの書き方は、HTMLの中にPHPを埋め込む際に見やすくなるため、ビューファイルでよく使われます。条件が真の場合はifの中身が実行され、偽の場合はelseの中身が実行されます。

8. ビューでループ処理を使う実践例

データベースから取得した複数のデータをリスト表示する場合など、ループ処理が必要になります。PHPのforeach文を使うことで、配列の要素を順番に処理できます。例えば、商品リストを表示する場合を見てみましょう。

コントローラーで商品データの配列を作成します。


public function products()
{
    $data['products'] = [
        ['name' => 'ノートパソコン', 'price' => 89800],
        ['name' => 'マウス', 'price' => 1980],
        ['name' => 'キーボード', 'price' => 3980]
    ];
    
    $this->load->view('product_list', $data);
}

ビューファイルでループを使って一覧表示します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品一覧</title>
</head>
<body>
    <h1>商品一覧</h1>
    <ul>
        <?php foreach ($products as $product): ?>
            <li>
                <?php echo $product['name']; ?>：
                <?php echo number_format($product['price']); ?>円
            </li>
        <?php endforeach; ?>
    </ul>
</body>
</html>

foreach文は、配列の要素を一つずつ取り出して処理を繰り返します。$products配列から$productという変数に一つずつ商品データが入り、<li>タグで囲んでリスト表示されます。number_format関数は数値に桁区切りのカンマを入れる関数で、価格表示を見やすくしています。

9. ビュー表示時のよくあるエラーと解決方法

CodeIgniterでビューを表示する際に、初心者がよく遭遇するエラーとその解決方法を紹介します。まず、「Unable to load the requested file」というエラーが表示される場合、これはビューファイルが見つからないことを意味します。ファイル名のスペルミスや、ファイルが正しいフォルダに保存されているか確認しましょう。

次に、「Undefined variable」というエラーは、ビューで使おうとした変数がコントローラーから渡されていない場合に発生します。コントローラーで$data配列に必要なデータをすべて設定しているか確認してください。また、変数名のスペルミスにも注意が必要です。

画面に何も表示されない、または真っ白な画面になる場合は、PHPのエラーが発生している可能性があります。application/config/config.phpファイルで、$config['log_threshold']の値を1以上に設定すると、エラーログが記録され、問題の特定がしやすくなります。エラーログはapplication/logsフォルダに保存されます。

10. ビュー作成時のベストプラクティス

CodeIgniterでビューを作成する際の推奨される方法をいくつか紹介します。まず、ビューにはなるべく複雑なロジックを書かないことが重要です。複雑な計算やデータベース操作はコントローラーやモデルで行い、ビューは受け取ったデータを表示することに専念させます。これにより、コードの見通しが良くなり、修正も簡単になります。

また、共通部分は別のビューファイルとして切り出すことで、コードの重複を避けられます。ヘッダー、フッター、サイドバーなどは多くのページで共通して使用されるため、別ファイルにしておくことで、デザイン変更が一箇所で済みます。

セキュリティの観点からは、ユーザーからの入力をそのまま表示する場合、必ずエスケープ処理を行いましょう。CodeIgniterではhtmlspecialchars関数や、CodeIgniter独自のhtml_escape関数を使うことで、クロスサイトスクリプティング攻撃を防ぐことができます。

最後に、ビューファイル名は分かりやすく、一貫性のある命名規則を使うことをお勧めします。例えば、ユーザー関連のビューはuser_で始める、管理画面はadmin_で始めるなど、プロジェクト全体で統一されたルールを決めておくと、ファイルが増えても管理しやすくなります。

まとめ

CodeIgniterのビューの基本を総復習

ここまで、CodeIgniterでビューを作成して表示する方法について、初心者にも理解しやすいように順番に解説してきました。Webアプリケーション開発では、画面の見た目を作る部分と、プログラムの処理を行う部分を分けて設計することがとても重要です。CodeIgniterでは、この考え方をMVCアーキテクチャという設計思想で実現しており、その中でビューはユーザーに見える画面を担当する大切な役割を持っています。

ビューは主にHTMLで構成されたファイルであり、application viewsフォルダの中に保存します。通常のHTMLファイルとほとんど同じ書き方で作成できるため、Web制作の経験がある人なら比較的簡単に理解することができます。また、HTMLの中にPHPコードを埋め込むことができるため、コントローラーから渡されたデータを表示したり、条件によって画面の内容を変えたりすることも可能です。

例えば、ユーザー名を画面に表示したり、ログインしているユーザーとゲストユーザーで表示メッセージを変更する場合などは、ビューの中でPHPの条件分岐やループ処理を利用します。これにより、静的なHTMLページではなく、データベースの情報やユーザーの状態に応じて変化する動的なWebページを作成できます。

コントローラーからビューを表示する仕組み

CodeIgniterでは、ビューは単独で表示されるわけではありません。必ずコントローラーから呼び出されます。コントローラーはアプリケーションの司令塔のような存在で、URLのアクセスを受け取って処理を行い、その結果をビューに渡して画面として表示します。

コントローラーの中では、load viewメソッドを使ってビューファイルを読み込みます。基本的な書き方はとてもシンプルで、ビューのファイル名を指定するだけで画面に表示することができます。さらに、配列を使ってデータを渡すことで、ビュー側でそのデータを変数として利用できるようになります。


<?php
class Welcome extends CI_Controller {

    public function index()
    {
        $data['title'] = 'CodeIgniterビューの基本';
        $data['message'] = 'CodeIgniterでビューを表示しています';
        $data['user'] = 'プログラミング学習者';

        $this->load->view('header');
        $this->load->view('welcome_view', $data);
        $this->load->view('footer');
    }

}

このように複数のビューを読み込むことで、ヘッダー本文フッターのようにページを部品ごとに分けて構成することができます。実際のWebサイトではこの方法が非常によく使われており、サイト全体のデザインを統一しながら効率よく開発することが可能になります。

ビューでよく使う条件分岐とループ処理

ビューでは単純なHTML表示だけでなく、PHPの条件分岐や繰り返し処理を使うことで、より実用的なWebページを作ることができます。例えばログインしているユーザーだけに特定のメニューを表示したり、商品一覧や記事一覧のように複数のデータをリスト表示する場合にはループ処理が活躍します。


<h1><?php echo $title; ?></h1>

<?php if ($is_logged_in): ?>
    <p>ようこそ <?php echo $user_name; ?> さん</p>
<?php else: ?>
    <p>ログインしてください</p>
<?php endif; ?>

<ul>
<?php foreach ($products as $product): ?>
    <li><?php echo $product['name']; ?></li>
<?php endforeach; ?>
</ul>

このような仕組みを理解すると、CodeIgniterを使ったWebアプリケーション開発が一気に実践的になります。データベースと連携したシステムや管理画面、ブログシステム、会員サイトなども、このビューの仕組みを応用して作ることができます。

CodeIgniterビュー開発で意識したいポイント

CodeIgniterでビューを作る際に重要なポイントはいくつかあります。まず一つ目は、ビューには複雑な処理を書きすぎないことです。計算処理やデータ取得などのロジックはコントローラーやモデルで行い、ビューは表示に専念させることが理想的です。このルールを守ることでコードの可読性が向上し、後からメンテナンスする際も理解しやすくなります。

二つ目は、共通部分を再利用できるように設計することです。ヘッダーやフッター、ナビゲーションメニューなどは多くのページで共通して使用されます。これらを別のビューファイルとして作成しておくことで、デザイン変更が必要になった場合でも一か所を修正するだけでサイト全体に反映させることができます。

三つ目はセキュリティ対策です。ユーザーが入力したデータをそのまま画面に表示すると、クロスサイトスクリプティングと呼ばれる攻撃の原因になる可能性があります。そのため、表示する際にはhtmlspecialcharsやhtml_escapeなどの関数を使ってエスケープ処理を行うことが大切です。

これらのポイントを意識してビューを設計することで、CodeIgniterを使った安全で管理しやすいWebアプリケーションを構築することができます。特に初心者のうちは、MVCの役割分担をしっかり理解することが上達の近道になります。

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

生徒

今日はCodeIgniterのビューについて学びましたが、ビューは画面を表示するためのファイルという理解で合っていますか

先生

その理解で大丈夫です。ビューはHTMLを中心に書かれたファイルで、ユーザーが実際に見る画面を作る役割を持っています。CodeIgniterではMVCという構造を使うので、コントローラーやモデルと役割を分担して開発します。

生徒

ビューはapplication viewsフォルダに保存するんでしたね。そしてコントローラーからload viewで読み込むと画面に表示されるんですよね

先生

その通りです。さらにコントローラーから配列でデータを渡すことで、ビュー側ではそのデータを変数として使うことができます。例えばユーザー名や記事タイトルなどを画面に表示できます。

生徒

条件分岐やループ処理もビューの中で使えるので、商品一覧やユーザー表示などの実用的な画面も作れそうですね

先生

その通りです。ただし複雑な処理はなるべくコントローラーやモデルに任せて、ビューは表示に集中させるのがベストです。これがMVC設計の基本です。

生徒

ヘッダーやフッターを別のビューファイルに分ける方法も便利そうでした。ページが増えても管理しやすくなりそうです

先生

その通りです。CodeIgniterで効率よくWebアプリケーションを開発するためには、ビューの再利用とMVCの役割分担を意識することがとても重要です。今日学んだ内容をもとに、ぜひ自分でもビューを作って練習してみてください。

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

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

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

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

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

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