1. はじめに

「新しいWebサービスを作りたいけど、環境構築でいつも挫折する…」
「モダンな技術スタックに挑戦したいけど、何から始めればいいかわからない…」
この記事は、そんな悩みを抱えるすべてのITエンジニア、特にWeb開発初学者から中級者の方へ向けて執筆しました。
本記事を読み終える頃には、Laravel + Vue.js + Vite というモダンで強力な開発環境を、Dockerコンテナ上に 「爆速」 で構築できるようになります。 PCを汚さず、コマンド数発で立ち上がる快適な開発環境を手に入れて、モダンWeb開発の第一歩を踏み出しましょう！

完成する開発環境の全体像:

バックエンド: Laravel 11.x
フロントエンド: Vue.js 3.x
ビルドツール: Vite
開発環境: Docker / Laravel Sail

2. なぜ今、この技術スタックなのか？

数ある技術スタックの中で、なぜこの組み合わせが 「モダン」 で 「強力」 なのでしょうか？それぞれの特徴を簡単に見ていきましょう。

Laravel: 「Web職人のためのPHPフレームワーク」。書きやすく、学習コストも比較的低いながら、大規模開発にも耐えうるパワフルな機能群が魅力です。PHP界で圧倒的な人気を誇ります。

Vue.js: シンプルなAPIと優れたドキュメントで、初心者でも学びやすいUIフレームワークです。リアクティブなデータバインディングとコンポーネントシステムで、複雑なUIも効率的に構築できます。

Vite: フランス語で「速い」を意味する、次世代のフロントエンドビルドツール。HMR（ホットモジュールリプレイスメント）による超高速な画面更新で、開発体験を劇的に向上させます。

Docker (Laravel Sail): コンテナ技術DockerをLaravelから簡単に利用できるようにした公式パッケージ。OS（Mac/Win）間の差異を吸収し、誰でも同じ環境をコマンド一つで再現できます。もう「自分のPCでだけ動かない」とはサヨナラです。

3. 前提条件

ハンズオンに進む前に、お使いのPCに以下のソフトウェアがインストールされていることを確認してください。
Docker Desktop: 公式サイトからダウンロードしてインストールします。
【Windowsユーザー向け】WSL2: DockerをWindowsで快適に動かすための仕組みです。設定方法はMicrosoft公式ドキュメントを参照してください。

4. 爆速構築！ハンズオン

お待たせしました！ここからは実際に手を動かして、環境を構築していきましょう。
ターミナル（Windowsの方はPowerShellやWSLのターミナル）を開いて、以下のコマンドを順番に実行してください。

Step 1: Laravel プロジェクトの新規作成

まず、Laravelのプロジェクトを作成します。以下のコマンドを実行してください。example-app の部分は好きなプロジェクト名に変更してOKです。

Bash
curl -s "https://laravel.build/example-app" | bash
Bash
curl -s "https://laravel.build/example-app" | bash

このコマンド一つで、Dockerを使ったLaravel環境の構築に必要なファイル一式がダウンロード・設定されます。
次に、作成されたディレクトリに移動し、Laravel Sailを起動します。

Bash
cd example-app
./vendor/bin/sail up -d
Bash
cd example-app
./vendor/bin/sail up -d

初回はDockerイメージのビルドに少し時間がかかります。sail up -d の -d はバックグラウンドで起動するオプションです。
起動したら、ブラウザで http://localhost にアクセスしてください。Laravelのウェルカムページが表示されれば成功です！

Step 2: Vue.js と認証機能（scaffolding）の導入

次に、Vue.jsと、ログイン・新規登録機能の雛形（scaffolding）を導入します。
Laravel Sail環境下のコマンドは、先頭に ./vendor/bin/sail をつけて実行します。

Bash
laravel/ui パッケージをインストール
./vendor/bin/sail composer require laravel/ui
Vueと認証機能の雛形をインストール
./vendor/bin/sail php artisan ui vue --auth
Bash
laravel/ui パッケージをインストール
./vendor/bin/sail composer require laravel/ui
Vueと認証機能の雛形をインストール
./vendor/bin/sail php artisan ui vue --auth

コマンドが成功すると、「Please run "npm install && npm run dev" to compile your fresh scaffolding.」と表示されます。指示に従いましょう。

Step 3: Vite の設定と起動

フロントエンドの依存パッケージをインストールし、Viteの開発サーバーを起動します。

Bash
依存パッケージをインストール
./vendor/bin/sail npm install
Vite開発サーバーを起動
./vendor/bin/sail npm run dev
Bash
依存パッケージをインストール
./vendor/bin/sail npm install
Vite開発サーバーを起動
./vendor/bin/sail npm run dev

npm run dev を実行すると、Viteがファイルの変更を監視し始めます。このターミナルは開いたままにしておいてください。

Step 4: 動作確認とホットリロード（HMR）体験

それでは、動作確認です。
ブラウザで再度 http://localhost にアクセスし、画面右上に「Log in」「Register」のリンクが表示されていることを確認してください。
次に、Viteの真骨頂であるHMRを体験してみましょう。
お好きなエディタでプロジェクトを開き、resources/js/components/ExampleComponent.vue を以下のように編集して保存してみてください。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Vueコンポーネントのテスト</div>

                    <div class="card-body">
                        Laravel + Vue + Vite の環境構築が完了しました！
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Vueコンポーネントのテスト</div>

                    <div class="card-body">
                        Laravel + Vue + Vite の環境構築が完了しました！
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

ファイルを保存した瞬間に、ブラウザのリロードなしで画面の表示が切り替わったはずです。これがViteによるHMRです。この爆速フィードバックが、開発効率を飛躍的に高めてくれます。

5. よくあるつまずきポイント（FAQ）

sail コマンドが使えない

./vendor/bin/sail と打つのが面倒な方は、alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail' を .bashrc や .zshrc に追記すると sail だけで実行できるようになり便利です。

ポートが競合して sail up できない

docker-compose.yml ファイル内の ports 設定（例: 80:80）の左側を、空いている別のポート（例: 8080:80）に変更してください。その場合、アクセスURLは http://localhost:8080 となります。

Vite の HMR が効かない

vite.config.js ファイルに server.hmr.host の設定を追加する必要がある場合があります。また、Docker環境下でのファイル監視がうまく動いていない可能性も考えられます。

6. 次のステップへ

無事に環境が構築できたら、ここからが本番です。
データベースとの連携: sail artisan migrate でマイグレーションを実行し、データベースを使ってみましょう。
Inertia.js の導入: LaravelとVueをよりシームレスに連携させ、SPA（シングルページアプリケーション）のような体験を実現できます。
TypeScript の導入: 静的型付けで、より堅牢なフロントエンド開発を目指しましょう。

7. おわりに

本記事では、Laravel + Vue.js + Vite というモダンな技術スタックを用いた開発環境を、Laravel Sailを使ってDocker上に構築する手順を解説しました。
コマンド数発でクリーンな開発環境が手に入る手軽さと、Viteによる快適な開発体験を実感いただけたのではないでしょうか。この環境をベースに、ぜひあなたのアイデアを形にしてみてください。
Happy Hacking!

安心安全のホワイト高還元SESに転職を考えている方へ

新しい挑戦に踏み出すことは、人生において重要な一歩です。 転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つ になるかと思います。 どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！ グラディートと一緒に誇れるエンジニアを目指しましょう！

■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）

株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/

株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/