Laravel Livewire使い方講座①リアルタイムバリデーション付フォームを作ってみよう

Livewire

Laravel Livewireを使えば、ページを読み込みなおさずにページに表示される内容を更新することができます。リアルタイムバリデーションなどを実現できます。

「できたらBladeファイルを使ったまま、Vue.jsみたいなことしたい!」

Livewireは、こんなLaravelユーザーたちの隠れた熱いニーズ(?)に応えてくれる便利なライブラリです。

Junko
Junko

このニーズを持つ人がどれほどいるか不明ですが。少なくとも わたしは前はVue.jsを使って開発していた部分で、Livewireを使うようになってきました。

Livewireデビューしてみたい人のために、リアルタイムバリデーン付フォームを作成しつつ、使い方を解説していきますね。

Laravel Livewireの使い方:リアルタイムバリデーション付フォームを作ってみる

JetstreamのLivewire版であれば、最初からLivewireが入っています。そうでない場合には、まずはライブラリのインストールから初めていきましょう。

またあらかじめLaravelにBreezeパッケージをインストールしておいてください。今回は、ログイン後に表示されるdashboard.blade.phpファイルを使ってページを表示します。

インストール方法は、下記で詳しく解説しています。

①Livewireインストール

下記コマンドでLivewireをインストールしましょう。

② テンプレートファイル(app.blade.php)編集

Livewireを全ページで使えるようにするには、テンプレートファイル(resources/views/layouts/app.blade.php) を編集します。

<head></head>に下記を入れます。

</body>の上あたりに、下記をいれます。

編集後のページは、下記のようになります。

resources/views/layouts/app.blade.php

③ コンポーネント作成

Livewireコンポーネントを作成します。

今回はFruitという名前のコンポーネントを作りましょう。

プロジェクトで最初のLivewireコンポーネントを作ると、下記のような画面でお祝いしてくれます。

Junko
Junko

「(Livewireの)レポジトリにスターをつけてくれませんか?」と書いてあります。yesでもnoでも、心のままにつけておきましょう。

下記の2つのファイルができます。

  • app/Http/Livewire/Fruit.php
  • resources/views/livewire/fruit.blade.php

Fruit.phpは、コントローラのように、処理を入れる部分です。fruit.blade.phpには、表示部分を入れていきます。

まずはfuit.blade.phpファイルに、下記のようにコードをいれておきましょう。

resources/views/livewire/fruit.blade.php

ポイントを解説します。

  • ポイント①:wire:submitとあります。これによってフォームを送信すると、Fruit.phpのsubmitメソッドのコードが実行されます。
  • ポイント②:wire:model=”name”の部分ですが、こちらは nameプロパティとバインドしている(紐づいている)部分です。バインドと読んだりします。これによって、入力した値に対してリアルタイムに処理を実行できます。

④ マイグレーションとモデル作成

マイグレーションとモデルファイルを作っておきます。

モデルファイルには、fillableを入れて、フォームから入力された値が保存されるようにしておきます。

app\Models\FruitName

マイグレーションファイルには、下記のように一行追加しておきます。php artisan migrateを実行して、データベースにテーブルを作っておきましょう。

database/migrations/(日付)create_fruit_name_table.php

⑤ ビューファイルを編集

今回は、既存のdashboard.blade.phpファイルを使いましょう。

既存コードを削除し、下記のコードを入れます。

resources/views/dashboard.blade.php

ポイントは、@livewire(‘fruit’)の部分。これによって、resources/views/livewire/fruit.blade.phpファイルの内容を埋め込むことができます。

実際にどのようになっているか、確認してみましょう。ログインして、dashboard画面を表示すると、次のように表示されます。

今のままでは、ボタンを押しても、入力内容は保存されません。保存機能も搭載しておきましょう。

⑥ 保存機能を追加

app/Http/Livewire/Fruit.phpを開きます。デフォルトでは、ページを表示するための下記コードが入っています。

ここに、次のように、3箇所にコードを加えておきます。

app/Http/Livewire/Fruit.php

これで準備OKです。実際にフォームに値を入力して、データベースに保存されているかチェックしてみてくださいね。

Junko
Junko

「りんご」を登録すると、データベースには次のように入ります。

⑦ リアルタイムバリデーション搭載

一応保存機能はつけました。ただこれではあまり、Livewireの醍醐味を感じられませんよね。

ここにリアルタイムバリデーションをつけてみましょう。

まずはビューのinputタグの下あたりに、下記を追加します。

resources/views/livewire/fruit.blade.php

次にLivewire/Fruit.phpのpublic $nameの下に下記のバリデーションルールとエラーメッセージを追加します。

app/Http/Livewire/Fruit.php

さらに、updatedメソッドもいれます。

これで準備OKです。再びフォームに値を入力してみましょう。

6文字以上を入れると、リアルタイムで警告がでてくるはずです。

最初は「おお♪」って思いました。

さいごに

以上Livewireの基本の使い方を説明しました。

こちら、GitHubにコードも置いておいたので、記事だけでは分かりにくかったら、見てくださいね。Tailwind CSSクラスを少しいれて、見栄えも良くしておきました。

Junko
Junko

記事と共に、役立ったら、GitHubにスター(★)つけてもらえると、励みになります♪

なおLaravelは、Vue.jsも使えます。Vue.jsを使って作成したクイズアプリは下記にあります。良かったらクイズも楽しんでいってくださいね。

Livewire

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました