Laravel

Livewire 親子のコンポーネントについて oyako1

Livewire / By

完成は↓こちらです。 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 でアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードからテキストボックスに何か入力すると、隣の文字（「親から値を設定」）が変わります。子コンポーネントが正しく動作しています。 次に、親コンポーネントで子コンポーネントの値を受け取るにはどうしたらいいのでしょうか？続く・・・

Laravel ライブワイヤーのメモ

Livewire / By

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

Laravel ログを出力するには？

Laravel / By

ログの基本 Log クラスをインポートする。\Logでもアクセスできます。 Log クラスをインポートしないで、\Logだけでも使えます。 ログに変数の内容を出力するには、第２パラメータに設定する。 ログの出力先は↓こちら。 ログレベルは .env で設定する。例えば info と設定すると、debugレベル のログは出力されなくなる。 ログの種類 debugログ（開発中のログはこれで良いと思う） infoログ noticeログ warningログ errorログ criticalログ alertログ emergencyログ

Laravel blade の if文について

Laravel / By

① @if文 ② @unless文（unless は ifの逆） ③ @isset文 ④ @empty文 ⑤ if文 を自作する。 app/Providers に BladeServiceProvider クラスを作成します。 config/app.php の providers に BladeServiceProvider を追加します。 たったこれだけで、追加した if文 がブレードで使えるようになります。

Laravel bladeの使い方を忘れてしまったので思い出すには？

Laravel / By

①変数の表示 イメージとしては↓。HTMLエスケープ処理されている。 ②変数の表示２ イメージとしては↓。HTMLエスケープ処理がされていない。 ③PHPスクリプト この間に PHPスクリプト を記述することができる。例えば、ブレード内での変数の定義に使えます。 ④コメント ⑤CSRFフィールド formタグの次に書く。 ⑥@extends、@section、@yield の関係 フレームのテンプレートでは、各画面の @section で定義される title、content を、@yield を使って呼び出します。 各画面のテンプレートでは、@section の title、content に画面毎の内容を記述し、@extends を使ってフレームのテンプレートを呼び出します。 ⑦スタック 各画面のテンプレートで @push でスタックに処理を追加する。 フレームのテンプレートでスタックから処理を取り出します。

Livewire を使うには？

Livewire / By

完成は↓こちらです。 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 を１行も書いていません。マジックです！

Scroll to Top