Laravel10 x Livewire3 環境構築ことはじめ➕α 【2024年度もたぶんOK】

[ジーズアカデミー 技術記事書いてみた編 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/gsacademy)の24日目です！ メリクリー！

2023年12月23日現在での情報を元に、最新のLaravel x livewireの環境構築をステップバイステップで説明します！

いちおう初心者むけに丁寧な説明を心がけます！また、MacとWindows対応です。（でも私的なメモってことで！）

:::note warn
記事で作ったアプリのリポジトリを公開しました！
記事内のやり方とは異なるのでRead.meを参考にしてください！
https://github.com/tatun55/laravel10-livewire3-tailwindcss3-daisyui4
:::

## Livewireと本稿の目的

livewireは、Laravelの注目ライブラリであり、

- 動的なページが少ない記述で作れる
- ReactやVue.jsより学習コストがすくない

といった特徴があります。

ついでに、わたくしの最近のメイン技術スタックであるところの

- tailwindcss（CSSフレームワーク）
- daisyUI（tailwindcssのプラグイン）

をインストールして、viteでホットリロードorコンパイルするところまでをカバーしてみます。

## 前提

極力、環境を問わない無難な方法として、Laravelが提供しているDockerのラッパー的なLaravel Sailを使用します。


:::note warn
Laravel Sail以外にもMac向けには

- Laravel Herd
- Valet

などありますし、Laravelアプリケーションが立ち上がってデータベースが使える環境ができればなんでも良いです。
:::

## STEP 0-1 : PHP8.1以上をインストール

Laravel Sailを使うために、Laravelプロジェクトを作成しなくてはならず、ローカル環境に

- PHP
- Composer

がインストールされている必要があります。ローカル環境にPHPをインストールしてあるかはコマンドラインで

```shell
php -v
```

とすることで確認できます。PHP8.1以上がインストールされていなければ、8.1以上をインストールしましょう。

### STEP 0-1-1 : PHP8.1以上をインストール for Mac

