CodeIgniterとフロントエンド連携の基本！Vue・Reactとつなぐ仕組みを未経験者向けに徹底解説

CodeIgniterとフロントエンド連携とは？基本構成を解説

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

生徒

「CodeIgniterとVueやReactというフロントエンドを連携させると聞いたのですが、具体的にどういう意味ですか？」

先生

「CodeIgniterが裏方のデータ処理を担当して、フロントエンドのVueやReactが画面の表示を担当するという、役割分担の仕組みのことですよ。」

生徒

「画面と裏方が別々に動くということですね。なんだか難しそうですが、パソコンをあまり触ったことがなくても理解できますか？」

先生

「大丈夫です。基本的な仕組みや仕組みが必要な理由、データのやり取り方法まで、初心者の方にも分かりやすく簡単な例えを使って進めていきましょう！」

1. CodeIgniterとフロントエンド連携とは何か

CodeIgniterとフロントエンド連携について解説します。ホームページやウェブの仕組みを作るとき、画面に見える部分と、見えない裏側の部分を分けて制作する手法が主流になっています。CodeIgniter（コードイグナイター）とは、世界中で広く使われているプログラミング言語のPHPで書かれた、ウェブサイトの裏側の仕組みを効率よく作るための道具箱のようなものです。このような道具箱を専門用語でフレームワークと呼びます。

一方で、フロントエンドとは、私たちがスマートフォンやパソコンのブラウザで実際に目にするウェブサイトの画面や、ボタンを押したときの動きそのものを指します。現在、この画面側をとても魅力的に、そして素早く動かすために、Vue.js（ビュー・ジェーエス）やReact（リアクト）という特別なプログラムの部品集が世界中で大人気となっています。これらも画面構築に特化したフレームワークやライブラリと呼ばれる道具箱です。

つまり、CodeIgniterとフロントエンド連携とは、データの管理や保存といった裏方の重たい仕事をPHPのCodeIgniterに任せ、綺麗で滑らかに動く最先端の画面表示をVueやReactに任せるという、最強のタッグチームを組ませる開発手法のことなのです。

2. パソコン未経験でもわかる役割分担の例え話

この連携の仕組みを、私たちが日常でよく利用する人気のあるレストランに例えて考えてみましょう。ウェブサイトを一つの大きなお店として見立てると、役割分担の重要性がとてもよく分かります。

まず、画面を担当するフロントエンドのVueやReactは、お店の接客を担当するホールの店員さんです。お客さんから注文を聞いたり、出来上がった料理を綺麗にテーブルに並べたり、お店の雰囲気を良くして居心地を最高にする役割を持っています。店員さんの対応が素早いと、お客さんはとても快適で嬉しい気持ちになります。

次に、裏方を担当するCodeIgniterは、厨房にいる料理長です。表からは姿が見えませんが、冷蔵庫から食材を探したり、お肉を焼いたり、秘伝のレシピに沿って美味しい料理を間違いなく作る役割を持っています。どれだけ注文が多くても、順番通りに素早く安全に調理をこなします。

もし、料理長が接客まで一人でやろうとすると、お店は大混乱してしまいます。料理を作る人と、接客をする人を完全に分けるからこそ、レストランは円滑に営業できます。システム開発も全く同じで、CodeIgniterという料理長と、VueやReactという店員さんがしっかりと手を組んで、それぞれの得意分野に集中することで、最高に使いやすいウェブサイトが完成するのです。

3. 従来のウェブサイトと連携システムの違い

これまでの昔ながらのウェブサイトと、現代的なフロントエンド連携システムでは、画面が切り替わるときの動きに大きな違いがあります。従来の一般的なPHPの仕組みでは、ユーザーが別のページへのリンクをクリックするたびに、画面全体が真っ白になり、一からすべての情報を読み込み直していました。これを専門用語で画面の再読み込み（リロード）と言います。これだと、毎回ページが切り替わるのを待つ必要があり、少しストレスを感じることがありました。

しかし、CodeIgniterとVueやReactを連携させた現代的なシステムでは、最初の1回だけ画面の土台を読み込めば、あとは変わった部分のデータだけを裏側でこっそり書き換えることができます。これをシングルページアプリケーション（SPA）と呼びます。ボタンを押しても画面が真っ白にならず、スマートフォンアプリのように一瞬で内容が切り替わるため、非常に快適にウェブサイトを操作できるようになります。

4. 連携を支えるデータの橋渡しAPIとは何か

料理長であるCodeIgniterと、店員さんであるフロントエンドが会話をするためには、共通の連絡方法が必要です。この、異なるプログラム同士がデータをやり取りするための専用の窓口のことをAPI（エーピーアイ）と呼びます。特に、ウェブの仕組みを使ったものをウェブAPIと言います。

APIという窓口を通じてやり取りされるデータの形式には、世界共通の決まりがあります。それがJSON（ジェイソン）という形式です。JSONは、とてもシンプルな文字の集まりで、人間が見てもプログラムが見ても意味が分かりやすいように工夫された書き方です。CodeIgniterは、データベースという情報の倉庫から引っ張り出してきたデータを、このJSONという文字の形に変換して、VueやReactに送ります。画面側はその文字を受け取って、綺麗に装飾して画面に表示します。

