はじめに
みなさんLivewire好きですか?
私は最近使い始めて、すごく好きです!!
1からコンポーネントを作るのは好きですか?
作る時間がたくさんあれば良いですが、ない状況だと好きになれません!
- Livewireを使っている or 使いたい
- コンポーネントを1から作る時間がない
この記事はそんなときに役立つと思います!!
Livewireとは
いろんな説明記事があるので調べてみてください。
端的には、JSを書かずにPHPのみで画面構築ができるツールになります!
処理の記載も、Vueライクにかけることも特徴です!
maryUI(メアリーUI)とは
Livewireと組み合わせて利用できるUIコンポーネントです!
(無料で全てのコンポーネントを利用できるのが強くて選びました)
daisyUI(デイジーUI)
をベースに作られているので、
daisyUIに存在するコンポーネントも使える のです。
すごすぎるぞ。
他のUIコンポーネントツール
導入方法
下記を参考にしてください!
書いてみる
フォームがわかりやすいので、フォームで書きます
実際のコード
<?php
use Illuminate\Http\Request;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;
use Livewire\Volt\Component;
new #[Layout("layouts.xxx")] class extends Component {
#[Validate('required|string|email')]
public string $email = '';
#[Validate('required|string')]
public string $password = '';
public function login(Request $request): void
{
// ログインの処理が入る
}
}; ?>
<div>
<x-header title="ログイン画面" separator />
<div class="flex flex-col items-center gap-4">
<x-card class="w-full max-w-lg">
<x-form wire:submit="login" no-separator>
<div class="flex flex-col gap-2">
<x-input
label="メールアドレス"
wire:model="email"
required
placeholder="xxx@sample.jp"
icon="o-envelope"
/>
<x-password
label="パスワード"
wire:model="password"
required
placeholder="************"
password-icon="o-lock-closed"
password-visible-icon="o-lock-open"
/>
<x-slot:actions class="flex flex-col items-center">
<x-button
label="ログイン"
icon="o-arrow-right-end-on-rectangle"
class="btn-sm btn-secondary"
type="submit"
spinner="login"
/>
</x-slot>
</div>
</x-form>
</x-card>
</div>
</div>
実際の画面
これでこんな感じのログインフォームができました!笑
早い!!
PC
スマホ
利用しているコンポーネント
何がすごいか
- 一つのファイルに処理をまとめることができる
- 変数の上の行に
#[Validate('xxx')]と記載すればバリデーションできて視認性が良い - コンポーネントにデータとオプションを渡すだけで形になる!
- コンポーネントは初めからレスポンシブ対応されているので実装不要
- JS全く書いていない、PHPで書くロジックに集中できる
- 今回の処理では書いていないが、変数をリアルタイムで同期ができるのでSPAのような動きが実装できる
処理が膨らんだ場合
Formに逃しましょう。
下記を参考にしてください。
maryUIコンポーネントのオプションでは対応できない場合
ここの色を変えたいけどできない...
この部分の動きをこうしたいけどできない...
といったケースが出てくると思います。
こういった場合はmaryUIのコンポーネントをベースにして自分で調整しましょう。
奥の手でして、ベースコンポーネントのアップデートと乖離するので乱用は避けた方が良いです。
maryUIのコンポーネントを持ってくる
<x-hogehoge /> で参照されるコンポーネントは、
app/View/Components/ 配下にあるものです。
ここにファイルを作ります。
作ったファイルに対して、
https://github.com/robsontenorio/mary/tree/main/src/View/Components
からカスタマイズしたいコンポーネントのソースを持ってきましょう。
あとは処理をいじるなり、CSSをいじるなりです。
最後に
一部をかいつまんで記載しましたが、
ほんとうに早く画面作れます...!
画面としては大体決まったUIになってしまう点がネック...かもですが速さとのバランスですね!
今回Tailwind CSSを初めて書きましたが、もうやめられませんね笑
レスポンシブ対応もサクサクっとできて嬉しいです。
Qiita上にLivewire周りでなさそうな記事があれば、
書いていこうかな〜と考えてます。
どなたかの役に立ちますように!!🙏