Livewire

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などのマルチワード・プロパティにネストされたプロパティ・バーを更新した後に実行されます。（翻訳） 親コンポーネント 子コンポーネント 画面を表示した時のログ […]

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーの親子のコンポーネントを作成してみます。 プロジェクト名（oyako2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php イベントをキャッチするには「protected $listeners」に定義します。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php 親にイベントを送るには「emit()->up()」を使います。 ライブワイヤーをテストするビューを作成します。resources/views/livewire.blade.php routes/web.php にルートを定義します。 これでブラウザでアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードから子コンポーネントのテキストボックスに何か入力すると、隣と下の文字（「親から値を設定１」）が変わります。子コンポーネントからイベントを発行して、親コンポーネントのプロパティを変更することができました。 今回、子コンポーネントの dehydrateフック でイベントを発行しました。当初は updatedフック でイベントを発行していました。テキストボックスに入力した場合には、updatedフック が呼び出されますが、クリアボタンを押してプロパティを書き換えた場合には、updatedフック は呼び出されません。dehydrateフック でイベントを発行しない場合は、updateフック と clickメソッド でイベント発行しなくてはなりません。

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーの親子のコンポーネントを作成してみます。 プロジェクト名（oyako1）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php ライブワイヤーをテストするビューを作成します。resources/views/livewire.blade.php routes/web.php にルートを定義します。 これでブラウザから /livewire でアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードからテキストボックスに何か入力すると、隣の文字（「親から値を設定」）が変わります。子コンポーネントが正しく動作しています。 次に、親コンポーネントで子コンポーネントの値を受け取るにはどうしたらいいのでしょうか？続く・・・

①ライブワイヤーコンポーネントでは IDプロパティ は定義できない。 ②ライブワイヤーコンポーネントで renderメソッド を定義しない場合は、以下のファイルが使われる。 ③ライブワイヤーコンポーネントには、ブレードコンポーネントにはあった {{attributes}} が無い。 ④ライブワイヤーのアクションを実行する前に、JavaScript で確認を入れる書き方。 ⑤ライブワイヤーコンポーネントを動的に作成する場合は、wire:key を設定する。 ⑥ライブワイヤーコンポーネントの表示の仕方。 ↓はPHP7 以降の書き方なので、こちらの方が新しい。 ↓は過去の書き方。 ⑦ライブワイヤーコンポーネントのプロパティを設定する。 ⑧JavaScript でライブワイヤーコンポーネントのプロパティを設定する。 ⑨JavaScript でフォームの値を変更した場合にライブワイヤーコンポーネントのプロパティを更新するには、フォームで inputイベント を発生させる。 ⑩ライブワイヤーコンポーネントは formタグ で囲む必要はない。 ⑪JavaScript からはコンポーネントを find することはできるが、Componentクラス からは find することはできない。 ⑫JavaScript からは任意のコンポーネントのメソッドを呼び出すことはできるが、Componentクラス からは find できないので、任意のコンポーネントのメソッドを呼び出すことはできない。全体に向けて、イベントを送ること（emit）はできる。

ライブワイヤーコンポーネント（クラス）を作成していた。画面を表示したところ、以下のエラーが表示された。

完成は↓こちらです。 Laravel と Livewire をインストールして、カウンターのサンプルプログラムを作成してみます。 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 次の 2つ のファイルが生成されます。app/Http/Livewire/Counter.php resources/views/livewire/counter.blade.php ※因みに、render メソッド を定義しなくても livewire.counter は呼び出されます。 ※Livewire コンポーネントには単一のルート要素（<div>）が必要です。 ①<livewire:styles />、<livewire:scripts /> を配置します。②コンポーネントは <livewire:some-component /> で配置します。↓のように @livewireStyles と @livewireScripts。コンポーネントを @livewire で配置することもできます。@マークの方が旧の書き方です。 ブラウザで確認してみましょう。 生成された counterコンポーネント のクラスとビューを次のように置き換えます。app/Http/Livewire/Counter.php resources/views/livewire/counter.blade.php ブラウザでページをリロードすると、レンダリングされた counterコンポーネント が表示されます。「+」ボタンをクリックすると、ページをリロードせずにページが自動的に更新されます。JavaScript を１行も書いていません。マジックです！