【Laravel入門】Viteでモダンな開発環境を5分で構築する簡単手順

これからPHPの人気フレームワーク「Laravel」を学ぼうとしている、あるいは学び始めたばかりの方にとって、最初の関門となるのが**「開発環境の構築」**ではないでしょうか。

様々なツールが登場し、「結局どうやって始めるのが一番いいの？」と迷ってしまうことも多いと思います。

この記事では、私自身のWikiメモを元に、現在のLaravel開発で最もモダンで効率的な「Laravel Sail」と「Vite」を組み合わせた開発環境を、初心者の方でも5分で構築できる手順を解説します。

今回ご紹介する環境構築には、2つの主役がいます。

Laravel Sail (ララベルセイル):Dockerという技術を使って、あなたのPCの中にLaravel専用の開発環境（Webサーバー、データベース等）を自動で構築してくれるツールです。これを使えば、自分のPCに直接PHPやMySQLをインストールする必要がなく、PC環境を汚さずに誰でも同じ環境を再現できます。
Vite (ヴィート):フロントエンド（見た目部分）のソースコードを管理し、ブラウザ表示に変換してくれるツールです。最大の特徴は、ソースコードの変更をブラウザに反映させるのが驚くほど高速なこと。CSSを少し修正しただけで何秒も待たされる…といった開発中のストレスを劇的に減らしてくれます。

この2つを組み合わせることで、**「環境構築が簡単」で「開発が高速」**という、まさに「コストパフォーマンス」と「時間効率」に優れた開発環境が手に入ります。

それでは、実際に環境を構築していきましょう。Docker Desktopがインストールされていれば、あとはコマンドをいくつか実行するだけです。

まずは、composerというPHPのパッケージ管理ツールを使って、Laravelプロジェクトの雛形を作成します。

composer create-project laravel/laravel my-laravel-app
cd my-laravel-app

次に、sail:installコマンドでDockerの設定ファイルを用意し、sail upで開発環境を起動します。

# Docker設定ファイルの作成
php artisan sail:install

# Dockerコンテナをバックグラウンドで起動
./vendor/bin/sail up -d

これだけで、あなたのPCの中にWebサーバーやデータベースが立ち上がりました。

次に、ログイン機能などの基本的なUIを提供してくれるLaravel Breezeを導入します。今回は、多くの人が慣れ親しんでいるCSSフレームワークであるBootstrap版をインストールしてみましょう。

# Breezeパッケージをインストール
./vendor/bin/sail composer require laravel/breeze --dev

# Bootstrap用のファイル群を自動生成
./vendor/bin/sail php artisan breeze:install

最後に、必要なJavaScriptパッケージをインストールし、Viteの開発サーバーを起動します。

# JavaScriptパッケージのインストール
./vendor/bin/sail npm install

# Vite開発サーバーの起動
./vendor/bin/sail npm run dev

これで準備は完了です！

ブラウザで http://localhost にアクセスしてみてください。ログイン画面とユーザー登録画面を備えた、あなたの新しいLaravelアプリケーションが表示されているはずです。

今回は、現在のLaravel開発におけるベストプラクティスとも言える、Laravel SailとViteを使った開発環境の構築手順をご紹介しました。

たくさんのコマンドを実行したように見えるかもしれませんが、一つ一つのコマンドが何をしているのかを理解すれば、決して難しいものではありません。

この記事が、あなたのLaravel学習の第一歩を踏み出す「ヒント」になれば幸いです。ぜひこの快適な環境で、素晴らしいアプリケーション開発を楽しんでください。