Livewireのチュートリアル（無料分）を行った備忘録

参考

Laravel環境構築

• Valet：公式
• Valet：記事

Livewire

Livewireチュートリアル

使ったコマンド各種

• php artisan make:livewire hello-world

  以下のファイルを生成する

  • app/Livewire/HelloWorld.php
  • resources/views/livewire/hello-world.blade.php

• php artisan make:livewire create-post --test

  上記のように—testをつけると、更にテスト用のファイルも自動生成される( tests/Feature/Livewire/CreatePostTest.php が作られる )

• php artisan livewire:layout

  以下のファイルを生成する
  resources/views/components/layouts/app.blade.php

• php artisan make:model Post -m

  モデルファイルとマイグレーションファイルを生成

• php artisan make:seeder PostsTableSeeder

  サンプルデータ用のシーダーを作成

• php artisan db:seed --class=PostsTableSeeder

  • シーダーの実行

• php artisan migrate

  • database/migrations/2025_01_01_060500_create_posts_table.php などのテーブル設定ファイルを更新した際に、その内容を反映させる
  • マイグレーションファイルは更新のたびに追加する
    • 追加の際はphp artisan make:migration add_is_archived_to_posts_table --table=postsを実行する

メソッドについて

■mount()

   public function mount()
   {
    dd('hey there');
   }

mount()メソッドはLivewireコンポーネントで自動的に実行されます。Livewireでは、コンポーネントが初期化される際にmount()メソッドが自動的に呼び出される仕組みになっています。
例えば、データベースから初期データを取得したり、プロパティを初期化したりするのに便利です。
したがって、mount()メソッド内にdd('hey there');がある場合、コンポーネントが初期化されるときに自動的に実行され、ブラウザに「hey there」が表示され、スクリプトの実行が停止します

■updated(), updatedTodo() ※Todoにはプロパティ名が入る

updatedメソッドはLivewireの既定のメソッドです。Livewireは、コンポーネントのプロパティが更新されたときに自動的にこのメソッドを呼び出します。
さらに、特定のプロパティに対して個別に処理を行いたい場合は、updated{PropertyName}という形式のメソッドを定義することもできます。例えば、$todoプロパティが更新されたときに特定の処理を行いたい場合は、以下のようにupdatedTodoメソッドを定義できます。

    public function updatedTodo($value)
    {
        $this->todo = strtoupper($value);
    }

CSSの読み込み

<link rel="stylesheet" href="/css/app.css">

この読み込みではpublic/css/app.css のパスが読み込まれる

CSSの条件分岐

<a href="/" @class(['current' => request()->is('/')])>Todos</a>
@classを使用する事でCSSに条件をつけられる。

テストの実行

プレジェクトのルートディレクトリにてターミナルで実行。laravelのデフォルトでテストする機能がある

■php artisan test

全体をテストする

./vendor/bin/phpunit tests/Feature/Livewire/CreatePostTest.php

個別にファイルを指定して実行

便利な拡張機能（VSCode)

■Better PHPUnitの拡張機能

使い方
cmd+shift+p でVSCodeのオプションを開く。
Better PHPUnit: run　を選択する

省略記法

# 通常
<livewire:post-row wire:key="{{ $post->id }}" :post="$post" />

# 省略
<livewire:post-row :key="$post->id" :$post />

SPAリンク

以下のように aタグリンクにwire:navigateを付けると、SPAでリンクの遷移が可能になる

<a wire:navigate href="/" @class(['current'=> request()->is('/')])>Todos</a>

リダイレクトの時もnavigateが使える

# navigate無し 
$this->redirect('/posts');

# navigate有り
$this->redirect('/posts', navigate: true);

tailwind cssの導入

基本的には更新期のTailwind CLIの読み込み方法でOK

Installation - Tailwind CSS

以下を実行する

npm install -D tailwindcss

npx tailwindcss init

• tailwind.config.js は元から作成されていれば、それを使う

• resources/css/app.css

  • 元から生成されており、以下の記述があるが、これは削除する

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

tailwind cssで読み込めるようにpublic配下のpublic/css/app.css に移動する。

npx tailwindcss -i ./public/css/app.css -o ./public/css/output.css --watch
を実行し、ビルドする。その後、以下のように共通のレイアウトファイル内（今回はresources/views/components/layouts/app.blade.php)でlinkタグを使用し読み込む

 <link href="/css/output.css" rel="stylesheet">

Alpinejs

以下に概要が記載あり
Alpine.js