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

## 参考
### Laravel環境構築
* Valet：[公式](https://laravel.com/docs/11.x/valet)
* Valet：[記事](https://reffect.co.jp/laravel/laravel-valet-install)

### 既存のプロジェクトをCloneしてLivewireの環境構築をする方法
基本はこの記事に記載
* [Laravel Valet でgit cloneしたアプリの開発環境を構築する方法](https://qiita.com/H-Toshi/items/be8769a3bcac7d119144)
* Valet：[公式](https://laravel.com/docs/11.x/valet)

以下のコードを該当のCloneしたディレクトリで実行
```
brew update
brew install php
composer global require laravel/valet
valet install
valet park
npm install
composer install
cp .env.example .env
```

### 余談（composer installがPHPのバージョンが合わずこけた時）
以下を実行してphpのバージョンを変更する
```
# 現在インストールされているPHPバージョンを確認
brew list | grep php

# PHP 8.3をインストール（推奨）
brew install php@8.3

# PHP 8.3に切り替え
brew unlink php
brew link php@8.3

# PHPバージョンの確認
php -v
```

上記実行後
valet status コマンドでvaletの起動状態を確認する。
全てYes出ない場合、該当する箇所を修正する。
今回はErrorになった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/953bcb2b-2d4f-df9b-edbe-61ac4bdd3e76.png)

この場合は以下で修正する
```
# 現在のPHPをアンリンク
brew unlink php

# PHP 8.3 をリンク
brew link php@8.3
```

### Livewire
[Livewireチュートリアル](https://livewire.laravel.com/screencast/getting_started/actions?autoplay=true)

### 使ったコマンド各種

- **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()

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

```
mount()メソッドはLivewireコンポーネントで自動的に実行されます。Livewireでは、コンポーネントが初期化される際にmount()メソッドが自動的に呼び出される仕組みになっています。
例えば、データベースから初期データを取得したり、プロパティを初期化したりするのに便利です。
したがって、mount()メソッド内にdd('hey there');がある場合、コンポーネントが初期化されるときに自動的に実行され、ブラウザに「hey there」が表示され、スクリプトの実行が停止します
    
    
#### ■updated(), updated`Todo`() ※Todoにはプロパティ名が入る
updatedメソッドはLivewireの既定のメソッドです。Livewireは、コンポーネントのプロパティが更新されたときに自動的にこのメソッドを呼び出します。
さらに、特定のプロパティに対して個別に処理を行いたい場合は、updated{PropertyName}という形式のメソッドを定義することもできます。例えば、$todoプロパティが更新されたときに特定の処理を行いたい場合は、以下のようにupdatedTodoメソッドを定義できます。
    
```php
    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　を選択する
    

### 省略記法

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

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

### SPAリンク
以下のように aタグリンクに```wire:navigate```を付けると、SPAでリンクの遷移が可能になる
```php
<a wire:navigate href="/" @class(['current'=> request()->is('/')])>Todos</a>
```

リダイレクトの時もnavigateが使える
```php
# navigate無し 
$this->redirect('/posts');

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

## tailwind cssの導入

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

[Installation - Tailwind CSS](https://tailwindcss.com/docs/installation)

以下を実行する

```npm install -D tailwindcss```

```npx tailwindcss init```

- tailwind.config.js は元から作成されていれば、それを使う
- resources/css/app.css
    - 元から生成されており、以下の記述があるが、これは削除する
    
    ```jsx
    @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タグを使用し読み込む
    
 ```php
  <link href="/css/output.css" rel="stylesheet">
 ```
    

## Alpinejs
以下に概要が記載あり
[Alpine.js](https://alpinejs.dev/)