はい、承知いたしました。LaravelとVue.jsを連携させるための詳細な解説記事を約5000語で記述します。
【徹底解説】Laravel + Vue.js 連携の始め方
はじめに
現代のWebアプリケーション開発において、サーバーサイドフレームワークであるLaravelと、クライアントサイドのJavaScriptフレームワークであるVue.jsの組み合わせは非常に人気があります。Laravelの堅牢なバックエンド機能と、Vue.jsのインタラクティブでリッチなユーザーインターフェース構築能力を組み合わせることで、効率的かつ高品質なWebアプリケーション開発が可能になります。
この記事では、LaravelとVue.jsをゼロから連携させて開発を始めるための手順を、約5000語の詳細な解説とともにご紹介します。開発環境の準備から、プロジェクトのセットアップ、実際の連携方法、API通信、ルーティング、状態管理、そして開発・デプロイメントに至るまで、網羅的に解説していきます。
なぜLaravelとVue.jsを組み合わせるのか？
Laravelは、PHPのフレームワークとして、MVCアーキテクチャに基づいた構造化された開発、Eloquent ORMによるデータベース操作、強力なルーティング、テンプレートエンジン（Blade）、セキュリティ機能（CSRF保護、認証・認可）、タスクキュー、イベントシステムなど、Webアプリケーション開発に必要な多くの機能を提供します。特に、RESTful APIの開発が容易であり、バックエンドとしての役割を担うのに優れています。
一方、Vue.jsは、コンポーネントベースのアーキテクチャを採用したプログレッシブなJavaScriptフレームワークです。学習コストが比較的低く、柔軟性が高いため、小規模な機能追加から大規模なシングルページアプリケーション（SPA）まで、幅広い用途に対応できます。インタラクティブなUIの構築、状態管理、クライアントサイドルーティングなどを得意とします。
この二つを組み合わせることで、以下のようなメリットが得られます。
- 役割の明確化: Laravelがバックエンド（データ処理、認証、API提供など）を、Vue.jsがフロントエンド（UI構築、ユーザー操作への応答、データの表示など）を担当するため、コードベースが分離され、保守性が向上します。
- リッチなユーザー体験: Vue.jsによるインタラクティブなUIと、非同期通信（API経由）によるデータ更新により、ページ遷移なしでスムーズな操作感を持つアプリケーションを構築できます。
- 開発生産性の向上: それぞれのフレームワークが得意とする分野に集中できるため、開発効率が高まります。Laravelのエコシステム（Composerパッケージ）とVue.jsのエコシステム（npmパッケージ）を利用できる点も大きな強みです。
- パフォーマンス: クライアント側でUIの大部分を描画するため、サーバーの負荷を軽減できます。API通信も非同期で行われるため、必要なデータだけを効率的に取得できます。
この記事の対象読者
- Laravelを使った開発経験がある、または学習中のエンジニア。
- Vue.jsを使った開発経験がある、または学習中のエンジニア。
- LaravelとVue.jsを組み合わせてWebアプリケーションを開発したいと考えているエンジニア。
- 基本的なPHP、JavaScriptの知識がある方。
第1章: 開発環境を整える
LaravelとVue.jsを連携させるには、それぞれの開発に必要なツールを準備する必要があります。
必要なものリスト
- PHP: LaravelはPHPで動作するため、PHPが必要です。Laravelのバージョンによって必要なPHPのバージョンが異なりますが、最新のLaravelではPHP 8.2以上が推奨されます。
- Composer: PHPの依存関係を管理するためのツールです。Laravelやその他のPHPライブラリのインストールに使います。
- Node.js & npm/yarn: Vue.jsおよび関連するフロントエンドツール（ビルドツール、パッケージマネージャーなど）を実行するために必要です。Node.jsにはパッケージマネージャーであるnpmが標準で付属していますが、より高速なyarnを使う開発者も多いです。
- Laravel: PHPフレームワーク本体です。
- データベース: アプリケーションでデータを扱う場合、データベースが必要です。MySQL, PostgreSQL, SQLite, SQL Serverなど、Laravelがサポートする様々なデータベースを利用できます。開発中はSQLiteやDocker上のMySQLなどを使うのが手軽です。
- Webサーバー: 開発中はLaravelが提供する開発用サーバー（
php artisan serve）を利用できますが、本番環境ではNginxやApacheなどが必要です。 - エディタ/IDE: コードを書くためのツールです。VS Code, PhpStormなどが人気です。
各ツールのインストール方法
各ツールの具体的なインストール手順は、OSやバージョンによって異なりますが、ここでは一般的な方法と公式ドキュメントへのリンクを示します。
PHP:
- macOS (Homebrew):
brew install php - Windows: XAMPP, WampServer, Laragonなどの統合環境を利用するか、公式ダウンロードページからインストーラーをダウンロードします。
- Linux: ディストリビューションのパッケージマネージャーを使用します（例:
sudo apt update && sudo apt install php php-cli php-common php-mysql ...）。
公式ドキュメント: https://www.php.net/manual/en/install.php
インストール後、ターミナルで php -v を実行し、バージョン情報が表示されるか確認してください。
Composer:
Composerの公式ウェブサイトにアクセスし、OSごとのインストール手順に従ってください。
公式ドキュメント: https://getcomposer.org/download/
インストール後、ターミナルで composer --version を実行し、バージョン情報が表示されるか確認してください。
Node.js & npm/yarn:
Node.jsの公式ウェブサイトからインストーラーをダウンロードして実行するのが最も簡単です。通常、Node.jsと一緒にnpmもインストールされます。
公式ドキュメント: https://nodejs.org/ja/download/
インストール後、ターミナルで node -v と npm -v を実行し、バージョン情報が表示されるか確認してください。
yarnを使用したい場合は、npmを使ってyarnをインストールします。
npm install -g yarn
インストール後、 yarn --version を実行して確認してください。
Laravel:
LaravelはComposerを使ってプロジェクトごとにインストールするのが一般的です。グローバルにLaravelインストーラーをインストールする方法もありますが、 Composerを使った方法を推奨します。
環境構築が面倒な場合は、Dockerを使ったLaravel開発環境であるLaravel Sailを利用するのも非常に強力な選択肢です。Sailを使えば、PHP, Composer, Node.js, データベースなどをDockerコンテナとしてまとめて管理できます。
Sailに関する公式ドキュメント: https://laravel.com/docs/sail
この記事では、Sailを使わない前提で進めますが、Sailユーザーも基本的な概念は同じです。
第2章: Laravelプロジェクトの準備
Laravelプロジェクトを新規作成し、データベース設定を行います。
Laravelプロジェクトの新規作成
プロジェクトを作成したいディレクトリに移動し、Composerを使って以下のコマンドを実行します。
bash
composer create-project laravel/laravel laravel-vue-app
このコマンドは、laravel-vue-app という名前の新しいディレクトリを作成し、その中に最新版のLaravelプロジェクトをセットアップします。
プロジェクトディレクトリに移動します。
bash
cd laravel-vue-app
プロジェクト構造の概要
Laravelプロジェクトの主要なディレクトリ構造を簡単に説明します。
app/: アプリケーションの核となるコード（コントローラー、モデル、サービスプロバイダーなど）を配置します。bootstrap/: フレームワークの起動に関するファイルが含まれます。config/: アプリケーションの各種設定ファイル（データベース、メールなど）が置かれます。database/: データベースマイグレーション、シーダー、ファクトリーなどが含まれます。public/: アプリケーションの公開ディレクトリです。画像、CSS、コンパイルされたJavaScriptファイルなどを配置し、Webサーバーはこのディレクトリをドキュメントルートとして設定します。resources/: ビューファイル（Bladeテンプレート）、言語ファイル、そしてフロントエンドのアセット（JavaScript, CSS, Vueコンポーネントなど）を配置します。Vue.jsのコードは主にresources/js/に配置します。routes/: アプリケーションのルーティング定義ファイル（web.php,api.phpなど）が置かれます。storage/: アプリケーションが生成するファイル（ログ、キャッシュ、アップロードファイルなど）を保存します。tests/: 自動テストに関するファイルが置かれます。vendor/: Composerによって管理されるPHPの依存ライブラリが置かれます。.env: 環境変数ファイルです。データベース接続情報、APIキーなどの機密情報や環境ごとの設定を記述します。package.json: Node.jsおよびnpm/yarnで管理されるフロントエンドの依存関係とスクリプトが定義されます。webpack.mix.jsまたはvite.config.js: フロントエンド資産（JavaScript, CSSなど）のコンパイル設定ファイルです。
.env ファイルによる環境設定
プロジェクトのルートディレクトリにある .env ファイルを開き、データベース接続情報を設定します。開発環境では、以下のように設定することが多いです。
dotenv
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_vue_app # 任意のデータベース名
DB_USERNAME=root # データベースのユーザー名
DB_PASSWORD= # データベースのパスワード
DB_DATABASE に指定した名前でデータベースを事前に作成しておく必要があります。
また、アプリケーションのURLなども設定します。
dotenv
APP_NAME="Laravel Vue App"
APP_ENV=local
APP_KEY= # プロジェクト作成時に自動生成される
APP_DEBUG=true
APP_URL=http://localhost:8000 # または開発用サーバーのアドレス
データベースマイグレーションの実行
Laravelにはデータベースのスキーマ管理機能であるマイグレーションがあります。ユーザー認証などに必要な基本的なテーブルは最初からマイグレーションファイルとして用意されています。
以下のコマンドでこれらのテーブルを作成できます。
bash
php artisan migrate
このコマンドを実行する前に、.env で設定したデータベースが存在し、指定したユーザーで接続できることを確認してください。
これで、Laravelプロジェクトのバックエンドの基本的な準備が整いました。次に、Vue.jsをプロジェクトに導入し、フロントエンドの準備を進めます。
第3章: Vue.jsを導入する – Laravel Mix / Vite の活用
LaravelプロジェクトでVue.jsを使うためには、Node.jsとnpm/yarnを使ってVue.jsおよび関連ライブラリをインストールし、フロントエンド資産をコンパイルする仕組みを導入する必要があります。Laravelは標準でLaravel Mix（webpackのラッパー）またはVite（モダンなフロントエンドビルドツール）との連携機能を提供しています。Laravel 9以降はViteがデフォルトになっていますが、ここでは両方について触れつつ、主にViteを使った方法で進めます。
Laravel Mix / Vite とは
- Laravel Mix: Webpackというフロントエンド向けのモジュールバンドラーを、よりシンプルに扱うためのLaravel公式ツールです。JavaScriptファイルのバンドル、SCSS/Sass/Lessのコンパイル、ファイルのコピー、バージョニング（キャッシュ busting）などを行います。
webpack.mix.jsという設定ファイルに処理を記述します。 - Vite: Vue.jsの作者であるEvan You氏によって開発された、モダンなフロントエンドビルドツールです。開発時にはES Modulesネイティブの機能を活用し、高速なホットモジュールリプレイスメント（HMR）を提供します。ビルド時にはRollupをベースに最適な形でバンドルを行います。Laravel 9以降、
laravel/uiパッケージなしでもVue.jsを導入する際にViteが推奨されるようになりました。設定ファイルはvite.config.jsです。
どちらを使うかはプロジェクトの要件やLaravelのバージョン、開発者の慣れによりますが、新規プロジェクトであればViteを使うのが現代的でおすすめです。
Vue.jsのインストール
プロジェクトのルートディレクトリにいることを確認し、Node.jsの依存関係をインストールします。Laravelプロジェクトを新規作成した時点では、package.json にLaravelのフロントエンド開発に必要な依存関係（Vue.js, Vite, PostCSS, Autoprefixerなど）が既に含まれていることが多いです。
以下のコマンドを実行して、これらの依存関係をインストールします。
bash
npm install # または yarn install
このコマンドは package.json に記述されている全てのパッケージを node_modules ディレクトリにインストールします。この中にVue.js本体やVueをLaravelと連携させるための @vitejs/plugin-vue などが含まれます。
package.json の解説
package.json ファイルには、プロジェクトのメタ情報、依存関係、そして様々な開発タスクを実行するためのスクリプトが定義されています。Vue.jsと関連パッケージをインストールすると、dependencies や devDependencies セクションにそれらが追記されます。
特に重要なのは scripts セクションです。ここでは、フロントエンドのビルドや開発サーバーの起動に関するコマンドが定義されています。
json
"scripts": {
"dev": "vite", // 開発用サーバー起動（Viteの場合）
"build": "vite build", // 本番用ビルド（Viteの場合）
// または Mix の場合:
// "dev": "npm run development",
// "development": "mix",
// "watch": "mix watch",
// "prod": "npm run production",
// "production": "mix --production"
},
これらのスクリプトは、npm run [スクリプト名] または yarn [スクリプト名] という形式で実行できます。
resources/js/app.js の役割と初期設定
resources/js/app.js は、LaravelプロジェクトにおけるフロントエンドJavaScriptの主要なエントリーポイントとなるファイルです。ここで、Vue.jsアプリケーションのインスタンスを作成し、必要なコンポーネントを登録したり、ルーティングや状態管理の設定を行ったりします。
プロジェクト作成直後の resources/js/app.js は、以下のような内容になっていることが多いです（Viteの場合）。
“`javascript
import ‘./bootstrap’;
import { createApp } from ‘vue’;
const app = createApp({});
// app.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default); // Mix スタイル
import ExampleComponent from ‘./components/ExampleComponent.vue’; // Vite スタイル
app.component(‘example-component’, ExampleComponent);
app.mount(‘#app’);
“`
解説:
import './bootstrap';: プロジェクト共通の初期設定（Axiosの設定など）を行うresources/js/bootstrap.jsを読み込んでいます。import { createApp } from 'vue';: Vue 3の新しいAPIであるcreateAppをインポートしています。const app = createApp({});: Vueアプリケーションのインスタンスを作成します。ここに各種プラグインや設定を追加していきます。app.component(...): Vueコンポーネントをグローバルに登録します。ここでは例としてExampleComponent.vueを'example-component'という名前で登録しています。これにより、Bladeテンプレート内で<example-component></example-component>のように使用できるようになります。app.mount('#app');: Vueアプリケーションを指定されたDOM要素（ここではIDがappの要素）にマウントします。
resources/js/components/ ディレクトリ
resources/js/components/ ディレクトリは、Vue.jsの単一ファイルコンポーネント（.vue ファイル）を配置するための慣習的な場所です。プロジェクト作成時には ExampleComponent.vue というサンプルコンポーネントが配置されています。
単一ファイルコンポーネントは、<template>, <script>, <style> ブロックを一つのファイルに記述する形式で、Vue.js開発において非常に一般的です。
Laravel Mix (webpack.mix.js) / Vite (vite.config.js) の設定
Vite (vite.config.js)
Laravel 9以降でViteがデフォルトの場合、vite.config.js ファイルが存在します。Vue.jsを使うための設定は通常、最初から含まれています。
“`javascript
import { defineConfig } from ‘vite’;
import laravel from ‘laravel-vite-plugin’;
import vue from ‘@vitejs/plugin-vue’; // Vueプラグインをインポート
export default defineConfig({
plugins: [
laravel({
input: [ // エントリーポイントを指定
‘resources/css/app.css’,
‘resources/js/app.js’,
],
refresh: true,
}),
vue(), // Vueプラグインを追加
],
});
“`
この設定では、resources/css/app.css と resources/js/app.js をエントリーポイントとして指定し、@vitejs/plugin-vue を使用して .vue ファイルを扱えるようにしています。
Laravel Mix (webpack.mix.js)
Laravel Mixを使用する場合、webpack.mix.js ファイルが存在します。Vue.jsを有効にするには、設定に .vue() を追加します。
“`javascript
const mix = require(‘laravel-mix’);
mix.js(‘resources/js/app.js’, ‘public/js’) // app.js を public/js にコンパイル
.vue() // Vue.js を使用することを宣言
.css(‘resources/css/app.css’, ‘public/css’) // CSS を public/css にコンパイル
.version(); // キャッシュ対策としてファイル名にハッシュを付加
“`
この設定は、resources/js/app.js を public/js/app.js に、resources/css/app.css を public/css/app.css にコンパイルすることを意味します。.vue() を呼び出すことで、.vue ファイルをJavaScriptとしてコンパイルできるようになります。
フロントエンド資産のコンパイル
Node.jsの依存関係をインストールし、app.js および設定ファイルを準備したら、フロントエンドのJavaScriptやCSSファイルをコンパイルします。
開発中 (Vite):
bash
npm run dev # または yarn dev
このコマンドはViteの開発サーバーを起動し、ファイルの変更を監視して自動的にブラウザに反映（HMR）します。Viteは開発中にはバンドルを行わず、ネイティブES Modulesを利用するため、非常に高速です。
php artisan serve でLaravelの開発サーバーも起動し、同時に実行する必要があります。
本番用ビルド (Vite):
bash
npm run build # または yarn build
このコマンドは本番環境向けにコードを最適化してビルドします。結果は通常 public/build ディレクトリに出力されます。
開発中 (Laravel Mix):
bash
npm run development # または yarn development
または、ファイルの変更を監視して自動的に再コンパイルする場合は、
bash
npm run watch # または yarn watch
を使用します。
本番用ビルド (Laravel Mix):
bash
npm run production # または yarn production
このコマンドはコードを圧縮・最適化して本番環境向けにビルドします。
コンパイルが成功すると、public ディレクトリ内にコンパイルされたJavaScriptやCSSファイルが生成されます。
第4章: Laravel BladeとVueコンポーネントの連携
LaravelとVue.jsを連携させる最も一般的な方法は、Bladeテンプレートの一部、または全体をVue.jsアプリケーションとして扱うことです。
基本的な連携方法: BladeテンプレートにVueをマウント
Vue.jsアプリケーションをマウントするためには、Bladeテンプレート内のどこかにVueが制御する範囲を示す要素が必要です。慣習的に、アプリケーション全体を制御する場合、<body> タグの直下などにIDが app の div 要素を配置します。
resources/views/welcome.blade.php ファイルを編集してみましょう。Laravelの標準的なようこそページです。
“`html+jinja
@vite([‘resources/css/app.css’]) {# Vite の場合 #}
{# @mix(‘css/app.css’) #} {# Mix の場合 #}
{# Vue.js アプリケーションをマウントする要素 #}
{# コンパイルされた JavaScript ファイルを読み込む #}
@vite([‘resources/js/app.js’]) {# Vite の場合 #}
{# @mix(‘js/app.js’) #} {# Mix の場合 #}