Livewire 2.x クイックスタート

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

Livewireのインストール

まず、PHPでパッケージ取得します。

composer require livewire/livewire

Livewireを使用する全ページで、JavaScriptを取り込みます。

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

    @livewireScripts
</body>
</html>

コンポーネントの作成

以下のコマンドを実行すると、counterという名前の新しいLivewireコンポーネントが生成されます。

php artisan make:livewire counter

このコマンドの実行により、以下の2ファイルが生成されます。

app/Http/Livewire/Counter.php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

resources/views/livewire/counter.blade.php

<div>
    ...
</div>

ブラウザで具体的なものを確認するため、ビューにテキストを追加してみましょう。

Tip!! Livewire components MUST have a single root element.

resources/views/livewire/counter.blade.php

<div>
    <h1>Hello World!</h1>
</div>

コンポーネントの取り込み

Livewireのコンポーネントは、Bladeの取り込みと同様と考えてください。Bladeビューのどこにでも<livewire:some-component />を挿入でき、レンダーされます。

<head>
    ...
    @livewireStyles
</head>
<body>
    <livewire:counter />

    ...

    @livewireScripts
</body>
</html>

ブラウザで閲覧する

Livewireを取り込んだページをブラウザでロードしてください。"Hello World!"を確認できるでしょう。

"counter"機能を追加する

生成したcounterコンポーネントクラスとビューの内容を以下のように置き換えます。

app/Http/Livewire/Counter.php

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

resources/views/livewire/counter.blade.php

<div style="text-align: center">
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

ブラウザで確認する

ブラウザでこのページをリロードしてみましょう。counterコンポーネントがレンダーされたのを確認できるでしょう。+ボタンをクリックするとリロードせずに、自動でページが更新されます。魔法のようです。

Note: 一般にこの"counter"のような些細なコードは、AlpineJSなどにより適していますが、Livewireの動作方法を簡単に理解するためも最良の方法でしょう。

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュを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)へ移動

その他

?

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