CodeIgniterとReactの連携方法完全ガイド！初心者向けのAPI開発入門

CodeIgniterでAPIを使ってReactと連携する方法

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

生徒

「CodeIgniterとReactを連携させて、最新のWebアプリを作りたいのですが、パソコン初心者でもできますか？」

先生

「大丈夫ですよ。CodeIgniter側でデータを提供する仕組みを作り、それをReact側で受け取る方法を学びましょう。」

生徒

「難しそうに見えますが、具体的な手順が知りたいです。」

先生

「それでは、初心者の方にも分かりやすく、順番に基礎から解説をしていきますね！」

1. CodeIgniterとReactの連携とは？

Webアプリ開発の世界では、画面を表示する担当と、データを管理する担当を別々に作ることが主流になっています。今回は、サーバー側でデータを処理する仕組みとして人気の高いPHPフレームワークであるCodeIgniter（コードイグナイター）と、画面を素早く動かすためのJavaScriptライブラリであるReact（リアクト）を組み合わせる方法を解説します。

この二つを繋ぐ役割を果たすのがAPI（エーピーアイ）という仕組みです。APIは、異なるシステム同士が情報をやり取りするための専用の窓口のようなものです。CodeIgniterがデータベースから情報を取ってきて、それをReactが読み取れる形にして窓口に置いておきます。Reactはその窓口にアクセスして、受け取ったデータをパソコンの画面に綺麗に表示します。この連携ができるようになると、スマートフォンのアプリのように画面が滑らかに動く、本格的なWebシステムを作ることができるようになります。

2. APIとJSONの基本知識

プログラミングを始めたばかりの方にとって、専門用語は難しく感じられます。まずは、今回のシステム構築で最も重要となる二つの言葉を、身近な例えを使って分かりやすく説明します。

一つ目はAPI（Application Programming Interface）です。これは、レストランの注文を取り次ぐ店員さんのような存在です。あなたが席から料理を注文すると、店員さんが厨房に伝え、出来上がった料理を席まで運んできてくれます。この店員さんの役割がAPIです。Reactというお客さんが注文を出すと、CodeIgniterという厨房が料理を作り、APIがそれを届けます。

二つ目はJSON（ジェイソン）です。JSONは、店員さんが料理を運ぶときに使う、世界共通の決まった形式のトレイのようなものです。日本語でも英語でも、どんなプログラム言語でも中身がひと目で理解できるように工夫された、とてもシンプルな文字の並び方のルールのことです。データを受け渡すときは、必ずこのJSONという形式に変形させてから送信します。

3. CodeIgniterでAPIの基本を作る

それでは、実際にCodeIgniterを使って、Reactにデータを引き渡すための最初の窓口を作成してみましょう。CodeIgniterでは、コントローラーというファイルに命令を書き込んでいくことで、簡単に窓口を作ることができます。

まずは、一番単純な文字データをJSONの形式に変換して、画面に出力するプログラムを書いてみます。以下のコードは、アクセスがあったときに自動的にデータを返す仕組みを表しています。初心者の方向けに、最も分かりやすい記述方法を採用しています。


namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;

class ApiController extends ResourceController
{
    public function getMessage()
    {
        $data = [
            'status' => 'success',
            'message' => 'こんにちは！CodeIgniterからのメッセージです。'
        ];
        return $this->respond($data);
    }
}

このプログラムを実行すると、画面には以下のような形式のデータが出力されます。これが、先ほど説明したJSONというデータ形式の実物です。


{"status":"success","message":"\u3053\u3093\u306b\u3061\u306f\uff01CodeIgniter\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3067\u3059\u3002"}

4. データベースの情報をJSONで出力する

基礎が理解できたら、次はステップアップして、本物のシステムのようにデータベースに保存されている複数の情報をまとめて出力する仕組みを作ってみましょう。例えば、お店の商品一覧をReactに送る場面を想定します。

CodeIgniterでは、配列と呼ばれる箱の中に複数のデータを詰め込んで、それを一瞬でJSON形式に変形させることができます。以下のプログラムは、複数の商品名と価格のデータを管理し、それを綺麗に並べて提供する処理を行っています。


namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;

class ProductController extends ResourceController
{
    public function listProducts()
    {
        $products = [
            ['id' => 1, 'name' => 'ノートパソコン', 'price' => 85000],
            ['id' => 2, 'name' => 'スマートフォン', 'price' => 62000],
            ['id' => 3, 'name' => 'ワイヤレスイヤホン', 'price' => 12000]
        ];
        return $this->respond($products);
    }
}

このように記述することで、複数のデータが整理整頓された状態で保持されます。実行結果を確認すると、複数のデータが四角括弧と波括弧で囲まれた、見慣れたJSON形式で出力されていることが確認できます。


[{"id":1,"name":"\u30ce\u30fc\u30c8\u30d1\u30bd\u30b3\u30f3","price":85000},{"id":2,"name":"\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3","price":62000},{"id":3,"name":"\u30ef\u30a4\u30e4\u30ec\u30b9\u30a4\u30e4\u30db\u30f3","price":12000}]

5. CORSというエラーの壁を乗り越える

CodeIgniterとReactを別々の場所で起動して連携させようとすると、必ずと言っていいほど大きな壁にぶつかります。それがCORS（コルス）というセキュリティのエラーです。パソコン初心者の方が最も挫折しやすいポイントなので、丁寧に説明します。

CORSとは「ネットワーク上の異なる場所から、勝手にデータを盗まれないように守る防犯システム」のことです。初期状態のCodeIgniterは非常に安全に作られているため、外部にいるReactからのアクセスを自動的に拒否してしまいます。これを解決するには、CodeIgniter側で「Reactさんからのアクセスなら安全なので許可します」という特別な許可証を発行する設定を追加する必要があります。

設定を行うには、CodeIgniterのフィルター機能、またはヘッダー情報と呼ばれる通信の送り状に、許可を意味する命令を書き加えます。これにより、エラーが出ることなく安全にデータの通信ができるようになります。

6. React側でデータを受け取るプログラム

CodeIgniter側の準備がすべて整ったら、最後にReactを使って、届いたデータを画面に表示するプログラムを作成します。Reactでは、インターネットを通じてデータを取得するためのfetch（フェッチ）という標準の道具箱を使います。店員さんに注文をお願いする役割を持つ命令です。

今回は、HTMLの中に直接Reactの動きを組み込むような、最もシンプルで直感的に構造が理解できる記述方法でコードを作成しました。以下のプログラムは、画面が開いた瞬間に自動的にCodeIgniterの窓口を呼び出し、届いた商品一覧を1行ずつ画面に書き出していく仕組みです。


<div id="root"></div>
<script type="text/babel">
    function App() {
        const [items, setItems] = React.useState([]);
        React.useEffect(() => {
            fetch('http://localhost:8080/product/listProducts')
                .then(response => response.json())
                .then(data => setItems(data));
        }, []);
        return (
            <div className="container mt-4">
                <h3 className="text-primary">商品一覧</h3>
                <ul className="list-group">
                    {items.map(item => (
                        <li key={item.id} className="list-group-item d-flex justify-content-between align-items-center">
                            {item.name}
                            <span className="badge bg-secondary">{item.price}円</span>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
</script>

このHTMLファイルをブラウザで読み込むと、背景でCodeIgniterと通信が行われ、以下のように綺麗に整列された一覧画面がパソコンの画面に表示されます。デザインにはBootstrapを使用しており、すっきりとした見た目に仕上がります。


商品一覧
・ノートパソコン  85000円
・スマートフォン  62000円
・ワイヤレスイヤホン  12000円

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

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

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

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

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

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