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

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

    ...

    @livewireStyles


    ...

    @livewireScripts

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 コンポーネントをブレード ビューに配置します。

    @livewireStyles



    <spy-input></spy-input>

    @livewireScripts

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

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

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

/livewire/message/<component-name>
</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 --}}
<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;
    }
}
</show-book>

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:

@error('title') {{ $message }} @enderror @error('excerpt') {{ $message }} @enderror @error('isbn') {{ $message }} @enderror Save Book

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: それとは何か、そしてそれを Web アプリで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。