livewireで誕生日から年齢を自動計算するサンプルさてさて、このブログの記事を書くために常日頃からネット上からいろいろな情報を集めるようにしているのですが、それでもはやり限界があって全ての新しい情報を取得することは難しいものです。先日も私のクライアントさんとお話させていただいた際に教えていただいたのですが、なんでもlivewireというLaravel用のコンポーネント・システムが公開されているとのことでした。(いつも有益な情報ありがとうございます😊✨)早速調べてみたところ、livewireのコンセプトは「最近のJavaScriptはちょっとしたことするだけなのに、複雑な作業が必要。いうのやめよう!」といったものでした。たしかに、最近のLaravelでJavaScriptのコードを変更する際には、npmを使って変更をwatchして、(自動とはいえ)ビルドの完了を毎回待って、やっとできたと思ったらまた変更が必要で・・・再読込が追いつかない・・・(以下繰り返し)みたいな状況になっているので、livewireのコンセプトはとても賛成できるものでした。(私自身もビルドはnpmのパッケージのみで独自のコードは直接Bladeに書き込む形式をとっています)そこで!今回は、そんな気になるlivewireの使い方を分かりやすくまとめてみることにしました。合わせて読みたいlivewireの仕組みlivewireといっても、composerでインストールできるパッケージの1つでLaravelが採用しているテンプレート・エンジンのBladeを利用してコンポーネントを描画します。コンポーネントの内容をリアルタイムに変更(例えば、テキストの表示/非表示の切り替え)できるのですが、これはAjaxを通してPHP側からHTML(DOM)を取得して自動で行ってくれます。そのリアルタイム変更に必要なJavaScriptコードはlivewireのパッケージがすでに用意してくれているので独自にコードを書く必要はありません。やりたいこと今回は、以下のように誕生日(年・月・日)を入力すると自動的に年齢を計算して表示してくれるコンポーネント「birthday」を作ってみます。「日」のセレクトボックスは各月に合わせて28日〜31日が自動的に変更されるようにし、さらに「うるう年」の場合は2月29日も表示するようにします。実際にlivewireをインストールしてコードを書いていきましょう!livewireをインストールする先ほども言いましたがlivewireはcomposerにパッケージが用意されていますので、以下のコマンドだけでインストールが完了します。calebporzio/livewirelivewireに必要なファイルを作成するファイルの作成はlivewireが用意してくれているartisanコマンドで作成することができます。以下のコマンドを実行してください。birthdayすると、以下2つのファイルが自動的に作成されます。コンポーネントのテンプレートコンポーネントに必要なコードを追加する先ほど作成した2つのファイルに必要なコードを追加していきます。それぞれみていきましょう。PHPクラス中身はlivewireが用意しているComponetクラスを拡張する形になっています。中身を以下のように変更してください。}}まず、ここで重要なのが「publicメンバ変数」です。今回のコードでは5つの変数を宣言していますが、これらは自動的に/resources/views/livewire/birthday.blade.phpの中で、通常のBladeのように変数として利用することができます。}}続いてmount()ですが、これはコンポーネントの準備ができた時点で呼ばれるメソッドです。コンポーネントの呼び出しは以下のようになりますが、このmount()に引数を用意しているとその次のようにデフォルト値を指定することも可能になります。31)また、onChange()は(年・月・日)が変更されたときに実行されるメソッドですが、この中では以下2つのことを行っています。「日」のセレクトボックスの内容を変更(28日〜31日)年齢を計算Bladeテンプレートでは、コンポーネントのテンプレート/resources/views/livewire/birthday.blade.phpにもコードを追加していきましょう。@endif</div>この中でやっていることは、(年・月・日)のセレクトボックスと年齢を表示しているだけですが、重要なのは「日」のセレクトボックスにある$last_day_of_monthの部分です。この数字が条件によって28日〜31日に変更されることになるからです。年齢は-1(初期値)の場合は表示をしないようにしています。コンポーネントを表示させるでは、ここまでで作成したコンポーネントをLaravelのページに表示させてみます。いっても、livewire専用のディレクティブが用意されているのでビュー内で以下のようにするだけです。@livewireAssets</body></html>この中で、@livewire()がコンポーネントの呼び出しで、@livewireAssetsがAjaxなどに必要なJavaScriptコードを描画するディレクティブになります。テストしてみる(動画あり)では、今回作成したlivewireコンポーネントを実行してみましょう!(2000年はうるう年なので、2月が29日まであることに注目して見てください)うまくいきました!お疲れ様でした😊✨おわりにということで、今回ははじめてlivewireに挑戦してみましたが、使ってみた感想としては、「直感的で使いやすい!」でした。いうのも、livewireと言ってもテンプレートはBladeと同じですし、PHP側も通常よくあるクラスのパターンと同じなので、Laravelを使ってる方でしたらすぐ使えるようになると思います。JavaScriptコードもすでに用意してくれていますしね😚ただ、一点だけこれからの開発に期待したい部分があって、それが「バインディングデータをJavaScript側から取得しやすくしてほしい」というものでした。いうのも、livewireコンポーネント内の値を取得するには、document.getElementByIdやdocument.querySelectorを使って取得する必要があるようなのですが、コンポーネントを同じページで複数使う場合は少しややこしくなってしまいます。id="partners-birthday"></lw:birthday>Vueのように値が直接アクセスできればより便利かなと感じました。注:このやり方は存在しませんlivewire.$refs['my-birthday'].year;といっても、現時点でGitHubのスターが781となっていて相当注目を集めているので、きっとこれから進化していくと思います。いうことで、私もこれからのlivewireに注目したいと思います。requestとかしてみようかな)ぜひ、皆さんもlivewireに挑戦してみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。