CodeIgniterとフロントエンド連携（Vue / React）！SPAを構築する基本アーキテクチャを徹底解説

CodeIgniterでSPAを構築する基本アーキテクチャ

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

生徒

「最近よく耳にするエスピーエーという仕組みで、ウェブサイトを作ってみたいです。ＰＨＰのフレームワークであるコードイグナイターを使って、ヴューやリアクトといった画面を作る道具と組み合わせることはできますか？」

先生

「はい、コードイグナイターは軽量で動きが速いので、画面を動かすヴューやリアクトと組み合わせて、快適に動くエスピーエーを構築するのにとても向いていますよ。」

生徒

「パソコンの操作もあまり詳しくないのですが、全体の仕組みやデータのやり取りの基本について教えてほしいです。」

先生

「仕組みの全体像からデータの受け渡しのやり方まで、初心者の方向けに分かりやすく順番に解説していきますね！」

1. そもそもSPAとは何かを理解しよう

エスピーエーとは、シングルページアプリケーションの略称です。直訳するとひとつのページで動くアプリという意味になります。従来の一般的なウェブサイトでは、別のメニューをクリックするたびに画面全体が真っ白になり、ページ全体を新しく読み込み直していました。パソコンに慣れていない方でも、ページが切り替わるときに一瞬待たされる感覚を経験したことがあるのではないでしょうか。エスピーエーでは、最初の１回だけ画面の土台を読み込み、そのあとは変わる部分のデータだけを裏側で受け取って、画面を書き換えます。そのため、スマートフォンのアプリのように、滑らかで高速な表示が可能になります。この画面の土台や動きを作るために使われるのが、ヴューやリアクトというフロントエンドの開発ツールです。フロントエンドとは、利用者が実際に目で見る画面側の仕組みのことを指します。

2. CodeIgniterが果たす役割とAPIの基本

コードイグナイターは、サーバー側で動くＰＨＰという言語のフレームワークです。フレームワークとは、開発を効率よく進めるための骨組みや部品が集まった道具箱のようなものです。エスピーエーの構成において、コードイグナイターは画面を作る役割ではなく、データを提供する役割に専念します。このように、画面からの要求に応じて必要なデータだけを特定の形式で返却する仕組みをエーピーアイと呼びます。今回の構成では、コードイグナイターがデータベースというデータ格納庫から情報を引き出し、それを加工してフロントエンドに渡す窓口になります。これにより、画面の見た目を担当するヴューやリアクトと、データの管理を担当するコードイグナイターの役割が完全に分かれ、すっきりとした構造になります。

3. フロントエンドとバックエンドを繋ぐJSONデータ

画面側のヴューやリアクトと、サーバー側のコードイグナイターが会話をするためには、共通の言葉が必要になります。その共通の言葉として使われるのが、ジェイソンというデータ形式です。ジェイソンは、文字列だけで表現された非常に軽いデータの形式で、人間が見てもコンピュータが見ても分かりやすいという特徴があります。コードイグナイターは、データベースから取得した配列などのデータをジェイソン形式に変換して出荷します。これを受け取ったヴューやリアクトが、文字情報を解析して画面に綺麗に配置していくのです。以下は、コードイグナイター側でコントローラーと呼ばれる案内役のプログラムを作り、もっとも単純なデータを出力する記述例です。


<?php
namespace App\Controllers;
use CodeIgniter\Controller;

class SampleController extends Controller
{
    public function getMessage()
    {
        $data = [
            'status' => 'success',
            'message' => 'こんにちは、世界！'
        ];
        return $this->response->setJSON($data);
    }
}

このプログラムを実行すると、画面には以下のような形式の文字データが返却されます。これがジェイソン形式の基本です。


{"status":"success","message":"\u3053\u3093\u306b\u3061\u306f\u3001\u4e16\u754c\uff01"}

4. SPA構築における基本アーキテクチャの全体像

ここで、全体がどのように連携して動いているのか、仕組みの全体像を整理してみましょう。これを基本アーキテクチャと呼びます。建物でいう設計図のようなものです。登場人物は、利用者が操作するブラウザ、画面の部品であるフロントエンド、そしてデータを処理するバックエンドとしてのコードイグナイターです。まず、利用者がサイトにアクセスすると、ブラウザはヴューやリアクトで作られた画面の骨組みを読み込みます。その後、画面に表示する最新の情報が欲しくなると、フロントエンドが裏側でコードイグナイターに対してデータの発注書を送ります。コードイグナイターはその発注書を読み解き、必要なデータをジェイソン形式の荷物として送り返します。ブラウザはページ全体を更新することなく、届いた荷物の中身を使って画面の一部だけを書き換えます。この一連の流れが、高速な操作感を生み出す秘密です。