5. CodeIgniter側のプログラムを作ってみよう

それでは、実際にCodeIgniterを使って、フロントエンドにJSONデータを送るための最も簡単な裏側のプログラムを書いてみましょう。CodeIgniterでは、コントローラーというファイルに処理を書いていきます。ここでは、果物の名前と価格のリストを準備して、それを画面側に届けるための窓口を作ります。


namespace App\Controllers;

class FruitController extends BaseController
{
    public function getFruits()
    {
        $fruitsList = [
            ['id' => 1, 'name' => 'りんご', 'price' => 150],
            ['id' => 2, 'name' => 'みかん', 'price' => 100],
            ['id' => 3, 'name' => 'ぶどう', 'price' => 300]
        ];
        
        return $this->response->setJSON($fruitsList);
    }
}

上記のプログラムを実行すると、CodeIgniterは指定された果物のデータを整理して、フロントエンドが解釈しやすい形へと自動的に変換します。実際の出力結果は、以下のようになります。


[{"id":1,"name":"\u308a\u3093\u3054","price":150},{"id":2,"name":"\u307f\u304b\u3093","price":100},{"id":3,"name":"\u3076\u3069\u3046","price":300}]

このように、文字が並んだデータが作成されます。日本語の部分はプログラムが処理しやすいように特殊な記号に変換されていますが、フロントエンドに届くときには自動的に元の「りんご」や「みかん」に戻るので安心してください。

6. データを画面に表示するフロントエンド側の仕組み

今度は、CodeIgniterが作った果物のデータを受け取って、ブラウザの画面に組み立てるためのフロントエンド側のHTMLとプログラムのイメージを見てみましょう。画面側では、送られてきた文字データを分解して、箇条書きのリストとして画面に出力していきます。


<div id="app" class="container mt-4">
    <h3 class="text-primary"><i class="bi bi-shop"></i> 本日の果物一覧</h3>
    <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            りんご
            <span class="badge bg-success rounded-pill">150円</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            みかん
            <span class="badge bg-success rounded-pill">100円</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            ぶどう
            <span class="badge bg-success rounded-pill">300円</span>
        </li>
    </ul>
</div>

フロントエンドのVueやReactは、裏側からデータが届いた瞬間に、上記のようなHTMLという画面の骨組みを自動的に作り出し、ブラウザに見栄えの良い一覧表を映し出します。手作業で書き換える必要はなく、すべて自動で行われます。

7. 画面側からデータを送信して裏側で受け取る処理

今度は逆のパターンを考えてみましょう。画面側でユーザーが文字を入力して、それをCodeIgniterに送信して保存してもらう仕組みです。例えば、新しい果物の名前を登録する場面を想定します。まずは、CodeIgniter側で画面から送られてきたデータを受け取るプログラムを準備します。


namespace App\Controllers;

class FruitController extends BaseController
{
    public function registerFruit()
    {
        $receivedData = $this->request->getJSON(true);
        $newName = $receivedData['name'];
        $newPrice = $receivedData['price'];
        
        $message = $newName . 'を価格' . $newPrice . '円で登録しました。';
        
        return $this->response->setJSON(['status' => 'success', 'message' => $message]);
    }
}

このプログラムは、画面から送られてきた果物の名前と価格をしっかりとキャッチして、登録が完了したというメッセージ入りのデータを再び画面に送り返します。実行した結果、画面側に返されるデータは以下のようになります。


{"status":"success","message":"\u30e1\u30ed\u30f3\u3092\u4fa1\u683c500\u5186\u3067\u767b\u9332\u3057\u307e\u3057\u305f\u3002"}

このメッセージを受け取ったVueやReactは、「登録が成功しました」という綺麗な案内ポップアップ画面をユーザーに表示させることができます。これにより、お互いが完全に独立しながらも、最高のコンビネーションで動くようになります。

8. 開発環境の構築と今後の学習のヒント

これらの一連の仕組みを自分のパソコンで実際に動かして実験するためには、いくつかの準備が必要です。CodeIgniterを動かすためには、PHPの環境が必要になり、これには「XAMPP（ザンプ）」という初心者向けの無料の詰め合わせソフトウェアをパソコンに入れるのが一般的です。これ一つで、プログラムを実行する環境と、データを保存する倉庫であるデータベースが手に入ります。

また、画面側のVueやReactを本格的に動かすためには、「Node.js（ノード・ジェーエス）」という仕組みをパソコンに導入します。少し難しそうに聞こえるかもしれませんが、どれも公式のウェブサイトからボタンを押してダウンロードし、案内通りに進めるだけで簡単に準備が整います。まずは焦らず、CodeIgniterがデータを文字として出力し、それをブラウザで確認するところから一歩ずつ始めてみてください。裏方と画面が繋がる楽しさが実感できれば、プログラミングへの理解がさらに深まります。

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

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

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

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

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

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