CodeIgniterのビューとは？役割と基本的な使い方を初心者向けに完全解説

CodeIgniterのビューとは？役割と基本的な使い方を解説

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

生徒

「CodeIgniterでWebページを表示するには、どうしたらいいんですか？」

先生

「それには、ビューという仕組みを使います。ビューを使えば、HTMLで画面を簡単に作れますよ。」

生徒

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

先生

「それでは、CodeIgniterのビューの基本から、実際の使い方まで順番に見ていきましょう！」

1. CodeIgniterのビューとは？

CodeIgniterのビューとは、Webページとして表示されるHTML部分を管理するファイルのことです。例えば、お店で例えるなら、キッチン（プログラムの処理部分）で料理を作り、その料理をお客様に見せる「お皿」がビューだと考えてください。

CodeIgniterはMVCアーキテクチャという設計パターンを採用しています。MVCとは、Model（モデル）、View（ビュー）、Controller（コントローラー）の頭文字を取ったもので、それぞれ役割が分かれています。

Model（モデル）：データベースとのやり取りを担当
Controller（コントローラー）：処理の流れを制御する司令塔
View（ビュー）：ユーザーに見せる画面を作成

ビューファイルは、通常application/views/フォルダの中に保存されます。ビューの中には、HTMLタグやCSS、JavaScriptなどを書くことができ、PHPのコードも埋め込むことが可能です。これにより、動的なWebページを簡単に作成できるのです。

2. ビューファイルの作成方法

それでは、実際にビューファイルを作ってみましょう。まず、application/views/フォルダの中に、新しいファイルを作成します。ファイル名はwelcome_view.phpとします。

ビューファイルの中には、通常のHTMLを書くことができます。以下は、シンプルなビューファイルの例です。


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

このファイルをapplication/views/welcome_view.phpとして保存します。ファイル名は自由に決められますが、わかりやすい名前を付けることが重要です。拡張子は必ず.phpにしてください。

3. コントローラーからビューを読み込む基本

作成したビューファイルを表示するには、コントローラーから呼び出す必要があります。コントローラーは、ビューを読み込むための指示を出す役割を持っています。

コントローラーファイルは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_view');
    }
}

このコードの重要なポイントは、$this->load->view('welcome_view');という部分です。この命令で、先ほど作成したwelcome_view.phpファイルが読み込まれ、ブラウザに表示されます。loadは読み込みを意味し、viewはビューファイルを指定しています。

ファイル名を指定するときは、拡張子の.phpは書かなくても大丈夫です。CodeIgniterが自動的に認識してくれます。

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

ビューをもっと便利に使うために、コントローラーからビューにデータを渡す方法を学びましょう。例えば、ユーザーの名前や商品情報などを、コントローラーからビューに送ることができます。

データを渡すには、配列を使います。配列とは、複数のデータをまとめて管理できる入れ物のようなものです。以下のコードを見てください。


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

class Welcome extends CI_Controller {
    
    public function index()
    {
        // ビューに渡すデータを配列で準備
        $data['title'] = 'CodeIgniterの学習';
        $data['message'] = 'ビューの使い方を学んでいます！';
        $data['username'] = '田中太郎';
        
        // データを渡してビューを読み込む
        $this->load->view('welcome_view', $data);
    }
}

ここでは、$dataという配列を作成し、その中にtitle、message、usernameという3つの情報を入れています。そして、$this->load->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 $username; ?></p>
</body>
</html>

このように、と書くことで、コントローラーから渡された値が表示されます。echoは画面に文字を出力する命令です。

5. 複数のビューを組み合わせる

実際のWebサイトでは、ヘッダー、コンテンツ、フッターなど、複数のパーツを組み合わせてページを作ります。CodeIgniterでは、複数のビューファイルを読み込んで、一つのページとして表示することができます。

例えば、header_view.php、content_view.php、footer_view.phpという3つのビューファイルを作り、それらを組み合わせることができます。コントローラーでは次のように書きます。


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

class Page extends CI_Controller {
    
