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>© 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_で始めるなど、プロジェクト全体で統一されたルールを決めておくと、ファイルが増えても管理しやすくなります。