5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ジーズアカデミー 技術記事書いてみた編Advent Calendar 2023

Day 24

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

Last updated at Posted at 2023-12-23

ジーズアカデミー 技術記事書いてみた編 Advent Calendar 2023の24日目です! メリクリー!

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

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

記事で作ったアプリのリポジトリを公開しました!
記事内のやり方とは異なるので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を使用します。

Laravel Sail以外にもMac向けには

  • Laravel Herd
  • Valet

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

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

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

  • PHP
  • Composer

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

php -v

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

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

Macの場合、Homebrewが便利です。公式サイトを参考にHomebrewをインストールしてください。

# 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をインストールしてしまうのが手取りばやいようで公式にも書いてあります。

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

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

インストールの仕方は公式サイトに書いてあり、MacとWindowsで異なります。

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

公式サイトにはいろいろ方法があり、英語なので、このページに書いてある方法をサクッと実行しとけばなにも読まないでOKです。

# インストーラーをダウンロードして、実行後に消す一連のコマンド
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インストーラーがあるのでダウンロードして実行しましょう!

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

公式サイトからダウンロード・インストールしてください!らくちん!

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

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

# `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かぶり対策(別のローカル環境が走っているなど)

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

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

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

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

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

STEP 3 : sail環境立ち上げ

./vendor/bin/sail up

ポート被りなどがなくうまくいっていれば./vendor/bin/sail up後にこんな感じになります

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プロンプトを再起動してください。

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

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

STEP 4 : (動作確認)migrateしてみる。

# データベースおよびテーブルの作成
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ではない。

あれはトラップです。

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

手っ取り早くtailwindcssとdaisyUIまでをインストールするにはpackage.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"
    }
}

そして以下を実行

sail npm install
sail npx tailwindcss init -p

tailwind.config.jsを編集

/** @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タグ最終行に追記


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

sail npm run dev

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

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

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

sail composer require livewire/livewire

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

# 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

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

<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

STEP7 : コンテナのストップ

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

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〜〜〜!!

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?