Livewire 2.x コンポーネントのレンダー

深く掘り下げたスクリーンキャストがある、Livewireに驚いてください。観る（英語版）

インラインコンポーネント

ページ上にLivewireコンポーネントをレンダーする最も基本的な方法は、<livewire：タグ構文を使用することです。

<div>
    <livewire:show-posts />
</div>

もしくは、@livewireBladeディレクティブを使用することもできます。

@livewire('show-posts')

独自の名前空間を持つサブフォルダー内にコンポーネントがある場合は、名前空間のプレフィックスとしてドット（.）を使用する必要があります。

たとえば、app/Http/Livewire/Navフォルダ内にShowPostsコンポーネントがある場合は、以下のように指定します。

<livewire:nav.show-posts />

パラメータ

パラメータの指定

<livewire：タグに追加のパラメータを指定することで、データをコンポーネントに渡せます。

たとえば、show-postコンポーネントがあるとします。$postモデルを渡す方法は次のとおりです。

<livewire:show-post :post="$post">

もしくは、以下のようにBladeディレクティブを使用してパラメーターを渡します。

@livewire('show-post', ['post' => $post])

パラメータの受け取り

Livewireはパラメータを一致するパブリックなプロパティへ自動的に割り当てます。

たとえば、<livewire:show-post :post="$post">の場合、show-postコンポーネントに$postという名前のパブリックプロパティがあれば、自動的に割り付けます。

class ShowPost extends Component
{
    public $post;

    ...
}

何らかの理由でこの自動動作がうまく機能しない場合は、mount()メソッドを使用し、パラメータをインターセプトできます。

class ShowPost extends Component
{
    public $title;
    public $content;

    public function mount($post)
    {
        $this->title = $post->title;
        $this->content = $post->content;
    }

    ...
}

Tip!! 皆さんおなじみのクラスコンストラクター __construct() の代わりに、Livewireコンポーネントではmount()を使用します。

コントローラーと同様に、タイプヒントのパラメーターを前に追加することにより、依存関係を注入できます。

use \Illuminate\Session\SessionManager;

class ShowPost extends Component
{
    public $title;
    public $content;

    public function mount(SessionManager $session, $post)
    {
        $session->put("post.{$post->id}.last_viewed", now());

        $this->title = $post->title;
        $this->content = $post->content;
    }

    ...
}

フルページコンポーネント

ページのメインコンテンツがLivewireコンポーネントである場合、コントローラーであるかのようにコンポーネントをLaravelのルートへ直接渡せます。

Route::get('/post', ShowPosts::class);

デフォルト動作としてLivewireは、ShowPostsコンポーネントをresources/views/layouts/app.blade.phpにあるBladeレイアウトコンポーネントの{{ $slot }}へレンダーします。

<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>

Laravelコンポーネントの詳細は、Laravelのドキュメント（日本語訳）を参照してください。

レイアウトコンポーネントの設定

デフォルトとは異なるレイアウトファイルを指定する場合は、render()から返すビューインスタンス上で、->layout()メソッドを使用します。

class ShowPosts extends Component
{
    ...
    public function render()
    {
        return view('livewire.show-posts')
            ->layout('layouts.base');
    }
}

コンポーネントでデフォルト以外のスロットを使用している場合は、->slot()をチェーンすることもできます。

public function render()
{
    return view('livewire.show-posts')
        ->layout('layouts.base')
        ->slot('main');
}

他にもLivewireは、@extendsを使用した従来のBladeレイアウトファイルの使用をサポートしています。

以下のレイアウトファイルがあるとします。

<head>
    @livewireStyles
</head>
<body>
    @yield('content')

    @livewireScripts
</body>

これを参照するようにLivewireへ指定するには、->layout()の代わりに->extends()を使います。

public function render()
{
    return view('livewire.show-posts')
        ->extends('layouts.app');
}

コンポーネントが使用する@sectionを指定する必要がある場合は、->section()メソッドを使用し、指定できます。

