Laravel Livewire: それとは何か、そしてそれを Web アプリで使用する方法-PHPチュートリアル-php.cn

Laravel Livewire: それとは何か、そしてそれを Web アプリで使用する方法

WBOY

リリース： 2024-09-12 10:18:04

オリジナル

909 人が閲覧しました

Livewire は、特にフロントエンド開発を対象とした Laravel エコシステムの中で最も重要なプロジェクトの 1 つです。 Livewire v3 が最近リリースされたので、Livewire とは何なのか、またそのアーキテクチャにどのようなプロジェクトが適合するのかを見てみましょう。

Livewire の特徴は、専用の JavaScript フレームワークを使用せずに「最新の」Web アプリケーションを開発できることです。

Livewire を使用すると、フロントエンドとバックエンドを分離してプロジェクトの複雑さを管理することなく、Vue や React と同等の反応性レベルを提供する Blade コンポーネントを開発できます。 Laravel と Blade テンプレートの範囲内でアプリケーションの開発を続けることができます。

ライブワイヤーの仕組み

Livewire は、Laravel プロジェクトに追加できる Composer パッケージです。次に、適切な Blade ディレクティブを使用して、各 HTML ページ (単一ページアプリケーションを作成する場合はそのページ) でアクティブ化する必要があります。 Livewire コンポーネントは、PHP クラスと、特定のフロントエンドコンポーネントがどのように動作し、レンダリングされる必要があるかのロジックを含む Blade ファイルで構成されます。

ブラウザが Livewire が使用されているページへのアクセスを要求すると、次のことが起こります:

ページは、Blade を使用して作成された他のページと同様に、コンポーネントの初期状態でレンダリングされます。
コンポーネント UI がインタラクションを起動すると、Livewire コンポーネントと発生したインタラクション、およびコンポーネントのステータスを示す適切なルートに対して AJAX 呼び出しが行われます。
データはコンポーネントの PHP 部分で処理され、インタラクションの結果として新しいレンダリングが実行され、ブラウザーに送り返されます。
ページの DOM は、サーバーから受信した変更に従って変更されます。

これは Vue や React の動作と非常に似ていますが、この場合、インタラクションに応答する反応性ロジックは JavaScript 側ではなくバックエンドによって管理されます。

ロジックをよりよく理解できるように、以下にこの比較の例を示します。

開発者主導の会社を構築する際の課題について詳しく知りたい場合は、Linkedin または X で私をフォローしてください。

Laravel Livewireのインストール方法

Livewire のインストールは最小限で済みます。 Laravel プロジェクトに Composer パッケージをインストールし、必要な Blade ディレクティブをすべてのページ (またはプロジェクト内のすべての Blade テンプレートの派生元となる共通レイアウト) に追加します。

composer require livewire/livewire

ログイン後にコピー

<html>
<head>
    ...

    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

ログイン後にコピー

Laravel Livewire コンポーネントの作成方法

Composer パッケージがインストールされると、新しい Artisan make サブコマンドを使用して新しい Livewire コンポーネントを作成できるようになります。各コンポーネントは PHP クラスと Blade ビューで作成されます。

これは、Blade のクラスベースのコンポーネントに似ています。

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

ログイン後にコピー

この例のコンポーネントは、JavaScript コードを記述することなく、HTML 入力フィールドに書き込まれた内容を「スパイ」します。

次に、パブリックプロパティをコンポーネントクラスに挿入します。

// app/Http/Livewire/SpyInput.php

namespace App\Livewire;

use Livewire\Component;

class SpyInput extends Component
{
    public string $message;

    public function render()
    {
        return view('livewire.spy-input');
    }
}

ログイン後にコピー

次のようにコンポーネントビューを実装します。

// resources/views/livewire/spy-input.blade.php

<div>
    <label>Type here:</label>
    <input type="text" wire:model="message"/>
    <span>You typed: <span>{{ $message }}</span></span>
</div>

ログイン後にコピー

そして最後に、Livewire コンポーネントをブレードビューに配置します。