5. ルーティングの割り振りとコントローラーの書き方

コードイグナイターでデータを返す窓口を作るには、まず特定の設計図に従って通信の行き先を決定する必要があります。これをルーティングと呼びます。特定の配送先に、どのコントローラーが対応するかを決める設定です。例えば、商品のリストが欲しいという要求が来たら、商品管理の担当者を呼び出すように指定します。次に、呼び出されたコントローラーが、複数の情報が入った一覧データを準備して返却するプログラムの書き方を見てみましょう。ここでは、複数のユーザー情報が入った名簿のデータを想定してみます。


<?php
namespace App\Controllers;
use CodeIgniter\Controller;

class UserController extends Controller
{
    public function index()
    {
        $users = [
            ['id' => 1, 'name' => '鈴木さん', 'role' => '管理者'],
            ['id' => 2, 'name' => '佐藤さん', 'role' => '一般一般']
        ];
        return $this->response->setJSON($users);
    }
}

上記のプログラムにアクセスがあると、複数のデータが並んだ状態で出力されます。実行結果は以下のようになります。


[{"id":1,"name":"\u9234\u6728\u3055\u3093","role":"\u7ba1\u7406\u8005"},{"id":2,"name":"\u4f50\u85e4\u3055\u3093","role":"\u4e00\u822c\u4e00\u822c"}]

6. フロントエンドからのデータを受け取る仕組み

これまではデータを送り返す処理を見てきましたが、今度は逆にフロントエンド側から送られてきたデータを受け取る方法について解説します。例えば、利用者が画面の入力欄に文字を入力して保存ボタンを押したとき、その文字データはコードイグナイターへと送られてきます。コードイグナイター側では、送られてきたデータがどのような形をしているかを解析し、中身を取り出す処理を行います。パソコンの操作をしたことがない方でも、お問い合わせフォームに名前を入力して送信する場面を想像すると分かりやすいでしょう。以下は、送られてきた新規登録のデータを受け取って、正しく受け取れたかどうかの結果を返すためのプログラムです。


<?php
namespace App\Controllers;
use CodeIgniter\Controller;

class RegistrationController extends Controller
{
    public function create()
    {
        $requestData = $this->request->getJSON();
        if (isset($requestData->itemName)) {
            $reply = [
                'result' => 'ok',
                'received' => $requestData->itemName
            ];
        } else {
            $reply = [
                'result' => 'error',
                'message' => 'データがありません'
            ];
        }
        return $this->response->setJSON($reply);
    }
}

データが空っぽの場合や、意図しない通信が来た場合には、条件によってエラーの文字データを返すように工夫されています。

7. CORSという通信の壁と解決策

異なる道具同士を連携させてシステムを動かそうとするとき、初心者が必ずと言っていいほど遭遇するセキュリティの壁があります。それが、シーオーアールエスと呼ばれる仕組みです。これは、安全のためにブラウザが備えている防衛機能の一つです。基本アーキテクチャにおいて、画面を動かす仕組みのサーバーと、データを処理するコードイグナイターのサーバーの場所が異なっている場合、ブラウザは「怪しい通信が行われているかもしれない」と判断して、データの受け取りをブロックしてしまいます。これを許可するためには、コードイグナイター側で「この画面からのアクセスであれば、安全なのでデータを提供しても大丈夫です」という許可証をあらかじめ発行しておく必要があります。具体的には、応答を返す際のヘッダーという見えない情報の中に、許可を意味する設定文を追加することで解決できます。

8. VueやReactの画面にデータを埋め込むHTMLの基礎

最後に、コードイグナイターから届いたデータを、ヴューやリアクトがどのように受け取って画面に表示しているのか、最も外側にある土台の構造をHTMLの視点から見てみましょう。フロントエンドの開発ツールを使う場合でも、最終的にブラウザが表示するのは通常のHTMLの形になります。エスピーエーでは、中身がほとんど空っぽの要素を一つだけ用意しておき、その中身をプログラムの力でダイナミックに書き換えていきます。以下は、フロントエンドが読み込まれる起点となる、もっともシンプルな土台の記述例です。この構造の中に、コードイグナイターから取得した文字情報が自動的に埋め込まれていきます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>連携アプリケーションの土台</title>
</head>
<body>
    <div id="app">
        </div>
</body>
</html>

このように、コードイグナイターでデータを用意する仕組みと、それを読み込んで組み立てる画面側の仕組みが綺麗に噛み合うことで、快適に動く最新のウェブアプリケーションが完成します。一歩ずつ設定を紐解いていくことで、初心者の方でも全体のつながりがしっかりと見えてくるようになります。

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

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

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

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

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

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