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


    Type here:
    
    You typed: {{ $message }}

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

    @livewireStyles



    

    @livewireScripts

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

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

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

/livewire/message/

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

Click Here

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

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

他の Laravel 機能との統合

コンポーネントに接続された PHP クラスは、Laravel プロジェクト内の他の PHP クラスと同様に動作します。唯一の違いは、クラスのパブリック プロパティを初期化するために、古典的な __construct クラス コンストラクターの代わりに mount メソッドを使用することです。

{{-- Initial assignment of the the $book property in the ShowBook class --}}


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;
    }
}

保護されたプロパティ $rules を使用して、フロントエンドからバックエンドに送信されるデータの検証制限を構成することもできます。データを検証するには、 validate() メソッドを呼び出す必要があります:

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);
    }
}

または、PHP 属性を使用して、クラス プロパティに必要な検証ルールを宣言できます。

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);
    }
}

一般に、各 Livewire コンポーネントは、Laravel 開発者が Laravel プロジェクト内の PHP クラスに期待する方法で動作します。したがって、Laravel と Vue/React の間で開発プロジェクトを分離する必要なく、リアクティブ Web インターフェイスを作成できます。

Laravel アプリケーションを無料で監視する

Inspector は、ソフトウェア開発者向けに特別に設計されたコード実行監視ツールです。サーバーレベルで何もインストールする必要はありません。Laravel パッケージをインストールするだけで準備完了です。

HTTP モニタリング、データベース クエリの洞察、アラートや通知を好みのメッセージング環境に転送する機能をお探しの場合は、Inspector を無料でお試しください。アカウントを登録してください。

または、Web サイトで詳細をご覧ください: https://inspector.dev