Livewire

Laravel と Livewire をインストールしてフォームのサンプルプログラムを作成する手順。 プロジェクト名（form）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、formコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、render メソッド を定義しなくても livewire.formは呼び出されます。 生成された formコンポーネント のクラスとビューを次のように置き換えます。 resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。 「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。 resources/views/layouts/app.blade.phpファイル を作成します。 web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。イベントは画面で確認できます。

Laravel と Livewire をインストールして、ファイルアップロードのサンプルプログラムを作成する手順。 プロジェクト名（upload）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、uploadコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.upload は呼び出されます。 生成された uploadコンポーネント のクラスとビューを次のように置き換えます。 resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。 「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。 resources/views/layouts/app.blade.phpファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します public/storage で参照できるように、storage/app/public にリンクをはります。 ブラウザで確認します。

完成系は↓これです。 Laravel と Livewire をインストールして、カウンターのサンプルプログラムを作成してみます。 プロジェクト名（counter）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、counterコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、render メソッド を定義しなくても livewire.counter は呼び出されます。 生成された counterコンポーネント のクラスとビューを次のように置き換えます。 resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。 「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。 resources/views/layouts/app.blade.phpファイル を作成します。 web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 ブラウザでページをリロードすると、レンダリングされた counterコンポーネントが表示されます。「+」ボタンをクリックすると、ページをリロードせずにページが自動的に更新されます。マジック！

「Livewire では、次のように JavaScript でイベント リスナーを登録できます。」 「この機能は実際には信じられないほど強力です。たとえば、Livewire が特定のアクションを実行したときにアプリ内でトースター (ポップアップ) を表示するリスナーを登録できます。これは、Livewire を使用して PHP と JavaScript の間のギャップを埋める多くの方法の 1 つです。」ということで、これは凄い機能だと思います。 更新ボタンが押されて、onModifyメソッド で何か処理を行い、ブレード側 にイベントを発火する例。 Livewireコンポーネント のメソッドで「$this->emit()」でイベントを発火します。 ブレード側の Livewire.onメソッド で modifiedイベント を受け取り、受信したメッセージをダイアログに表示します。

確認ダイアログで「はい」ボタンが押された時に、「Livewire.emit(‘modify’)」で modifyイベント を発火させます。 以下の変更ボタンのように「wire:click=”modify”」となっていれば、リスナーに modifyイベント を登録しなくても 呼び出すことができましたが、wire:click を記載しない場合には、リスナーにイベントを登録する必要がありました。

完成は↓こちらです。 Laravel と Livewire をインストールして、JavaScript で イベントを送信して、ライブワイヤーコンポーネントでイベントを受信してみましょう。 プロジェクト名（liveevent2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーのテキストコンポーネントを作成します。app/Http/Livewire/TextComponent.php ライブワイヤーをテストするビューを作成します。resources/views/liveevent-js.blade.php routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 「JavaScript からイベント送信」ボタンを押すと、JavaScript の Livewire.emit で messageイベント を送信し、ライブワイヤー のテキストコンポーネントで messageイベント を受信します。※単純に、ボタンを押してテキストボックスに値を入れているわけではありません。

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーコンポーネントのアクションメソッドから、イベントを送信して HTMLでイベントを受信してみましょう。 プロジェクト名（liveevent1）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーのイベントコンポーネントを作成します。app/Http/Livewire/EventComponent.php ↓wire:click に $emit を書いてイベントを発生させることもできます。app/Http/Livewire/EventComponent.php ライブワイヤーのテキストコンポーネントを作成します。app/Http/Livewire/TextComponent.php ライブワイヤーをテストするビューを作成します。resources/views/liveevent.blade.php routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 「イベント送信」ボタンを押すと、①wire:click で EventComponent の clickメソッド が呼び出され、その中で messageイベント を発生させます。②HTML の 「Livewire.on」で messageイベント を受信して、「メッセージがキター」のアラートを表示します。③ TextComponent のイベントリスナーでも messageイベント を受信して、画面に値を表示します。

Hooks Description boot コンポーネントがインスタンス化された直後、他のライフサイクルメソッドが呼ばれる前に、リクエストごとに実行されます。（翻訳）私的にはコンストラクタ。 booted コンポーネントがマウントまたはハイドレートされた後、アップデートメソッドが呼ばれる前に、すべてのリクエストで実行されます。（翻訳）マウントの後とハイドレードの後に呼び出される。 mount コンポーネントのインスタンスが作成された直後、render()がコールされる前に一度だけ実行されます。これは最初のページロード時に一度だけ呼ばれ、たとえコンポーネントが更新されたとしても、再び呼ばれることはありません。（翻訳）私的には initメソッド。 プロパティの初期値を設定する。 dehydrate コンポーネントのレンダーの後に呼び出される。この後にコンポーネントが再描画が行われる。例えば dehydrateフック でプロパティの値を変えると、変えた値でコンポーネントが表示される。私的には create メソッド。 dehydrateFoo ↑上の dehydrateフック の後に呼び出される。defydrateFoo は $foo プロパティが定義されていないと呼び出されない。 hydrate コンポーネントのレンダーの前に呼び出される。 hydrateFoo ↑上の hydrateフック の前に呼び出される。 updating Livewireコンポーネントのデータが更新される前に実行される。（翻訳） updated Livewireコンポーネントのデータが更新された後に実行されます。（翻訳） updatingFoo foo という名前のプロパティが更新される前に実行されます。配列のプロパティは、updatingArray($value, $key)のように、配列内の変更する要素を指定するためにこの関数に渡される追加の$key引数を持ちます。（翻訳） updatedFoo fooというプロパティが更新された後に実行されます。配列のプロパティは、上記のように追加の $key 引数を持ちます。（翻訳） updatingFooBar foo プロパティまたは $fooBar や $foo_bar などのマルチワード プロパティのネストされたプロパティ バーを更新する前に実行されます。（翻訳） updatedFooBar fooプロパティ、または$fooBarや$foo_barなどのマルチワード・プロパティにネストされたプロパティ・バーを更新した後に実行されます。（翻訳） 親コンポーネント 子コンポーネント 画面を表示した時のログ …

Livewire ライフサイクル フックについて Read More »