CodeIgniterでフォーム作成！ビューとテンプレートの基本を初心者向けに徹底解説

CodeIgniterでフォーム用ビューを作成する方法

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

生徒

「ホームページでお問い合わせフォームを作りたいのですが、CodeIgniterではどうやって画面を作るんですか？」

先生

「CodeIgniterでは『ビュー（View）』という仕組みを使って、見た目の画面を作ります。特にフォームは基本となる大切な部分ですね。」

生徒

「プログラム初心者でも、綺麗な入力画面を自作できるようになりますか？」

先生

「もちろんです！まずは、ブラウザに文字や入力欄を表示する準備から一緒に始めていきましょう！」

1. ビュー（View）とテンプレートの役割を知ろう

プログラミングの世界、特にCodeIgniter（コードイグナイター）のようなフレームワークでは、役割分担がとても重要です。ビュー（View）とは、銀行の窓口のようなものです。利用者が目にするカウンター、書類、ペンなどが置いてある「場所」そのものがビューにあたります。

PHPで直接HTMLを書くこともできますが、CodeIgniterを使うと「データの計算をする場所」と「画面に表示する場所」をきれいに分けることができます。これを専門用語でMVCモデルと呼びますが、今は「画面担当がビューなんだな」と覚えておけば大丈夫です。パソコンに詳しくない方でも、料理の「お皿（ビュー）」と「レシピ（プログラム）」を分けて考えるイメージを持つと分かりやすいでしょう。

テンプレートとは、共通の看板やメニュー表のようなものです。どのページでも同じ「ヘッダー（上の部分）」や「フッター（下の部分）」を使い回すことで、効率よくWebサイトを作ることができます。お問い合わせフォームを作成する際も、このビューの仕組みを使いこなすことが第一歩となります。

2. フォームを表示するためのコントローラー準備

ビューを表示するためには、指示を出す「司令塔」が必要です。これがコントローラーです。司令塔が「このビューを表示して！」と命令を出すことで、初めて私たちのブラウザに画面が映し出されます。

まずは、FormController.phpというファイルを作って、ビューを呼び出す命令を書いてみましょう。プログラム未経験の方は、まず「決まった呪文」を書くことから慣れていけば問題ありません。


namespace App\Controllers;

use CodeIgniter\Controller;

class FormController extends Controller
{
    public function index()
    {
        // 'contact_form' という名前のビューファイルを読み込む指示
        return view('contact_form');
    }
}

上記のコードにある view('contact_form') という部分が重要です。これは「contact_formという名前のHTMLファイルを画面に出してね」というお願いをしています。これだけで、プログラムが画面を表示する準備を整えてくれます。最初は難しいかもしれませんが、一行ずつ「何をお願いしているか」を読み解いていくのが上達のコツです。

3. 基本的なHTMLフォームビューの作成

次に、実際にユーザーが文字を入力する「見た目」の部分、つまりビューファイルを作成します。CodeIgniterでは、app/Views というフォルダの中にファイルを作ります。ファイル名は contact_form.php とします。

ここでは、お名前を入力するためのテキストボックスと、送信するためのボタンを用意します。HTMLを知らなくても、以下のコードを貼り付けるだけで基本的な形が完成します。入力欄を作るには input タグという部品を使います。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム</title>
</head>
<body>
    <h1>お問い合わせ</h1>
    <form action="/form/submit" method="post">
        <p>
            お名前：<br>
            <input type="text" name="username">
        </p>
        <p>
            ご用件：<br>
            <textarea name="message"></textarea>
        </p>
        <button type="submit">送信する</button>
    </form>
</body>
</html>

プログラムの中で method="post" と書かれているのは、「荷物を段ボールに入れて、中身が見えないように安全に送る」という配送方法の指定のようなものです。これによって、入力された個人情報を安全にサーバーへ届けることができます。パソコンを触り始めたばかりの方でも、この「お作法」を覚えるだけでプロのようなフォームの基礎が作れます。

4. CodeIgniterの便利なフォームヘルパーを使ってみよう

CodeIgniterには、HTMLをより簡単に、そして安全に書くための「ヘルパー」という便利な道具箱が用意されています。これを使うと、複雑なHTMLコードを覚えなくても、PHPの短い命令で入力欄を作ることができます。

ヘルパーを使う最大のメリットは、セキュリティ対策が自動で行われる点です。悪意のある人がフォームから変なプログラムを送り込んでくる「攻撃」を防ぐ仕組み（CSRF対策など）が簡単に導入できます。初心者こそ、このヘルパー機能を活用して安全なサイト作りを目指しましょう。