<html>
<head>
    @livewireStyles
</head>
<body>

    <livewire:spy-input />

    @livewireScripts
</body>
</html>

ログイン後にコピー

通常の Blade コンポーネントでは、コンポーネントクラスのすべてのパブリックプロパティがブレードテンプレートに表示されます。したがって、{{ $message }} $message プロパティの値が自動的に表示されます。ただし、通常のクラスベースのコンポーネントでは、これは最初のコンポーネントのレンダリング時にのみ発生します。入力フィールドに何かを入力しても、span タグは何も変更されません。

ただし、Livewire コンポーネントでは、フィールドで Wire:model="message" 属性を使用しました。この属性により、入力フィールドの値が PHP クラスの $message プロパティに確実にリンクされます。入力フィールドに新しい値を書き込むと、その値がサーバーに送信され、$message の値が更新されて新しいレンダリングが実行され、それがフロントエンドに送り返されて、gt;{{ のテキストが更新されます。 $message }}.

ブラウザの開発ツールの [ネットワーク] タブを開くと、キーボードのキーを押すたびに、以下のルートでサーバーが呼び出されることがわかります。

/livewire/message/<COMPONENT-NAME>

ログイン後にコピー

各呼び出しに対する応答には、コンポーネント用に新しくレンダリングされた HTML が含まれており、Livewire は古い HTML の代わりにこれをページに挿入します。さまざまなカスタムワイヤ属性が利用可能です。たとえば、ボタンをクリックしたときにコンポーネントクラスのパブリックメソッドを実行できます。この入札の例は次のとおりです:

<button wire:click="doSomething">Click Here</button>

ログイン後にコピー

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

ログイン後にコピー

doSomething は、Livewire コンポーネントの PHP クラスのパブリックメソッドです。

Integration with other Laravel features

The PHP class connected to the component behaves like any other PHP class in a Laravel project. The only difference is that it uses the mount method instead of the classic __construct class constructor to initialize the public properties of the class.

{{-- Initial assignment of the the $book property in the ShowBook class --}}
<livewire:show-book :book="$book">

class ShowBook extends Component
{
    public $title;
    public $excerpt;

    // "mount" instead of "__constuct"
    public function mount(Book $book = null)
    {
        $this->title = $book->title;
        $this->excerpt = $book->excerpt;
    }
}

ログイン後にコピー

You can also use the protected property $rules to configure the validation restrictions on the data sent from the frontend to the backend. You have to call the validate() method to validate the data:

<form wire:submit.prevent="saveBook">
    <input type="text" wire:model="title"/>
    @error('title') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="excerpt"/>
    @error('excerpt') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="isbn"/>
    @error('isbn') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Book</button>
</form>

ログイン後にコピー

class BookForm extends Component
{
    public $title;
    public $excerpt;
    public $isbn;

    protected $rules = [
        'title' => ['required', 'max:200'],
        'isbn' => ['required', 'unique:books', 'size:17'],
        'excerpt' => 'max:500'
    ];

    public function saveBook()
    {
        $validated = $this->validate($this->rules);

        Book::create($validated);

        return redirect()->to('/books);
    }
}

ログイン後にコピー

Or you can use PHP Attributes to declare the desired validation rules for a class property:

class BookForm extends Component
{
    #[Validate('required|max:200')]
    public $title;

    #[Validate('required|unique:books|size:17')]
    public $isbn;

    #[Validate('max:500')]
    public $excerpt;

    public function saveBook()
    {
        $this->validate();

        Book::create([
            'title' => $this->title,
            'isbn' => $this->isbn,
            'excerpt' => $this->excerpt,
        ]);

        return redirect()->to('/books);
    }
}

ログイン後にコピー

In general, each Livewire component behaves in the ways that a Laravel developer expects from a PHP class inside a Laravel project. Thus allowing the creation of reactive web interfaces without the need to separate the development projects between Laravel and Vue/React.

Monitor your Laravel application for free

Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the Laravel package and you are ready to go.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

Laravel Livewire: What it is, and how to use it in your web app