public function render()
{
    return view('livewire.show-posts')
        ->extends('layouts.app')
        ->section('body');
}

コンポーネントからレイアウトにデータを渡す必要がある場合は、layoutメソッドでデータを渡せます。

public function render()
{
    return view('livewire.show-posts')
        ->layout('layouts.base', ['title' => 'Show Posts'])
}

ルートパラメータ

多くの場合、コントローラーメソッド内のルートパラメーターにアクセスする必要があります。コントローラを使用しないため、Livewireはmountメソッドを使用してこの動作を模倣します。例をご覧ください。

Route::get('/post/{id}', ShowPost::class);
class ShowPost extends Component
{
    public $post;

    public function mount($id)
    {
        $this->post = Post::find($id);
    }

    ...
}

ご覧のとおり、Livewireコンポーネント中のmountメソッドは、パラメーターに関する限りコントローラーメソッドのように機能します。/post/123にアクセスすると、mountメソッドに渡した$id変数には値として123が入ります。

ルートモデルの結合

ご期待のとおり、Livewireコンポーネントはルートモデルの結合などコントローラーが使用しているすべての機能を実装しています。一例をご覧ください。

Route::get('/post/{post}', ShowPost::class);
class ShowPost extends Component
{
    public $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }
}

PHP7.4を使用している場合は、クラスプロパティをタイプヒントすることもでき、Livewireは自動的にルートモデルを結合します。以下のコンポーネントの$postプロパティは、mount()メソッドを必要とせず、自動的に挿入されます。

class ShowPost extends Component
{
    public Post $post;
}

Renderメソッド

Livewireコンポーネントの renderメソッドは、ページの初回読み込み時、「ならびに」それ以降のコンポーネントの更新時に毎回呼び出されます。

Tip!! 単純なコンポーネントでは、renderメソッドを自分で定義する必要はありません。基本のLivewireコンポーネントクラスには、動的なrenderメソッドが含まれています。

Bladeビューを返す

render()メソッドはBladeビューを返すことが期待されているため、コントローラーメソッドの作成と比較できます。以下に例を紹介します。

Note: Bladeビューには、確実にルート要素を１つだけ入れてください。

class ShowPosts extends Component
{
    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::all(),
        ]);
    }
}
<div>
    @foreach ($posts as $post)
        @include('includes.post', $post)
    @endforeach
</div>

テンプレート文字列を返す

Bladeビューに加え、オプションとしてrender()からBladeテンプレート文字列を返せます。

class DeletePost extends Component
{
    public Post $post;

    public function delete()
    {
        $this->post->delete();
    }

    public function render()
    {
        return <<<'blade'
            <div>
                <button wire:click="delete">Delete Post</button>
            </div>
        blade;
    }
}

Tip!! 上記のようなインラインコンポーネントの場合、作成時に--inlineフラグを使用する必要があります。ʻartisan make：livewire delete-post --inline`

ドキュメント章別ページ

概要
クイックスタート リファレンス 1.xからのアップグレード
基本
インストール コンポーネントの作成 コンポーネントのレンダー プロパティ アクション イベント ライフサイクルのフック コンポーネントのネスト
コンポーネントの機能
バリデーション ファイルアップデート ファイルダウンロード クエリ文字列 認可 ペジネーション リダイレクト フラッシュメッセージ トレイト
UIの詳細
ロード状況 ポーリング プリフェッチ オフライン状況 ダーティな状況 遅延ローディング
JSとの統合
AlpineJS Laravel Echo インラインスクリプト
その他
テスト トラブルシューティング パッケージ開発 Artisanコマンド

ヘッダー項目移動

注目：アイコン：ページ内リンク設置（リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

リンク
サイトホーム ページ上部へ
言語
バージョン
2.x

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

P／D／C

ページ（章）移動の左オフキャンバスオープン

H／A

ヘッダー移動モーダルオープン

M／S

移動／設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

N／J

次ヘッダー(H2〜H4)へ移動

B／K

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる