はじめに
「いいね」ボタンに関する機能を実装中の事。まずはカリキュラムベースで開発を進めていました。
ある程度入力し終え、いざ、サイトを見てみるとボタンが反映されていない！？事態に。
何がいけなかったのか。
どのようにして解決したのか記事にまとめてみたいと思います。
環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3
1：まず試したこと
以下の解決につながる1～4+6の事項を試してみましたが、はっきりとは分かりませんでした。
1. CSSやJavaScriptのキャッシュ（キャッシュクリアしても不変）
- ブラウザのキャッシュ: ブラウザが古いキャッシュを使用している場合があるそうなので、ページをリロードorキャッシュをクリア
-
Railsのキャッシュ: 開発環境では、
rails sを再起動することでキャッシュがクリアすることができます
2. HTML構造の問題（構造確認したが問題なし）
-
HTMLが正しく生成されているか確認: 開発者ツール（F12キー）を使って、生成されているHTMLコードを確認します。
<link_to>の生成結果が期待通りか確認してください。 - SVGコード: SVGコードに問題がある場合もあります。他のSVGファイルやアイコンが正しく表示されるか確認し、コードの問題がないかチェックしてください。
3. Railsの設定（問題なし）
-
リンクのパス:
favorite_pathが正しく生成されているか確認してください。Railsのルーティング設定を再確認し、正しいURLが生成されているか確認します。 -
Turbo Streams:
data: { turbo_method: :delete }が正しく設定されているか確認し、関連するJavaScriptやTurbo設定に問題がないか確認してください。
4. コンソールエラー（エラーはなかった）
- JavaScriptエラー: 開発者ツールのコンソールタブでエラーが表示されていないか確認します。JavaScriptエラーがあると、リンクが正しく動作しないことがあります。
5. サーバーログ（見てなかった💦）
- Railsサーバーのログ: サーバーのログにエラーや警告が出ていないか確認します。エラーメッセージが表示されていると、問題の手がかりになります。
6. コードの確認（問題なし）
コードが正しく書かれているか再度確認します。特に次の点に注意してください：
-
method: :deleteとdata: { turbo_method: :delete }の設定が適切か - SVGコードが正しいか
2：入力したコードと開発ツールタブのElementを比較してみる
<div class="my-auto">
<%= post.user.name %>
<%= render 'favorite_buttons', { post: @post } %>
</div>
👆app/views/posts/_post.html.erbに入力したコードは上記。
👇開発ツールのElementは下記になっていました
<div class="flex items-start p-4">
<div class="avatar m-4">
<div class="w-12 rounded-full border border-gray-800"> <!-- 少し角が丸い黒い枠 -->
<img alt="アバター" src="/assets/sample-1b8bd2393ac5829f0b32a2b30b019eca534679bd3a116ead2fc3d274059fb0a9.png">
</div>
</div>
<div class="my-auto">
aaa
</div>
</div>
なぞの空欄発見
この部分を詳しく調べてみると次のようなことがわかりました。
render 'favorite_buttons', { post: @post }の部分で @post という変数を渡していますが、上記のコードでは post という変数を使用しているため、一貫性が欠けているかもしれません。
3：解決後のコード
<!-- アバターとユーザー名 -->
<div class="flex items-start justify-between pt-4 pb-4 px-2">
<div class="flex items-start">
<div class="avatar m-2">
<div class="w-12 rounded-full border border-gray-800"> <!-- 少し角が丸い黒い枠 -->
<%= image_tag post.user.avatar_url, alt: "アバター" %>
</div>
</div>
<div class="my-auto">
<%= post.user.name %>
</div>
</div>
<div class="my-auto">
<%= render 'favorite_buttons', post: post %>
</div>
</div>
・ユーザーネームのところでpostという変数を使用しているから、揃えないといけない
・上記に加え下記コードからもpostにしなければいけないことは明らかでした
👇
<% if current_user.present? && !post.nil? %>
<% if current_user.favorite?(post) %>
<%= render 'unfavorite', { post: post } %>
<% else %>
<%= render 'favorite', { post: post } %>
<% end %>
<% end %>
・_favorite_buttons.html.erbのパーシャルがローカル変数postを期待していたため、postを渡す必要があった。
・@postはパーシャルに自動で渡されるわけではないので、うまく表示されなかった
さいごに
カリキュラムをちゃんと読めば、postという変数をたがいに渡していましたが、私は何をどこで間違えたのか@postで渡していました。
間違えたおかげで仕組みも少し理解できたので、まぁよし！！
今回の記事が何か参考になれば幸いです。