Laravel + Vue.js 環境構築の完全ガイド！初心者でも簡単

システム開発

2025年4月11日更新（2025年4月11日公開）

Laravel + Vue.js 環境構築の完全ガイド！初心者でも簡単

LaravelとVue.jsは、モダンなWebアプリケーション開発において非常に強力な組み合わせです。

バックエンドに堅牢なPHPフレームワークであるLaravel。

そしてフロントエンドには柔軟で反応的なJavaScriptフレームワークであるVue.jsを採用することで、効率的かつ高性能なアプリケーションを開発できます。

しかし、初めてこの環境を構築する際には、いくつかのステップを踏む必要があります。

今回の記事では、初心者の方でも迷わないように、LaravelとVue.jsの開発環境を構築する手順を丁寧に解説します。

Laravel + Vue.js 開発環境構築の全体像

LaravelとVue.jsを連携させて開発を行うための基本的な環境構築の流れは以下の通りです。

  1. PHPのインストール: LaravelはPHPで動作するため、PHPがインストールされている必要があります。
  2. Composerのインストール: Laravelの依存関係管理ツールであるComposerをインストールします。
  3. Node.jsとnpm (またはyarn) のインストール: Vue.jsのビルドやパッケージ管理にNode.jsとnpm（またはyarn）を使用します。
  4. Laravelプロジェクトの作成: Composerを使用して新しいLaravelプロジェクトを作成します。
  5. Vue CLIのインストール (推奨): Vue.jsの開発を効率化するためのコマンドラインインターフェースであるVue CLIをインストールします。
  6. LaravelにVueコンポーネントを導入: Vue CLIを使ってVueプロジェクトを作成し、Laravelに統合します。または、Laravel Mixを使ってVueコンポーネントを構築します。

以降のセクションで、これらの手順を詳しく解説していきます。

PHPのインストール

まず、Laravelを実行するためにPHPがインストールされている必要があります。

まだインストールしていない場合は、以下のいずれかの方法でインストールしてください。

Windows

  • XAMPP
  • MAMP
  • Laragon

などのローカル開発環境ツールをインストールするのが簡単です。

これらには

  • PHP
  • Apache
  • MySQL

などが含まれています。

個別にインストールする場合は、PHPの公式サイトからダウンロードしてインストールします。

環境変数を設定する必要があります。

macOS

macOSにはデフォルトでPHPがインストールされています。

しかし、バージョンが古い場合があるので、Homebrewなどのパッケージマネージャーを使って最新版をインストールすることをおすすめします。

Linux

各ディストリビューションのパッケージマネージャー（apt、yumなど）を使用してPHPをインストールします。

インストール後、ターミナル（またはコマンドプロンプト）で以下のコマンドを実行し、PHPのバージョンを確認してください。

Bash

php -v

PHPのバージョン情報が表示されれば、インストールは成功です。

Laravelの推奨バージョンは、公式サイトで確認してください。

Composerのインストール

Composerは、PHPの依存関係管理ツールです。

Laravelプロジェクトに必要なライブラリを簡単にインストールおよび管理するために使用します。

まだインストールしていない場合は、Composerの公式サイトからインストーラーをダウンロードして実行してください。

インストール後、ターミナル（またはコマンドプロンプト）で以下のコマンドを実行します。

Composerのバージョンを確認してください。

Bash

composer -v

Composerのバージョン情報が表示されれば、インストールは成功です。

Node.jsとnpm (またはyarn) のインストール

Vue.jsのコンポーネントをビルドしたり、必要なJavaScriptパッケージを管理したりするために、Node.jsとnpm（Node Package Manager）またはyarnをインストールします。

公式サイトから推奨版（LTS）をダウンロードしてインストールしてください。

npmはNode.jsのインストール時に自動的にインストールされます。

yarnを使用したい場合は、以下のコマンドでグローバルにインストールできます。

Bash

npm install -g yarn

インストール後、ターミナル（またはコマンドプロンプト）でそれぞれのバージョンを確認してください。

Bash

node -v
npm -v
# または
yarn --version

バージョン情報が表示されれば、インストールは成功です。

Laravelプロジェクトの作成

Composerを使用して、新しいLaravelプロジェクトを作成します。

ターミナル（またはコマンドプロンプト）で、プロジェクトを作成したいディレクトリに移動します。

以下のコマンドを実行します。

your-project-name は任意のプロジェクト名に置き換えてください。

Bash

composer create-project --prefer-dist laravel/laravel your-project-name

このコマンドを実行すると、指定した名前のディレクトリが作成されます。

Laravelの基本的なファイルや依存関係がダウンロードされます。

処理が完了したら、作成されたプロジェクトのディレクトリに移動します。

Bash

cd your-project-name

Vue CLIのインストール (推奨)

Vue CLI（Command Line Interface）は、Vue.jsの開発を効率化するための強力なツールです。

コンポーネントの作成

開発サーバーの起動

ビルド

などをコマンドラインから簡単に行うことができます。

まだインストールしていない場合は、以下のコマンドでグローバルにインストールします。

Bash

npm install -g @vue/cli
# または
yarn global add @vue/cli

インストール後、ターミナル（またはコマンドプロンプト）でバージョンを確認してください。

Bash

vue --version