    public function display()
    {
        $data['page_title'] = '私のWebサイト';
        
        // 複数のビューを順番に読み込む
        $this->load->view('header_view', $data);
        $this->load->view('content_view', $data);
        $this->load->view('footer_view', $data);
    }
}

このように、$this->load->view()を複数回呼び出すことで、ヘッダー、コンテンツ、フッターが順番に表示され、一つの完成したページになります。各ビューファイルに同じ$dataを渡すことで、すべてのビューで同じデータを利用できます。

この方法を使えば、共通のヘッダーやフッターを一度作るだけで、複数のページで再利用できるため、とても効率的です。

6. ビューのデータをループで表示する

データベースから取得した複数の商品情報やニュース記事など、たくさんのデータをビューで表示したい場合があります。そんなときは、ループ処理を使います。

ループ処理とは、同じ処理を繰り返し実行することです。PHPではforeachという命令を使って、配列の中身を一つずつ取り出して処理できます。コントローラーで配列データを準備し、ビューで表示してみましょう。

まず、コントローラーで商品リストを作成します。


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

class Product extends CI_Controller {
    
    public function list_products()
    {
        // 商品データの配列を準備
        $data['products'] = array(
            array('name' => 'ノートパソコン', 'price' => 89000),
            array('name' => 'マウス', 'price' => 2500),
            array('name' => 'キーボード', 'price' => 4800),
            array('name' => 'モニター', 'price' => 25000)
        );
        
        $this->load->view('product_list_view', $data);
    }
}

次に、ビューファイルproduct_list_view.phpでループを使って表示します。


<!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>

実行すると、次のような結果が表示されます。


商品一覧
・ノートパソコン - 89,000円
・マウス - 2,500円
・キーボード - 4,800円
・モニター - 25,000円

foreachを使うことで、配列の中のデータを一つずつ取り出し、それぞれをリスト形式で表示できます。number_format()は数字を三桁ごとにカンマで区切る関数で、見やすくするために使っています。

7. ビューでの条件分岐

ビューの中では、条件によって表示内容を変えることもできます。例えば、ユーザーがログインしているかどうかで、表示するメッセージを変えたい場合などに使います。

PHPのif文を使えば、条件分岐が簡単にできます。以下の例では、在庫の有無によって表示を変えています。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品詳細</title>
</head>
<body>
    <h1>商品詳細</h1>
    <p>商品名: <?php echo $product_name; ?></p>
    <p>価格: <?php echo number_format($price); ?>円</p>
    
    <?php if ($stock > 0): ?>
        <p class="text-success">在庫あり（残り<?php echo $stock; ?>個）</p>
        <button class="btn btn-primary">購入する</button>
    <?php else: ?>
        <p class="text-danger">現在、在庫切れです</p>
        <button class="btn btn-secondary" disabled>購入できません</button>
    <?php endif; ?>
</body>
</html>

このコードでは、$stockという変数の値が0より大きい場合は「在庫あり」と表示し、購入ボタンを有効にします。在庫がない場合は「在庫切れです」と表示し、ボタンを無効にします。このように、ビューの中で条件分岐を使うことで、状況に応じた柔軟な表示ができます。

8. ビューファイルの整理とベストプラクティス

Webアプリケーションが大きくなると、ビューファイルもたくさん増えていきます。そのため、ファイルを整理して管理しやすくすることが重要です。

CodeIgniterでは、application/views/フォルダの中にサブフォルダを作って、ビューファイルを分類することができます。例えば、次のような構造にすると管理しやすくなります。

application/views/layouts/ - ヘッダーやフッターなど共通パーツ
application/views/products/ - 商品関連のビュー
application/views/users/ - ユーザー関連のビュー
application/views/pages/ - 通常のページのビュー

サブフォルダを使う場合は、コントローラーでビューを読み込むときにフォルダ名も指定します。例えば、$this->load->view('products/product_list');のように書きます。

また、ビューファイルの中にはできるだけ複雑な処理を書かないことも大切です。データの加工や計算などはコントローラーやモデルで行い、ビューは表示だけに専念させることで、コードが読みやすくなり、メンテナンスも楽になります。

9. ビューのキャッシュ機能

