CodeIgniterとVue.jsをAPIで連携する方法！初心者向け完全ガイド

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

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

生徒

「CodeIgniterというPHPの枠組みと、Vue.jsという画面を作る仕組みを組み合わせて、データをやり取りする仕組みを作りたいです。初心者でも作れますか？」

先生

「もちろん作れますよ。CodeIgniter側でデータを提供する仕組みであるAPIを作成し、それをVue.jsで読み込むことで、画面を切り替えずにデータを書き換える最新のウェブシステムが完成します。」

生徒

「APIやフロントエンド、バックエンドという言葉を聞くだけで難しそうに感じてしまいます。パソコンの操作に慣れていなくても分かりますか？」

先生

「大丈夫です。料理人と出前を運ぶ配達員に例えながら、仕組みを基礎から順番に分かりやすく解説していきます。それでは、具体的な作り方と連携の流れを一緒に見ていきましょう！」

1. CodeIgniterとVue.jsの連携とは？

ウェブサイトを作る世界では、役割を分けてプログラムを作ることが一般的です。今回解説するCodeIgniter（コードイグナイター）は、裏方の処理を担当するPHP（ピーエイチピー）という言語で作られた仕組みです。これをバックエンドやサーバーサイドと呼びます。主にデータベースと呼ばれる情報の倉庫から、必要なデータを引っ張り出す役割を持っています。

一方で、Vue.js（ビューじぇいえす）は、利用者が直接目にする画面をきれいに表示したり、ボタンを押したときの動きを作ったりするJavaScript（ジャバスクリプト）の仕組みです。これをフロントエンドやクライアントサイドと呼びます。

この２つの異なる仕組みを仲良しに繋ぐのがAPI（エーピーアイ）という窓口です。CodeIgniterがAPIという窓口を通じてデータを送り、Vue.jsがそのデータを画面に表示するという連携を行うことで、スマートフォンのアプリのように滑らかに動くウェブサイトを作ることができます。

2. APIとJSONの基本を分かりやすく解説

プログラミングの世界でよく使われるAPI（Application Programming Interface）とは、プログラム同士が情報交換をするための専用の窓口のことです。お店で例えるなら、厨房にいる料理人がCodeIgniterで、注文を取りに来る店員やメニューの仕組みがAPIです。画面を見ている利用者は、この窓口を通じて欲しいデータを手に入れます。

そして、その窓口でデータをやり取りするときに使われる専用の言葉の形式をJSON（ジェイソン）と呼びます。JSONは、日本語や英語に関係なく、世界中のコンピューターが共通して理解できる非常にシンプルな文字の並び方です。鍵と値がペアになって並んでいるのが特徴です。例えば、名前は太郎、年齢は二十歳、という情報を特定の記号で囲んで表現します。このJSONという形式を使うことで、PHPで作られたCodeIgniterから、JavaScriptで作られたVue.jsへ、迷子にならずに正確にデータを渡すことができるようになります。

3. 開発の準備と全体の仕組みを理解しよう

実際にプログラムを書き始める前に、どのような流れでパソコンの中でデータが動くのか、全体の設計図を確認しておきましょう。今回は、CodeIgniter側で会員の名前リストを作成し、それをVue.jsで作った画面に表示するという簡単なプログラムを作っていきます。パソコンを触ったことがない方でも、手順通りに進めれば動かすことができますので安心してください。

全体の処理の流れは、次の４つのステップで進みます。まず、利用者がウェブ画面を開きます。次に、Vue.jsがインターネットを通じてCodeIgniterの窓口であるURLを呼び出します。その後、CodeIgniterが名前リストのデータを準備し、JSONという形式の文字に変えて返信します。最後に、届いた文字をVue.jsが解析して、きれいな一覧表として画面に表示します。この一連の動きを作るために、必要なプログラムのファイルを順番に組み立てていきましょう。

4. CodeIgniter側でAPIのコントローラーを作る