Macの場合、[Homebrew](https://brew.sh/ja/)が便利です。公式サイトを参考にHomebrewをインストールしてください。

```shell
# Homebrew がインストール済みか確認
brew -v

# PHP8.2のインストール例
brew install php@8.2

# 切り替え
brew link php@8.2 --force --overwrite

# バージョンの確認
php -v

```

### STEP 0-1-2 : PHP8.1以上をインストール for Windows

Windowsの場合、 ~~実はよくわからないのですが~~ XAMPPをインストールしてしまうのが手取りばやいようで[公式にも書いてあります。](https://www.php.net/manual/ja/install.windows.tools.php)

## STEP 0-2 : Composerのインストール

ComposerはPHPのライブラリ管理ツールです。PHPで作られた道具を詰め込むための箱みたいな感じですね。

インストールの仕方は[公式サイト](https://getcomposer.org/doc/00-intro.md)に書いてあり、MacとWindowsで異なります。

### STEP 0-2-1 : Composerのインストール for Mac 

公式サイトにはいろいろ方法があり、英語なので、[このページ](https://getcomposer.org/download/)に書いてある方法をサクッと実行しとけばなにも読まないでOKです。

```shell
# インストーラーをダウンロードして、実行後に消す一連のコマンド
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

# 普通パスが通っているであろう場所に本体を移動するコマンド
sudo mv composer.phar /usr/local/bin/composer

# composerコマンドが使えるか確認
composer -v

```

### STEP 0-2-1 : Composerのインストール for Windows

~~例によってよくわからな（ry~~、[インストーラー](https://getcomposer.org/Composer-Setup.exe)があるのでダウンロードして実行しましょう！

## STEP 0-3 : Docker Desktopをインストール

[公式サイト](https://www.docker.com/products/docker-desktop/)からダウンロード・インストールしてください！らくちん！

## STEP 1 : Laravelプロジェクトの作成

Laravelプロジェクトを作成しましょう。

```shell
# `projects`フォルダに作成する例
cd /projects

# `laravel10-livewire3-sample`というフォルダ名で、Laravelプロジェクトを作成するコマンド
composer create-project laravel/laravel laravel10-livewire3-sample

# 作られたフォルダに移動
cd laravel10-livewire3-sample

```

この時点で、`php artisan serve`で起動できますが、これだとローカル環境そのもののPHPを使っているのでコンテナ化のメリットを受けるためにLaravel sailを使いましょう！

### STEP 2-0 : (オプション)portかぶり対策（別のローカル環境が走っているなど）

```php
# のちのちのため編集
APP_URL="http://localhost:${APP_PORT}"

# `.env`に追記
APP_PORT={任意の番号}
VITE_PORT={任意の番号}
FORWARD_DB_PORT={任意の番号}
```

## STEP 2 : Laravel Sailのインストール

```shell
# Laravel SailをComposerで準備
composer require laravel/sail --dev

# Laravel Sailをインストール
php artisan sail:install

```

## STEP 3 : sail環境立ち上げ

```shell
./vendor/bin/sail up
```

ポート被りなどがなくうまくいっていれば`./vendor/bin/sail up`後にこんな感じになります
```shell
laravel.test-1  |    INFO  Server running on [http://0.0.0.0:80].  
laravel.test-1  | 
laravel.test-1  |   Press Ctrl+C to stop the server
laravel.test-1  | 
laravel.test-1  |   2023-12-23 05:47:14 ................................................... ~ 1s
laravel.test-1  |   2023-12-23 05:47:14 /favicon.ico ...................................... ~ 1s
laravel.test-1  | 
laravel.test-1  |    INFO  Environment modified. Restarting server...  
laravel.test-1  | 
laravel.test-1  |    INFO  Server running on [http://0.0.0.0:80].  
laravel.test-1  | 
laravel.test-1  |   Press Ctrl+C to stop the server
laravel.test-1  | 
```

### STEP 3-1 : (オプション)エイリアスの設定方法
下記を`.zshrc`や`.bazhrc`に追記して、shellプロンプトを再起動してください。
```shell
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
```

そうすると、今後`vendor/bin/sail`の代わりに`sail`が使えます。

## STEP 4 : （動作確認）migrateしてみる。

```shell
# データベースおよびテーブルの作成
sail php artisan migrate

# 成功している場合
INFO  Preparing database.  

Creating migration table ............................................................................................................... 80ms DONE

INFO  Running migrations.  

2014_10_12_000000_create_users_table .................................................................................................. 106ms DONE
2014_10_12_100000_create_password_reset_tokens_table ................................................................................... 25ms DONE
2019_08_19_000000_create_failed_jobs_table ............................................................................................. 61ms DONE
2019_12_14_000001_create_personal_access_tokens_table .................................................................................. 86ms DONE
```

## STEP5 : TailwindCSSとdaisyUIのインストール

`welcome.blade.php`はtailwindcssらしきものが書かれていますが、あれはトラップです。

styleタグ内でwelcomeページに使われているclassが直接定義されているだけで、あれはtailwindcssではない。

あれはトラップです。

:::note warn
welcomeのtailwindcssっぽいやつは、トラップです。
:::

手っ取り早くtailwindcssとdaisyUIまでをインストールするには`package.json`をこうします。

```json
{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.6.1",
        "laravel-vite-plugin": "^1.0.0",
        "vite": "^5.0.0",
        "autoprefixer": "^10",
        "daisyui": "^3",
        "postcss": "^8",
        "tailwindcss": "^3"
    }
}
```

そして以下を実行
```shell
sail npm install
sail npx tailwindcss init -p
```

`tailwind.config.js`を編集
```json
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    theme: {
        extend: {},
    },
    plugins: [require("daisyui")],
    daisyui: {
        themes: [
            "light",
            "dark",
            "cupcake",
            "bumblebee",
            "emerald",
            "corporate",
            "synthwave",
            "retro",
            "cyberpunk",
            "valentine",
            "halloween",
            "garden",
            "forest",
            "aqua",
            "lofi",
            "pastel",
            "fantasy",
            "wireframe",
            "black",
            "luxury",
            "dracula",
            "cmyk",
            "autumn",
            "business",
            "acid",
            "lemonade",
            "night",
            "coffee",
            "winter",
            "dim",
            "nord",
            "sunset",
        ],
    },
}
```

`resources/css/app.css`に追記
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

`welcome.blade.php`のheadタグ最終行に追記

```php

@vite(['resources/css/app.css', 'resources/js/app.js'])

```

```shell
sail npm run dev
```

これでホットリロードききます！

## STEP6 : Livewire3をインストール・テスト

Livewireは3から、Laravel10以上PHP8.1以上が必須になりました。
インストールは下記でOK

```
sail composer require livewire/livewire
```

せっかくなんでdaisyUIのテーマをいじくるLivewireページコンポーネントを作ってみましょう！

```php
# layoutを作成
php artisan livewire:layout

# 作成された`/resources/views/components/layouts/app.blade.php`のheader内に追記
@vite(['resources/css/app.css', 'resources/js/app.js'])

# livewireコンポーネントをつくる
php artisan make:livewire switch-theme


#route/web.phpに追記し、ルート定義
use App\Livewire\SwitchTheme;
Route::get('/switch-theme', SwitchTheme::class);
```

`app/Livewire/SwitchTheme.php`

```php
<?php

namespace App\Livewire;

use Livewire\Component;

class SwitchTheme extends Component
{
    public $theme = 'light';

    public function render()
    {
        return view('livewire.switch-theme');
    }
}

```

`resources/views/livewire/switch-theme.blade.php`

```blade
<div>
    <div class="h-[100vh] p-4" data-theme="{{ $theme }}">
        <div class="label">
            <span class="label-text">Pick the THEME</span>
        </div>
        <select class="select select-bordered w-full max-w-xs" wire:model.change="theme">
            <option disabled>Select a theme...</option>
            @foreach (['light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade', 'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'] as $themeLabel)
                <option value="{{ $themeLabel }}">{{ $themeLabel }}</option>
            @endforeach
        </select>
        <div class="p-4">Buttons</div>
        <button class="btn">Button</button>
        <button class="btn btn-neutral">Neutral</button>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <button class="btn btn-accent">Accent</button>
        <button class="btn btn-ghost">Ghost</button>
        <button class="btn btn-link">Link</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-error">Error</button>
    </div>
</div>

```

いろんなお色が楽しめます。
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888169/f09837c8-17da-acb1-ca26-1e8fb315b46a.gif)


## STEP7 : コンテナのストップ

停止は以下のコマンドで行います。

```shell
sail stop
```

## まとめ
Laravel Sailを使うと、Docker導入の煩わしさが若干軽減されてますかね？ ~~（個人的には圧倒的にValetが好き）~~

## おまけ：認証ライブラリは入れるか入れないか

Laravelの認証ライブラリとして

- Laravel Breeze
- Laravel Jetstream
- Laravel fortify
- Laravel Sanctum
- Laravel Socialite

とごちゃごちゃと、存在しております。

超ざっくりまとめて、

- Laravel Breeze 👈 初心者用：画面ついてくる
- Laravel Jetstream 👈 中級者用：画面ついてくる
- Laravel fortify 👈 中級者用：画面なし
- Laravel Sanctum 👈 API/SPA用
- Laravel Socialite 👈 ソーシャルログイン用

みたいな感じです。

個人的には

- 画面が付いてくるのは使いづらいコンポーネントが勝手についてきていらない
- LivewireはMPAなのでSanctumいらない
- ソーシャルログインオンリーで良い場合は、Socialite使う
- メール認証も使う場合は、完全カスタムで作る

といった事情があるため、`Socialite`以外は使いません。

ビバ・Livewire〜〜〜！！