Cursorを使いながら、猫でもわかるHotwire入門 Turbo編をやってみた#2

## 「チュートリアル1 Railsで管理画面を作る」の続き
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/a6f8f183-8bed-41c4-bb31-f708311fe8b3.png)
必須パラメータには図のように`*`がつくはずなのに、ついていなかったので調査。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/d5b68255-4d95-4f50-9ba0-83ba10b04c0d.png)
これかも。yarnは入れていないので動かないはず。`npm run watch:css`に書き換える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/993b00be-004e-45e4-b64a-f864812a9002.png)
動いた。DEPRICATION WARNINGが何件か出ているけど、とりあえず動いているので良さそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/96d43508-a412-40d3-b807-fbe70004addb.png)
各項目の`編集``削除`ボタンと、サイドバーがないので作っていく。

プロンプト：`cats_controllerのindexの各項目に`編集`ボタンと`削除`ボタンをつけて欲しい`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/45cc1fd6-1baf-449c-96e4-43e00710aecf.png)
ボタンを白抜きにしてもらった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/46f3c1b3-4873-4758-9b35-9a63454a81fd.png)

ボタン白抜きくらいは事前に指定したほうが節約できてよかったな...

### ページネーションが気になる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/c7fd2fe2-715a-47d0-9451-552bf5a4776b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/5e063b11-35c6-4cab-b000-fed155c07e0c.png)
惜しい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/204595ff-f9ea-4949-be08-7e1728460b38.png)
いい感じ！

ページネーションの見栄えをいじるだけだけど、結構いろんなファイルを修正している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/28899990-4759-4a44-a441-a6e6ede6fd31.png)

### サイドバー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/72e2b1ac-8f07-45a0-8cd3-7ff63f59a303.png)

最初、他の動物のコントローラーの有無を確認せず、新しいコントローラーを作成して上書きしようとしたのはドキッとした。
細かい指示が必要にはなったけど、大枠を理解してくれるのはありがたい。

### mainに対してPRを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/ea7e62c2-d390-4510-a71a-4f6486be69a7.png)
この画面で返ってこなくなった。おそらくだけど、スクロールを最後まで行わなければならなそうだ。
コミットの題名を見てもらうことで、スムーズにPRを作成できた。

https://github.com/kaisumi/hotwire-tutorial/pull/1

## チュートリアル2 Turboで管理画面をSPA風にする
### ページネーションのTurbo Frames化
ねこ一覧だけTurbo Frames化してみた
<iframe width="560" height="315" src="https://www.youtube.com/embed/RvL9vJhbWb0?si=qpgod0FFz3ZcXYa_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
いぬ一覧でページネーションをめくるとページ全体がリロードされるのに対して、ねこ一覧は該当部分のみがリロードされていてスクロールがリフレッシュされない。

この後、ねこ一覧と同様に他の動物の一覧ページもTurbo Frames化した。

### 検索のTurbo Frames化
> 検索フォームは<turbo-frame>の外側にある。これだとTurbo Frameリクエストにはならない。そんな場合には検索フォームにdata-turbo-frame属性を指定してあげればいい。

なるほど :eyes: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/RvL9vJhbWb0?si=qpgod0FFz3ZcXYa_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

これで合っているのか...？

よくわからなかったので、`↓のようなHTMLになる`と例示されていた部分と比べてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/5630cc62-761a-45f0-8b10-634ee6523445.png)

> ```
> <%# data-turbo-frame="cats-list"によって、Turbo Frameリクエストになる %>
> <form class="cat_search" id="cat_search" data-turbo-frame="cats-list" action="/cats" accept-charset="UTF-8" method="get">
>   ...
> </form>
> ```

合っていそうだけど、検索したらスクロールが初期化されたような🤔

色々調べた結果、やっぱり合っていなかった。正しい結果がこちら

<iframe width="560" height="315" src="https://www.youtube.com/embed/ulqHLOLvSpo?si=6z7LBS8z0AJBnRlc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

### 編集のTurbo Frames化
#### 編集ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/010fc036-1ef3-427c-95c2-2b7f982e2806.png)
カラム幅の調整でドツボにハマりそうだったので、ほどほどで次に移ります...

#### バリデーション

<iframe width="560" height="315" src="https://www.youtube.com/embed/M8XB71uN2O0?si=e_9n0ADp-IL5oO71" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

バリデーションエラーを生じさせてみると、画面には何も変化がなく、ただし保存されていない状態のままになる様子。バックエンドのログには`422 Unprocessable Content`が表示されていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/5e55eaf8-c41f-4200-bbc4-ec0b90d5eafb.png)

Turbo Streamはまた明日