まずは、裏方の担当であるCodeIgniterのプログラムから作成します。CodeIgniterでは、窓口の役割を果たすプログラムのことをコントローラーと呼びます。利用者が特定のウェブアドレスに案内されたとき、どの処理を実行するかを決める司令塔のような存在です。

今回は、会員の情報をJSONの形式で返却するコントローラーを作ります。CodeIgniterには、データをJSONに変換して送り出すための便利な機能があらかじめ備わっています。これを利用して、簡単な名前の配列を準備し、画面側へ送信する処理を記述します。ファイル名は「UserController.php」として作成することにします。


namespace App\Controllers;

use CodeIgniter\RESTful\ResourceController;

class UserController extends ResourceController
{
    protected $format = 'json';

    public function index()
    {
        $users = [
            ['id' => 1, 'name' => '佐藤拓海', 'role' => '管理者'],
            ['id' => 2, 'name' => '鈴木結衣', 'role' => '一般会員'],
            ['id' => 3, 'name' => '高橋健太', 'role' => '一般会員']
        ];

        return $this->respond($users);
    }
}

このプログラムについて解説します。最初にある「ResourceController」というのは、APIを作るために必要な機能がたくさん詰まったCodeIgniter専用の部品です。これを受け継ぐことで、少ない行数で安全な窓口を作ることができます。途中に書かれている「$users」の中に、３人分の会員データが入っています。そして、最後にある「respond」という命令を実行することで、自動的にデータがJSONという世界共通の文字形式に変換され、インターネット上に出荷されます。

5. APIへの接続許可を与える設定

裏方のプログラムができたら、次にとても重要な設定を行う必要があります。それはCORS（コルス）と呼ばれる、セキュリティの鍵を開ける設定です。CORSとは、異なる場所に置いてあるプログラム同士が通信をするときに、怪しい通信ではないかを監視して制限する仕組みのことです。

現在のウェブの世界では、安全のために、初期設定の状態では異なるシステムからのデータ要求を拒絶するようになっています。今回は、Vue.jsという別の仕組みからCodeIgniterのデータを受け取りたいため、「データを渡しても大丈夫だよ」という許可証をCodeIgniter側で発行してあげる必要があります。この許可を出すために、送信するデータのヘッダーと呼ばれる案内に、特定の文字列を付け加える処理をコントローラーに追記するか、設定ファイルで調整します。今回は一番簡単な、プログラムの送信前に許可を付け足す方法を確認しましょう。


namespace App\Controllers;

use CodeIgniter\RESTful\ResourceController;

class ApiController extends ResourceController
{
    protected $format = 'json';

    public function getInfo()
    {
        $this->response->setHeader('Access-Control-Allow-Origin', '*');
        $this->response->setHeader('Access-Control-Allow-Headers', '*');
        $this->response->setHeader('Access-Control-Allow-Methods', 'GET, POST');

        $info = [
            'status' => '稼働中',
            'version' => '1.0.0',
            'message' => '通信に成功しました'
        ];

        return $this->respond($info);
    }
}

新しく作成したこのプログラムでは、「setHeader」という命令を３つ並べています。これが通信の許可証になります。１行目の「Access-Control-Allow-Origin」の右側にある星のマークは、すべての場所からのアクセスを拒否せずに受け入れるという意味を持っています。これにより、フロントエンドの開発環境からでも、エラーにならずにスムーズにデータを取得することができるようになります。実務では特定の場所だけを指定して制限しますが、初心者の学習段階では、通信エラーで立ち止まらないためにこのように設定することが多いです。

6. Vue.js側でデータを受け取るHTML画面を作る

裏方の準備がすべて整いましたので、いよいよ表舞台であるVue.jsのプログラムを作成していきましょう。今回は、初心者の方でも一番分かりやすいように、難しい環境構築をせずに、普通のHTMLファイルの中にVue.jsを読み込んで動かす方法を採用します。インターネットを通じてVue.jsの本体を読み込み、その中で先ほど作ったCodeIgniterのURLからデータを引っ張ってくる命令を書きます。