CodeIgniterには、ビューをキャッシュする機能があります。キャッシュとは、一度表示したページの内容を保存しておき、次回からはその保存データを使って表示することで、処理速度を速くする仕組みです。

頻繁に更新されないページ、例えば会社概要や利用規約などのページは、キャッシュを使うことで表示が速くなり、サーバーの負担も減らせます。

キャッシュを有効にするには、コントローラーで$this->output->cache()メソッドを使います。引数には、キャッシュを保持する時間を分単位で指定します。


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

class Info extends CI_Controller {
    
    public function about()
    {
        // 60分間キャッシュを保持
        $this->output->cache(60);
        
        $data['title'] = '会社概要';
        $this->load->view('about_view', $data);
    }
}

この例では、会社概要ページを60分間キャッシュします。最初にアクセスした人の表示は通常の速度ですが、その後60分間は誰がアクセスしても、保存されたページが高速で表示されます。60分経過すると、キャッシュが自動的にクリアされ、新しい内容が生成されます。

ただし、ユーザーごとに内容が変わるページ（マイページなど）では、キャッシュを使わないように注意してください。全員に同じ内容が表示されてしまいます。

10. ビューの戻り値を取得する方法

通常、$this->load->view()を使うと、ビューの内容がそのままブラウザに出力されます。しかし、場合によっては、ビューの内容を変数に格納してから処理したいこともあります。

そんなときは、$this->load->view()の第三引数にTRUEを指定します。すると、ビューの内容が文字列として返されるので、それを変数に保存できます。


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

class Email extends CI_Controller {
    
    public function send_notification()
    {
        $data['username'] = '佐藤花子';
        $data['message'] = 'ご注文ありがとうございます';
        
        // ビューの内容を変数に格納
        $email_body = $this->load->view('email_template', $data, TRUE);
        
        // メール送信処理（例）
        // $this->email->message($email_body);
        // $this->email->send();
        
        echo 'メールを送信しました';
    }
}

この方法は、メールの本文をビューで作成する場合などに便利です。ビューファイルでHTMLメールのテンプレートを作成し、その内容を取得してメール送信処理に渡すことができます。

第三引数をTRUEにすることで、ビューの柔軟な活用が可能になり、より高度な処理ができるようになります。

まとめ

CodeIgniterのビューの役割を振り返る

ここまで、CodeIgniterのビューについて基礎から応用まで詳しく解説してきました。ビューとは、ユーザーがブラウザで実際に目にする画面を作成するためのファイルであり、Webアプリケーション開発において非常に重要な役割を持っています。

CodeIgniterはMVCアーキテクチャを採用しており、Model、View、Controllerという三つの役割に処理を分割することで、見通しの良いプログラム構造を作ることができます。その中でもビューは、HTMLやCSS、JavaScriptを使って画面を作成する部分であり、ユーザーにとって最も目に見える部分になります。

ビューを正しく理解することで、CodeIgniterを使ったWeb開発は格段に効率が上がります。特に初心者の方は、ビューの基本的な書き方やコントローラーとの連携方法をしっかり覚えておくことで、スムーズにWebアプリケーション開発を進めることができるでしょう。

ビューの基本的な使い方

CodeIgniterでビューを使う基本的な流れはとてもシンプルです。まず、application/viewsフォルダの中にビューファイルを作成し、そのファイルにHTMLを記述します。そして、コントローラーからloadメソッドを使ってビューを読み込みます。

この仕組みによって、アプリケーションの処理部分と表示部分を明確に分離することができます。結果として、コードの可読性が高まり、メンテナンスや機能追加が容易になります。


<?php
class Sample extends CI_Controller {

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

}

このようにコントローラーからビューを読み込むだけで、HTML画面を簡単に表示することができます。CodeIgniterのシンプルな設計思想がよく表れている部分でもあります。

コントローラーからビューへデータを渡す方法

Webアプリケーションでは、画面に表示する情報は固定ではなく、ユーザーごとに変化することがほとんどです。そのため、コントローラーからビューへデータを渡す方法を理解することは非常に重要です。

