CodeIgniterでセレクトボックスを動的に生成する方法を完全解説!初心者向けフォーム処理ガイド
生徒
「CodeIgniterを使って、お問い合わせフォームにある『都道府県を選んでください』みたいな選択肢を自動で作ることはできますか?」
先生
「もちろんです。データベースから取得した情報をセレクトボックスにする『動的な生成』は、CodeIgniterが得意とする処理の一つですよ。」
生徒
「手書きで一個ずつ選択肢を書かなくていいんですね!でも、難しそうです……。」
先生
「大丈夫です。仕組みを理解すれば、驚くほど簡単に作れるようになります。基礎から一緒に学んでいきましょう!」
1. セレクトボックスの「動的生成」とは何のこと?
Webサイトでよく見かける、クリックすると項目がずらっと出てくるメニューをセレクトボックス(またはプルダウンメニュー)と呼びます。通常、HTMLだけで書く場合は、一つひとつの項目を自分で入力しなければなりません。しかし、お店のメニューやユーザーの一覧など、内容が頻繁に変わるものを手作業で書き換えるのはとても大変です。
そこで登場するのが動的生成という仕組みです。これは、プログラムがその時々の状況に合わせて、自動的に選択肢を作り出す魔法のような技術です。PHPフレームワークのCodeIgniter(コードイグナイター)を使えば、データベースの中身をそのまま選択肢として表示させることが可能です。これにより、管理画面から商品を追加するだけで、お問い合わせフォームの選択肢も自動で増えるといった便利な仕組みが作れます。
2. CodeIgniterでフォームを扱うための準備
CodeIgniterでフォームに関連する便利な機能を使うためには、まず「フォームヘルパー」という道具箱を読み込む必要があります。ヘルパーとは、複雑なHTMLコードを短い命令で書けるように助けてくれるプログラムのことです。パソコンの操作に例えると、長い文章を毎回打つ代わりに、ショートカットキーを使って一瞬で入力を済ませるような感覚に似ています。
コントローラーと呼ばれる「司令塔」の役割を持つ場所で、$this->load->helper('form');という一言を書き込むだけで、セレクトボックスを簡単に作るための専用命令が使えるようになります。初心者の方は、まずこの「道具箱を開ける作業」が必要であることを覚えておきましょう。
3. form_dropdown()関数を使ってみよう
CodeIgniterには、セレクトボックスを生成するためのform_dropdown()という専用の関数が用意されています。これを使うと、配列(データのまとまり)を渡すだけで、自動的にHTMLの<select>タグと<option>タグを組み立ててくれます。
配列とは、複数のデータに番号をつけて一つの箱にまとめたものです。例えば、果物のリストを一つの箱に入れておけば、プログラムがその箱の中身を一つずつ取り出して、選択肢として並べてくれるイメージです。以下のコードは、最もシンプルなセレクトボックスの作り方です。
$this->load->helper('form');
// 選択肢のデータを「配列」で作ります
$options = [
'apple' => 'りんご',
'banana' => 'バナナ',
'cherry' => 'さくらんぼ'
];
// form_dropdown(名前, 選択肢の配列, 初期選択値)
echo form_dropdown('fruit_selection', $options, 'banana');
このコードを実行すると、ブラウザ上には次のようなHTMLが出力されます。バナナが最初から選ばれた状態になります。
<select name="fruit_selection">
<option value="apple">りんご</option>
<option value="banana" selected="selected">バナナ</option>
<option value="cherry">さくらんぼ</option>
</select>
4. データベースの情報を選択肢に変える流れ
実際のWeb制作では、プログラムの中に直接メニューを書くことは少なく、データベース(情報を貯めておく倉庫)からデータを取り出して表示させます。例えば、会員登録フォームで「担当スタッフ」を選ばせる場合、スタッフが辞めたり新しく入ったりするたびにプログラムを書き換えるのは現実的ではありません。
データベースからデータを取り出すには「モデル」という部品を使います。モデルは倉庫番のような存在で、「スタッフの名前を全員分持ってきて!」と頼むと、リストにして返してくれます。そのリストをコントローラーで受け取り、セレクトボックス用の形に整えてから、画面(ビュー)に渡すという流れが一般的です。この一連の流れをマスターすれば、どんなデータでも自由自在にフォームへ表示できるようになります。
5. 複数のデータをループ処理で組み立てる
データベースから取得したデータは、そのままではセレクトボックスの形に適していないことが多いです。そこで、foreach(フォーイーチ)という命令を使って、データを一つずつ取り出し、セレクトボックス用の配列に詰め替える作業を行います。これは、大きな段ボール箱に入った商品を、陳列棚に並べ直す作業によく似ています。
以下の例では、データベースから取得した「ユーザーID」と「名前」をセットにして、選択肢を組み立てる方法を紹介します。プログラミング未経験の方でも、この「詰め替え作業」のパターンを覚えれば、動的なフォーム作成の半分は理解したと言っても過言ではありません。
// データベースから取得したデータ(例:スタッフ一覧)
$db_results = [
['id' => 1, 'name' => '田中さん'],
['id' => 2, 'name' => '佐藤さん'],
['id' => 3, 'name' => '鈴木さん']
];
// セレクトボックス用に空の配列を用意します
$user_list = [];
// データを一つずつ取り出して詰め替えます
foreach ($db_results as $row) {
// [ID番号] => [表示する名前] という形式にします
$user_list[$row['id']] = $row['name'];
}
// 画面に表示する
echo form_dropdown('staff_id', $user_list);
6. フォームバリデーションとの連携
動的に作ったセレクトボックスでも、ユーザーが正しく項目を選んだかチェックする必要があります。これをバリデーション(入力検証)と言います。CodeIgniterには、送信されたデータが正しいかどうかを自動で判定する機能が備わっています。例えば「何も選ばずに送信ボタンを押したらエラーを出す」といった処理です。
バリデーションを行う際、セレクトボックスで選ばれた値がプログラムに正しく伝わっているかを確認することが重要です。もし入力ミスがあった場合でも、ユーザーがせっかく選んだ項目が消えてしまわないように、選択状態を保持する工夫も必要です。これにはset_select()という関数を使います。これを使うことで、入力エラーで画面が戻っても、選んだ項目がリセットされない親切なフォームを作ることができます。
7. 応用編:階層構造のセレクトボックス
時には、選択肢をグループ分けして見やすくしたい場合があります。例えば、飲食店であれば「飲み物」「食べ物」という大きなカテゴリーの中に、それぞれのメニューを入れる形式です。HTMLではこれを<optgroup>タグで表現しますが、CodeIgniterのform_dropdown()関数なら、多次元配列(配列の中に配列が入っている構造)を渡すだけで簡単に実現できます。
多次元配列とは、タンスの引き出しのようなものです。「飲み物」という引き出しを開けると、「コーヒー」「紅茶」が入っているイメージです。このようにデータを整理して渡すと、プログラムが自動で見栄えの良いグループ分けされたセレクトボックスを作成してくれます。
// カテゴリ分けされたデータ構造
$menu_list = [
'飲み物' => [
'tea' => '紅茶',
'coffee' => 'コーヒー'
],
'食べ物' => [
'cake' => 'ケーキ',
'cookie' => 'クッキー'
]
];
// グループ化されたセレクトボックスを表示
echo form_dropdown('menu_choice', $menu_list);
8. 最後に意識すべきセキュリティと使い勝手
プログラムでフォームを作る際に忘れてはならないのが、セキュリティです。特にCSRF対策(シーエスアールエフ対策)と呼ばれる、なりすまし送信を防ぐ仕組みは必須です。CodeIgniterではフォームを開くときにform_open()関数を使うことで、この対策に必要な秘密のコードを自動で埋め込んでくれます。
また、セレクトボックスの最初の項目に「選択してください」という案内を入れるのも、ユーザーの使い勝手(UI/UX)を高めるための大切なポイントです。プログラムで配列を作る際に、一番最初にこの案内用の一行を追加するだけで、親切な設計になります。こうした小さな気配りの積み重ねが、使いやすいWebアプリケーションを作る鍵となります。
$this->load->helper('form');
// 最初に案内用の項目を追加
$final_options = ['' => '--- 選択してください ---'];
$data_from_db = [
'101' => '東京本店',
'202' => '大阪支店',
'303' => '福岡営業所'
];
// 配列を合体させます
$final_options = $final_options + $data_from_db;
// フォームの開始タグ(セキュリティ対策込み)
echo form_open('contact/submit');
// セレクトボックスの表示
echo form_dropdown('shop_id', $final_options);
// フォームの終了タグ
echo form_close();