0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

「チュートリアル1 Railsで管理画面を作る」の続き

image.png
必須パラメータには図のように*がつくはずなのに、ついていなかったので調査。
image.png
これかも。yarnは入れていないので動かないはず。npm run watch:cssに書き換える。

image.png
動いた。DEPRICATION WARNINGが何件か出ているけど、とりあえず動いているので良さそう。

image.png
各項目の編集``削除ボタンと、サイドバーがないので作っていく。

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

image.png
ボタンを白抜きにしてもらった

image.png

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

ページネーションが気になる

image.png

image.png
惜しい

image.png
いい感じ!

ページネーションの見栄えをいじるだけだけど、結構いろんなファイルを修正している。
image.png

サイドバー

image.png

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

mainに対してPRを作成する

image.png
この画面で返ってこなくなった。おそらくだけど、スクロールを最後まで行わなければならなそうだ。
コミットの題名を見てもらうことで、スムーズにPRを作成できた。

チュートリアル2 Turboで管理画面をSPA風にする

ページネーションのTurbo Frames化

ねこ一覧だけTurbo Frames化してみた

いぬ一覧でページネーションをめくるとページ全体がリロードされるのに対して、ねこ一覧は該当部分のみがリロードされていてスクロールがリフレッシュされない。

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

検索のTurbo Frames化

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

なるほど :eyes:

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

よくわからなかったので、↓のようなHTMLになると例示されていた部分と比べてみる
image.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>

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

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

編集のTurbo Frames化

編集ボタン

image.png
カラム幅の調整でドツボにハマりそうだったので、ほどほどで次に移ります...

バリデーション

バリデーションエラーを生じさせてみると、画面には何も変化がなく、ただし保存されていない状態のままになる様子。バックエンドのログには422 Unprocessable Contentが表示されていた。
image.png

Turbo Streamはまた明日

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?