Laravelの新しい環境構築方法【php.new】を使って、Laravel12でプロジェクトを作成する方法をご紹介します。
Laravel１２ではプロジェクト選択時にスターターキットを選べますが、今回はLivewireを選択します。
さらに今回は、Node.jsの代わりに、Bunという新しいツールを使います。新しい環境構築方法にご興味あれば、見てみてくださいね。
結論からいうと、Laravelの環境構築がものすごく手軽になると感じました。カップラーメンと同様3分どころか、1分とかからないかもしれません＾＾
動画編はこちらです。
↓↓↓
Laravelの公式サイトはこちら。
Laravel12×Livewireプロジェクト作成：php.newとBunで環境構築
まずは環境構築を行い、そのあと、プロジェクトを作成します。
Windows環境を使っていますが、Macの場合に動作が異なることがあります。その場合は、青色の枠内で補足説明をいれています。
php.newのインストール
公式サイトに書かれているとおり、Windowsの場合は、管理者としてWindows PowerShellを起動し、下記コマンドを実行します。
|
1 |
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://php.new/install/windows')) |
無事インストールが終了すると、次のような画面となります。
/bin/bash -c “$(curl -fsSL https://php.new/install/mac)”
公式サイトはこちら。
コマンドは変わっている可能性もあるので、公式サイトも見てくださいね。
Bunのインストール
環境に合わせて、コマンドを使ってインストールします。Windowsの場合は、引き続きPowerShell上で下記を実行します。
|
1 |
powershell -c "irm bun.sh/install.ps1 | iex" |
/bin/bash -c “$(curl -fsSL https://php.new/install/mac)”
Macの場合は、インストール後、パスを設定する必要があります。
zshの場合は、ターミナルを開き、以下のコマンドを実行して.zshrcファイルを編集します。
|
1 |
nano ~/.zshrc |
ファイルの最後に以下の行を追加します。userの部分は、ユーザー名に変えてください。
|
1 |
export PATH="/Users/user/.config/herd-lite/bin:$PATH" |
変更を保存した後、エディタを終了します。以下のコマンドを実行して、変更を反映させます。
|
1 |
source ~/.zshrc |
Bunの公式サイトはこちら。Bunのアイコン、かわいいですね。
Laravelプロジェクトの作成
次にLaravelのプロジェクトを作成します。php.newをいれると、Laravelインストーラーが入ってきます。インストーラーを使用して、下記コマンドでプロジェクトを作成します。
membersは、プロジェクト名です。お好みで変えてください。
|
1 |
laravel new members |
プロジェクトを作成する前に、こちらもお好みでディレクトリを移動してくださいね。
動画ではDocumentsの中にlaravelディレクトリを作り、そこで上記コマンドを実行しました。
場所によっては、編集時に権限エラーになったりするので、Documents や他のユーザーフォルダ内にプロジェクトを作成するのがおすすめです。
移動するには「cd」コマンドを使います。コマンド入力に慣れていない方は、下記記事もご覧ください。
スターターキットの選択
プロジェクトを作成すると、質問が表示されます。
■ 「Which starter kit would you like to install?（どのスターターキットをインストールするか）」
「livewire」を入力してください。
■「Which authentication provider do you prefer? （どちらの認証プロバイダーを使用するか）」
今回は通常の「laravel」を選択します。
■「 Would you like to use Laravel Volt?（Laravel Voltを使うか）」
今回は「yes」と選択しておきます。Voltについては、本記事の後半で解説しています。
■「Which testing framework do you prefer?（テスト用フレームワークはどちらを使うか）」
どちらを選んでも良いのですが、悩んだら、「0」と入力しておきましょう。
しばらく待ちます。
データベースの選択
データベースを聞かれた場合は、今回はデフォルトのsqliteを選んでおきます。
※データベーステーブルについて聞かれた後、次のようにマイグレーションを実行するか選択できる場合は、Yesと入力しておきます。
注：npm installの実行はしない
最後のほうに下記のように質問がでてきます。
「yes」を選ぶと、必要なNode.jsのパッケージがインストールされます。今回はBunを使うので、ここは「no」を選択します。
プロジェクトにbunをインストール
以上でLaravelプロジェクト作成できました。あまりにあっさりですが＾＾；
ただ、まだ行うことは残っています。プロジェクトの中に移動します。
|
1 |
cd members |
プロジェクトごとにbunをインストールします。
|
1 |
bun install |
ブラウザに表示
サーバーを立ち上げます。
php artisan serveコマンドを実行します。
|
1 |
php artisan serve |
ブラウザで、http://127.0.0.1:8000を開きます。Laravelトップ画面が表示されます。
LoginとRegisterボタンも右上についており、ユーザー登録も可能です。
ちなみに、Windoswの場合は上記のようなホワイトモードですが、Macの場合はダークモードがデフォルトでした。
エラーが起こった場合（Windows）
わたしの場合は、上記コマンド実行後、エラーになりました。
調べてみると、php.iniに問題があるのではないかということでした。
php.ini の variables_order 設定が "EGPCS" だと、システムの環境変数が先に読み込まれて Laravel の .env ファイルの設定が上書きされ、エラーが発生するようです。そこでこの部分を”GPCS”` に変更し、.envの内容が読み込まれるようにしました。
手順は次のとおりです。まずは下記コマンドでphp.iniファイルの場所を確認しました。
|
1 |
php --ini |
コマンド実行後の画面はこちら。
パスの場所にあるphp.iniファイルを開き、variables_order = “EGPCS”をvariables_order = “GPCS”と編集をしました。
再度 php artisan serveコマンドを実行します。
ブラウザでhttp://127.0.0.1:8000を開きます。Laravelトップ画面が表示されます。
bun run devを実行
なお今のままだと、loginやregisterページを表示すると、次のようにエラーが表示されます。
こちらを修正するために新しく管理者として、Windows PowerShellを立ち上げます。
プロジェクトの場所に移動します。bun run devコマンドを実行します。
|
1 |
bun run dev |
※node.jsを使っている場合には、composer run devコマンドによって、php artisan serveとnpm run devを同時に実行できます。
これによって、無事ユーザー登録画面が表示されます。
bun run devについて
ここでbun run devコマンドで何を行ったか、ここで少し補足説明しますね。
bun run dev コマンドを実行すると、プロジェクト内のCSSやJavaScriptといったソースコードが、自動的にブラウザで動作する形にビルドされます。
つまり、フロントエンドのコード（Tailwind CSSでのスタイリングやJavaScriptの動作など）が、ブラウザでスムーズに動くように最適化されます。
以前はLaravel MixとNode.jsを使用して、この処理が行われていましたが、原理は同じです。
仕組みがイマイチ分からないと感じたら、Laravel Mixについてマンガで解説した記事があるので、こちらも見てみてくださいね。
この部分を分かりやすく伝えたいと思い、熱い想いで、ゆるく描いた漫画です♪
Vite manifest not found atエラーについては、この記事でも解説しています。
なお、bun run devを実行しなくても、常にスタイルをキープしたいときには下記コマンドを実行しましょう。本番環境に移行する時などにも、このコマンドを実行します。
|
1 |
bun run build |
初期設定
タイムゾーンと言語の設定も行っておきます。
タイムゾーンの変更
config/app.phpの68行目あたりには、下記コードが入っています。
【config/app.php】
|
1 |
'timezone' => 'UTC', |
下記のようにします。
|
1 |
'timezone' => 'Asia/Tokyo', |
言語の変更
.envファイルの中に、言語設定が入っています。
【.env】
|
1 2 3 |
APP_LOCALE=en APP_FALLBACK_LOCALE=en APP_FAKER_LOCALE=en_US |
ここを次のようにしておきます。
|
1 2 3 |
APP_LOCALE=ja APP_FALLBACK_LOCALE=ja APP_FAKER_LOCALE=ja_JP |
config/app.phpの81行目あたりには、下記コードが入っています。
【config/app.php】
|
1 2 3 |
'locale' => env('APP_LOCALE', 'en'), 'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'), 'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'), |
これは.env側で言語設定があれば、そちらが反映されます。なければconfig側の設定が有効になるという意味です。
日本語翻訳
翻訳をご自身で行うのは面倒だという方は、breezejpライブラリがおすすめ。
インストールすると、設定から翻訳まで行ってくれます。
下記2つのコマンドを順番に実行します。
|
1 |
composer require askdkc/breezejp --dev |
|
1 |
php artisan breezejp |
詳細は、ライブラリの公式ページご覧ください。
おまけ：データベースについて
今回はデフォルトで使えるSQLiteを選択しました。
こちらは他のデータベースと比較して、設定がシンプル。インストールがしやすい一方で、大規模なデータ処理には向きません。小規模なプロジェクトや開発環境に向いています。
なおSQLiteは、そのままではデータベースの中身を直接確認したり管理したりすることは困難です。SQLite管理ツールを使うと、データベースやテーブルを視覚的に管理できます。
お好きなものをご利用いただければと思いますが、わたしは現在、DB Browser for SQLiteが気に入っています。
おまけ：Laravel Voltについて
今回はLaravel Voltを使いました。
Livewireは、PHP（コンポーネントファイル）とビューファイル（HTML, Bladeテンプレート）が別々に存在していました。ですがLaravel Voltを使うと、ビューの中にPHPの処理を直接入れられます。
つまり、一つのファイル内にPHPとビューファイル用のコードを入れられます。
【Livewireと、Laravel Voltイメージ図】
機能に大きな差はありませんが、「1ページにすべて書きたい」場合は、Voltがおすすめ。ですが、「やっぱりビューとコードは分けておきたい！」という場合は、おすすめできません。
ちなみにLaravel Voltを選んでも、デフォルトの認証関連のページがLaravel Voltで作成されるだけです。新たに作るファイルはどちらの形でも作成可能です。
さいごに
php.newは、開発環境で手軽にLaravelをいれたいときには便利かと思います。環境構築って、一番初めに行うことですが難易度が高く、多くの方がつまずく部分でもあります。
そういった状況の中で、「まずは手軽にLaravelを使いたい」という場合には、php.newはとても良い方法だと思いました。
ただ、既に別の環境をご利用の場合は、特に変えなくても良いかと思います。
従来の方法でLaravelプロジェクトを作成したい場合は、下記をご覧ください。
▶XAMPP編
▶Laravel Sail編
なお、わたしのほうではLaravelの教科書という学習サイトを運営中です。学習を通じて、Laravelで会員制サイトを作れるようになっています。
【Laravelの教科書を通じて作成する画面例】
現在Laravel8～11までのバージョンがあります。近々、Laravel12バージョンも追加予定です（上記はLaravel12の画面）。ご興味あれば、下記のご案内ページ見てみてくださいね。
基礎編は無料です。
詳細は、こちらのご案内ページご覧ください。