バージョン情報が表示されれば、インストールは成功です。

LaravelにVueコンポーネントを導入

LaravelプロジェクトにVue.jsのコンポーネントを導入する方法はいくつかあります。

ここでは、Vue CLIを使用してVueプロジェクトを作成します。

Laravelに統合する方法と、Laravel Mixを使用する方法の2つを紹介します。

方法1: Vue CLIでVueプロジェクトを作成し、Laravelに統合する

この方法は、フロントエンドとバックエンドを比較的独立して開発する場合に適しています。

  1. Laravelプロジェクトのルートディレクトリ内で、Vueプロジェクトを作成するためのディレクトリ（例: frontend) を作成し、移動します。 Bashmkdir frontend cd frontend
  2. Vue CLIを使用して、新しいVueプロジェクトを作成します。 Bashvue create . プロンプトが表示されるので、必要な機能を選択してください（通常は Babel と ESLint を選択することが多いです）。
  3. Vueプロジェクトに必要な依存関係をインストールします。 Bashnpm install # または yarn install
  4. Vueプロジェクトをビルドします。 Bashnpm run build # または yarn build ビルドされたアセット（通常は dist ディレクトリ内）を、Laravelの public ディレクトリ内の適切な場所にコピーします（例: public/js/frontend、public/css/frontend など）。
  5. LaravelのBladeテンプレートで、ビルドされたVue.jsのアセットを読み込みます。 Blade<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel + Vue</title> <link href="{{ asset('css/frontend/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> </div> <script src="{{ asset('js/frontend/app.js') }}"></script> </body> </html>
  6. VueコンポーネントをLaravelのBladeテンプレート内の要素（上記の例では <div id="app"></div>）にマウントします。Vueプロジェクトの main.js などで、マウントする要素のIDを指定します。

方法2: Laravel Mixを使用する

Laravel Mixは、Webpackをベースにしたアセットパイプラインツールで、Vue.jsのコンポーネントをLaravelプロジェクト内で簡単にビルドできます。この方法は、フロントエンドとバックエンドが密接に連携している場合に便利です。

  1. Laravelプロジェクトのルートディレクトリで、Vue.jsのプリセットをインストールします。 Bashcomposer require laravel/ui php artisan ui vue --auth # 必要に応じて認証機能も追加 npm install # または yarn install
  2. webpack.mix.js ファイルを編集して、Vue.jsのアセットをビルドするように設定します。 JavaScriptconst mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .vue(); // Vueコンポーネントを処理するために追加 if (mix.inProduction()) { mix.version(); }
  3. Vueコンポーネントを resources/js/components ディレクトリなどに作成します（例: resources/js/components/ExampleComponent.vue）。
  4. resources/js/app.js で、作成したVueコンポーネントを登録し、Vueインスタンスを作成します。 JavaScriptimport './bootstrap'; import Vue from 'vue'; import ExampleComponent from './components/ExampleComponent.vue'; Vue.component('example-component', ExampleComponent); const app = new Vue({ el: '#app', });
  5. アセットをビルドします。 Bashnpm run dev # または yarn dev 本番環境向けにビルドする場合は、npm run production または yarn production を実行します。
  6. LaravelのBladeテンプレートで、ビルドされたアセットを読み込みます（上記の方法1のステップ5と同様）。

開発サーバーの起動

Laravelの開発サーバーを起動するには、ターミナル（またはコマンドプロンプト）でLaravelプロジェクトのルートディレクトリに移動します。

以下のコマンドを実行します。

Bash

php artisan serve

通常は http://localhost:8000 でアクセスできます。

Vue CLIで個別にVueプロジェクトを作成した場合（方法1）、Vueの開発サーバーを起動するには、frontend ディレクトリに移動し、以下のコマンドを実行します。

Bash

npm run serve
# または
yarn serve

通常は http://localhost:8080 などでアクセスできます。

これで、LaravelとVue.jsの開発環境が構築できました。

どちらの方法でVue.jsを導入した場合でも、LaravelのルーティングやコントローラーでAPIを作成します。

Vue.jsのコンポーネントからAPIを呼び出してデータをやり取りすることで、動的なWebアプリケーションを開発できます。

環境構築は最初のステップですが、ここからがWebアプリケーション開発の始まりです。

LaravelとVue.jsのドキュメントやチュートリアルを参考に、素晴らしいアプリケーションを開発してください。

トラブルシューティング

環境構築中に問題が発生した場合、以下の点を確認してみてください。

  • 各ソフトウェアのバージョンが推奨環境を満たしているか。
  • コマンドのスペルミスがないか。
  • 必要なパッケージが正しくインストールされているか（node_modules ディレクトリや vendor ディレクトリを確認）。
  • エラーメッセージをよく読み、指示に従うか、エラーメッセージで検索してみる。
  • ファイアウォールが開発サーバーへのアクセスをブロックしていないか。

もし解決しない場合は、関連するキーワードで検索したり、開発コミュニティで質問したりしてみることをおすすめします。

読了ありがとうございました！
この記事に関することでお困りの方は
お気軽にご相談ください！
↓ ↓ ↓

この記事について問い合わせる

同一カテゴリおすすめ記事RECOMMEND ENTRY

カテゴリー 一覧CATEGORY

記事一覧に戻る トップページへ戻る