// ヘルパーを読み込む魔法の言葉
helper('form');

// フォームの開始タグを生成（自動的にセキュリティ対策が含まれる）
echo form_open('form/confirm');

echo form_label('メールアドレス', 'email');
echo form_input('email', '', ['id' => 'email', 'placeholder' => 'example@mail.com']);

echo form_submit('submit', '確認画面へ');

// フォームの閉じタグ
echo form_close();

実行結果は以下のようになります。複雑なHTMLが一行のPHPコードで生成されるのは魔法のようですね。プログラミングの面白さは、このように「面倒なことを楽にする道具」がたくさんあるところです。


<form action="http://localhost/form/confirm" method="post" accept-charset="utf-8">
    <label for="email">メールアドレス</label>
    <input type="text" name="email" value="" id="email" placeholder="example@mail.com">
    <input type="submit" name="submit" value="確認画面へ">
</form>

5. テンプレートを使ってデザインを共通化する

複数のページがあるWebサイトを作るとき、すべてのページに同じメニューバーや著作権表示（コピーライト）を書くのは大変です。そこで登場するのがテンプレート（レイアウト）という考え方です。これは、写真の「フォトフレーム」のようなものです。中身の写真（各ページのコンテンツ）だけを入れ替えて、外側の枠（デザイン）は使い回します。

CodeIgniterでは $this->extend() という命令を使って、あらかじめ作っておいた共通のデザイン枠を呼び出すことができます。これにより、一部を修正するだけでサイト全体の見た目を一気に変えることができるようになります。修正漏れがなくなるので、プロの現場でも必ず使われる手法です。


<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
    <h2>フォームの入力ページ</h2>
    <p>以下の項目を正しく入力してください。</p>
    <form>
        </form>
<?= $this->endSection() ?>

この仕組みを使うことで、ヘッダーのロゴを変えたいときに、100枚あるページを一枚ずつ直す必要がなくなります。たった一枚のテンプレートファイルを直すだけで、すべてのページが同時に更新されます。パソコン操作に慣れていない方でも、この「一括で変わる便利さ」を体験すると、プログラミングの凄さが実感できるはずです。

6. フォームから送られたデータを受け取る方法

ビューで作ったフォームに利用者が入力し、ボタンを押した後の動きも見てみましょう。データを受け取るのは、再び司令塔であるコントローラーの仕事です。受け取ったデータが空っぽではないか、文字数が多すぎないかなどをチェック（バリデーション）します。

例えば、お名前が入力されていない場合に「名前を入力してください！」と赤い文字で警告を出すのも、ビューとコントローラーの連携プレーです。初心者のうちは、まず「送られたデータがちゃんと届いているか」を確認するプログラムを書いてみましょう。


public function submit()
{
    // 入力された名前を受け取って変数に入れる
    $name = $this->request->getPost('username');

    // 画面に「こんにちは、〇〇さん！」と表示するデータを準備
    $data = [
        'user_name' => $name
    ];

    // 結果を表示するビューにデータを渡す
    return view('form_result', $data);
}

このように、ビューで作った入力欄の name="username" という名前を鍵にして、コントローラーでデータを取り出します。これは、郵便受けに名前を書いておき、その名前に届いた手紙を取り出す作業によく似ています。情報の受け渡しがスムーズにできるようになると、Webアプリケーション開発がぐっと楽しくなります。

7. 入力エラーを表示する親切なビューの作り方

ユーザーが入力ミスをしたときに、何が間違っているのかを教えてあげるのは、とても親切な設計です。CodeIgniterには、エラーメッセージを自動でまとめて表示する機能があります。これをビューの中に一行書き足すだけで、使いやすいフォームに進化します。

「エラーが出る」というのは、プログラムが正常に動いている証拠でもあります。最初から完璧に入力してもらうことを期待するのではなく、間違えたときにどう助けるかを考えるのが、良いプログラマーへの近道です。パソコン操作が苦手なユーザーの気持ちに寄り添った画面作りを心がけましょう。


<?= validation_list_errors() ?>

<form action="/submit" method="post">
    </form>

例えば、「メールアドレスの形式が違います」や「パスワードが短すぎます」といったメッセージがこの場所に表示されます。ビューは単に見た目を作るだけでなく、ユーザーとの「対話」を支える重要な役割を担っているのです。これらを組み合わせることで、初心者でも立派なお問い合わせシステムや会員登録画面を構築することができるようになります。

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

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

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

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

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

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