Zenn
🎉

Laravel+Livewireで遊ぶ

2021/02/08に公開
Laravel
tech

追記

CentOS8での環境構築手順の追加
https://zenn.dev/lfz/articles/55ab526f66c1ec

Livewireとは

ポーリングによって半リアルタイム通信を実現するライブラリ

前提

  • Redisインストール済み
  • phpredisまたはpredisインストール済み ※本記事ではphpredisを使います
  • Laravelを触ったことがあり、少なくともLaravel付属のmigrationを流せる事
  • .env設定済み

実践内容

LivewireのQuickstart
https://laravel-livewire.com/

Laravel + Livewireのインストール

Install command
laravel -f new livewire --jet
Message
    |     |         |
    |,---.|--- ,---.|--- ,---.,---.,---.,-.-.
    ||---'|    `---.|    |    |---',---|| | |
`---'`---'`---'`---'`---'`    `---'`---^` ' '


Which Jetstream stack do you prefer?
  [0] livewire
  [1] inertia
 > 0

 Will your application use teams? (yes/no) [no]:
 > no
command
cd livewire
chmod -R 777 /var/www/livewire/storage
php artisan migrate

プログラム作り

1. コンポーネント作成

command
php artisan make:livewire counter
message
 php artisan make:livewire counter
 COMPONENT CREATED  🤙

CLASS: app/Http/Livewire/Counter.php
VIEW:  resources/views/livewire/counter.blade.php

  _._
/ /o\ \   || ()                ()  __
|_\ /_|   || || \\// /_\ \\ // || |~~ /_\
 |`|`|    || ||  \/  \\_  \^/  || ||  \\_

Congratulations, you've created your first Livewire component! 🎉🎉🎉
 Would you like to show some love by starring the repo? (yes/no) [no]:
 > no

作成されたresources/views/livewire/counter.blade.phpがbladeに埋め込むパーツになります。

2. livewireのカウンター処理の作成

app/Http/Livewire/Counter.php
<?php
namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Redis;

class Counter extends Component
{
    public $count = 0;
    private function add(int $num){
        $count = Redis::get('counter');
        $this->count = match(true){
             is_numeric($count) => $count + $num
            ,default => 0
        };
        Redis::set('counter', $this->count);
    }
    public function increment(){
        $this->add(1);
    }
    public function decrement(){
        $this->add(-1);
    }

    public function clear(){
        $this->count = 0;
        Redis::set('counter', $this->count);
    }

    public function render()
    {
        $count = Redis::get('counter');
        $this->count = match(true){
             is_numeric($count) => $count
            ,default => 0
        };
        return view('livewire.counter');
    }
}

3. コンポーネント用のblade作成

resources/views/livewire/counter.blade.php
<div style="text-align: center" wire:poll.5s>
    <div>
        <button wire:click="increment">+</button>
        <button wire:click="decrement">-</button>
        <h1>{{ $count }}</h1>
    </div>
    <div>
        <hr2>Reset Counter</hr2>
        <button wire:click="clear">CLEAR</button>
    </div>
</div>

4. 真っ新なレイアウトファイル作成

command
mkdir resources/views/components
resources/views/components/live.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
        @livewireStyles
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        {{ $slot }}
        @livewireScripts
    </body>
</html>

5. 真っ新なコントローラーとビュー作成

  • コントローラー
command
php artisan make:controller Live/CounterController
app/Http/Controllers/Live/CounterController.php
<?php

namespace App\Http\Controllers\Live;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class CounterController extends Controller
{
    //
    public function index(){
        return view('live.index');
    }
}
  • ビュー
command
mkdir resources/views/live
resources/views/live/index.blade.php
<x-live>
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
            <livewire:counter />
        </div>
    </div>
</x-live>

6. ルーティング設定

routes/web.php
//追加
use App\Http\Controllers\Live\CounterController;
Route::get('/live', [CounterController::class, 'index']);

7. npm run

command
npm update && npm install && npm run dev

動作チェック

ブラウザでタブ二つhttp://localhost/live開いてカウント増やしたり減らしたりして遊びましょう

8. livewire用assetsファイルの書き出し

command
php artisan vendor:publish --tag=livewire:assets

Discussion