データをインターネット経由で取得することを非同期通信（ひどうきつうしん）やAPIを叩くと言ったりします。今回は、JavaScriptで標準的に使える「fetch（フェッチ）」という便利な道具を使って、CodeIgniterの窓口にお願いを出します。HTMLの中にVue.jsの仕組みを組み込んでいきましょう。


<div id="app" class="container mt-5">
    <h3 class="text-primary mb-4">会員一覧（Vue.jsで表示）</h3>
    <button class="btn btn-success mb-3" v-on:click="loadUsers">データを読み込む</button>
    <ul class="list-group">
        <li class="list-group-item" v-for="user in userList">
            番号：{{ user.id }} | 名前：{{ user.name }} | 役割：{{ user.role }}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const userList = ref([]);

            const loadUsers = async () => {
                const response = await fetch('http://localhost:8080/usercontroller');
                const data = await response.json();
                userList.value = data;
            };

            return {
                userList,
                loadUsers
            }
        }
    }).mount('#app');
</script>

このプログラムの仕組みを解説します。まず、画面中央にあるボタンに「v-on:click="loadUsers"」と書かれています。これは、ボタンがクリックされたときに、下側のスクリプトの中にある「loadUsers」という処理を動かしなさいというVue.jsの特殊な命令です。その処理の中では、「fetch」を使ってCodeIgniterの場所へデータをくださいと通信をしています。データが無事に届くと、「userList」という箱の中に会員データが保存されます。すると、画面上の「v-for」と書かれた部分が、データの数だけ自動的に繰り返し処理を行い、箇条書きのリストを瞬時に画面に作り出します。

7. 実際に通信したときの出力結果を確認する

作成したプログラムが正しく動くと、パソコンの画面やブラウザの内部ではどのような文字のやり取りが行われているのかを見てみましょう。ボタンを押した瞬間、Vue.jsが裏でCodeIgniterにアクセスし、返ってきたJSONの文字データを解釈します。プログラムが成功したときに、内部でやり取りされている生の文字データは以下のような形になっています。


[
  {"id":1,"name":"\u4f50\u85e4\u62d3\u6d77","role":"\u7ba1\u7406\u8005"},
  {"id":2,"name":"\u9234\u6728\u7d50\u8863","role":"\u4e00\u822c\u4f1a\u54e1"},
  {"id":3,"name":"\u9ad8\u6a4b\u5065\u592a","role":"\u4e00\u822c\u4f1a\u54e1"}
]

この出力結果の中で、漢字の部分が不思議な英語と数字の組み合わせに変わっていますが、これはコンピューターが文字を化けさせずに正しく運ぶための通信用の符号なので問題ありません。Vue.jsはこの符号を自動的に読み取って、元のきれいな日本語に戻して画面に表示してくれます。この文字の塊が届くことで、画面が真っ白にリロードされることなく、名前リストの表示だけがパッと切り替わる仕組みが実現できます。

8. エラーが起きたときの確認ポイントと対処法

プログラムがうまく動かないときは、初心者の方は誰でも焦ってしまいますが、確認すべき場所は決まっています。一番多い原因は、CodeIgniterを動かしているパソコンのサーバーのアドレスと、Vue.jsがデータを貰いに行こうとしているアドレスの文字が１文字だけ間違っているケースです。「http」の文字が抜けていないか、数字の記号が間違っていないかをよく確認してください。

次に多いのが、ブラウザの画面を右クリックして「検証」という項目を選び、「コンソール」というエラー日記が見られる画面を開いたときに、真っ赤な文字で「CORS error」と書かれているケースです。これは、手順の５番目で解説した、CodeIgniter側の接続許可の設定がうまく動いていない証拠です。ヘッダーのスペルが間違っていないか、もう一度プログラムを見直してみることで、トラブルを解決することができます。

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

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

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

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

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

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