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ビューには、確実にルート要素を1つだけ入れてください。

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`

ドキュメント章別ページ

ヘッダー項目移動

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

移動

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

言語
バージョン

設定

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

カラーテーマ
和文指定 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によるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

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

オープン操作

PDC

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

HA

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

MS

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

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

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

BK

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

その他

?

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