CodeIgniterでは配列を利用してデータをビューに渡します。配列のキー名は、そのままビュー側の変数として利用できるため、非常に分かりやすい仕組みになっています。


<?php
class Welcome extends CI_Controller {

    public function index()
    {
        $data['title'] = 'CodeIgniter学習';
        $data['username'] = '山田太郎';

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

}

ビュー側では、次のようにPHPのecho文を使ってデータを表示できます。


<h1><?php echo $title; ?></h1>
<p>ユーザー名: <?php echo $username; ?></p>

このようにコントローラーとビューを連携させることで、動的なWebページを作成することができます。ブログ記事一覧や商品一覧、ユーザー情報など、様々なデータを画面に表示できるようになります。

複数のビューを組み合わせてページを作る

実際のWebサイトでは、一つのページが複数のパーツで構成されています。例えばヘッダー、ナビゲーション、メインコンテンツ、フッターなどです。

CodeIgniterでは、複数のビューファイルを順番に読み込むことで、これらのパーツを組み合わせて一つのページを作ることができます。この方法を利用すると、共通レイアウトを再利用できるため、開発効率が大きく向上します。


<?php
class Page extends CI_Controller {

    public function home()
    {
        $this->load->view('layout/header');
        $this->load->view('page/home');
        $this->load->view('layout/footer');
    }

}

この構造を採用することで、ヘッダーやフッターを一箇所で管理できるようになります。結果として、サイト全体のデザイン変更や修正がとても簡単になります。

ビューでループ処理を使う

商品一覧や記事一覧など、複数のデータを表示する場合にはループ処理が活躍します。PHPのforeach文を使えば、配列のデータを順番に表示することができます。


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

このようなループ処理は、ECサイトの商品一覧ページやブログの記事一覧ページなど、多くのWebサービスで使われています。CodeIgniterのビューでも同様に簡単に実装できるため、Web開発において非常に重要なテクニックとなります。

ビューを整理するフォルダ構造

Webアプリケーションの規模が大きくなると、ビューファイルの数も増えていきます。そのため、フォルダ構造を整理して管理することが大切です。

例えば、次のようなフォルダ構成にすると管理しやすくなります。


application/views/layouts/
application/views/products/
application/views/users/
application/views/pages/

このように機能ごとにフォルダを分けることで、ファイルを探しやすくなり、チーム開発でもスムーズに作業ができるようになります。

CodeIgniterのビューはシンプルな仕組みですが、Webアプリケーションの画面表示を支える非常に重要な機能です。ビューの役割を正しく理解し、コントローラーやモデルと連携させることで、保守性の高いWebシステムを構築することができます。

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

生徒

CodeIgniterのビューは、ユーザーに表示される画面を作る部分なんですね。HTMLを書いて画面を作る役割だということが分かりました。

先生

その通りです。MVCの考え方では、表示はビュー、処理はコントローラー、データ管理はモデルというように役割を分けて開発します。これによってプログラムが整理され、読みやすい構造になります。

生徒

コントローラーからload viewを使ってビューを表示する仕組みも理解できました。配列を使えばデータも渡せるので、動的なページが作れますね。

先生

そうです。さらにforeachを使えば一覧表示もできますし、if文を使えば条件によって表示を変えることもできます。これらはWebアプリケーション開発ではとてもよく使う技術です。

生徒

ヘッダーやフッターを別のビューに分ける方法も便利ですね。共通部分を使い回せるので効率が良さそうです。

先生

その考え方はとても重要です。ビューをパーツごとに分割して再利用することで、開発効率が上がり、保守もしやすくなります。CodeIgniterでのWeb開発では基本となるテクニックです。

生徒

今日の内容で、CodeIgniterのビューの基本的な仕組みと使い方がしっかり理解できました。これなら実際のWebアプリケーション開発にも活用できそうです。

先生

とても良い理解です。ビューの使い方をしっかり身につければ、CodeIgniterでの画面作成はとてもスムーズになります。今後はモデルやデータベース連携と組み合わせて、さらに実践的なアプリケーションを作っていきましょう。

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

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

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

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

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

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