【Ruby】検証ツールでidがidのまま表示される理由
はじめに
現在Ruby on Railsにて個人開発を行なっております。
いいね機能を作成する中で、クリックしてもいいねボタンが反応しないという現象が起きました。
検証ツールで確認したところ、comment_idが任意のid番号ではなく、comment_idとして文字列のまま表示されていました。
今回はすぐに原因を特定できましたが、以前カリキュラム学習中にも同じ間違いをしたことがありました。
今後は自分自身が同じ過ちを犯さないために、また同じ現象で悩んでいる方のお役に立てればと思い記事として残したいと思います。
参考になりましたら幸いです。
環境
Rails 7.1.3.4
検証ツールでidがidのまま表示される理由は？
上記理由は文字列の中で式展開をさせるのに、ダブルクウォーテーションではなく、シングルクウォーテーションを使っていたからです。
下記が実際の検証ツールの要素タブから確認できる内容です。
-
シングルクウォーテーションで式展開を試みた場合
このようにid: 'first-favorite-#{comment.id}'と、シングルクウォーテーションで式展開を試みても、comment.idの値が正しく展開されておらず、期待通りの文字列が得られていません。
そのためこのままいいねボタンをクリックしても、ボタンは何も反応しません。
-
ダブルクウォーテーションで式展開している場合
id: "first-favorite-#{comment.id}"と、ダブルクウォーテーションで式展開を試みると、comment.idの値が正しく展開され、いいねボタンも反応するようになります。
シングルクウォーテーションとダブルクウォーテーションの違い
Rubyにおけるシングルクウォーテーションとダブルクウォーテーションの違いに関しては、「ruby single double quotes」などと検索すると、多くの記事が見つかります。
その中でもこちらに記載ある通り、シングルクウォーテーションとダブルクウォーテーションの大きな違いの一つが、
string interpolation(文字列補完)
です。
Interpolation: One of the key distinctions between single and double quotes is string interpolation. Double-quoted strings allow for interpolation, which means you can embed variables and expressions directly within the string.
string interpolation、日本語で訳すと文字列補完とはWikipedia
プログラミングにおいて、文字列補間（もじれつほかん、string interpolation）とは、文字列リテラル内に埋め込まれたプレースホルダーを実行時に評価し、そのプレースホルダーを対応する値に置き換える処理である。変数補間 （へんすうほかん、variable interpolation）、変数置換（へんすうちかん、variable substitution）、変数展開（へんすうてんかい、variable expansion）ともいう。（参照：Wikipedia）
を指しており、まさに今回の変数展開のことを指しています。
その他の違いに関しては、こちらの記事に詳細記載あるため、こちらご覧いただくとわかりやすいかと思います。
今回なぜこの記事を書こうと思ったのか
私が最初にこの問題につまづいたのは、プログラミング学習を始めて3ヶ月目（2024/3/6）でした。
その時は検証ツールを確認しても、なぜidのまま表示されてしまうのか、その原因がわかりませんでした。
スクール内のチャットサービス内で、上記問題を呟いた際に同期の方が解決に導いてくださったので、その時は自力で解決できませんでした。
仮に自力で解決しようとしても、シングルクウォーテーションとダブルクウォーテーションの違いと気がつくのは相当時間がかかったと思います。
「シングルクウォーテーションとダブルクウォーテーションの違い」と調べれば、該当記事がたくさんありますが、
初心者の場合その着眼点がない方も多いのではないかと思い、あえて今回のタイトルを
【Ruby】検証ツールでidがidのまま表示される理由にしました。
このタイトルにすることで4ヶ月前の自分と同じように、この現象で悩んでいる方のお役に立てたら嬉しいと思います。
ありがとうございました。
Discussion