【Ruby on Rails】formタグ内で絵文字を出力する

はじめに

先日記事でも投稿しておりますが、Ruby on Railsを使用して技術記事アプリを作成しました。
その中でgem 'ransack'を使用し、記事検索機能を実装しておりますが、
画面上から出来るだけ文字を省きたかったため、虫眼鏡の絵文字で検索できるようにしております。

HTMLで絵文字を表示する方法はこちらの記事を参考に実装させていただきましたが、内容を理解できていない部分があったので今回は記事として投稿させていただきます。
参考になりましたら幸いです。

前提

Rails 7.1.3.4
gem 'ransack'で、検索機能は実装済み

実装方法

修正前は'検索する'という文字で表示していましたが、'🔍'.html_safeとコードを修正することで絵文字で表示されています。

修正前

<%= search_form_for @q do |f| %>
  <%= f.search_field :user_name_or_title_or_body_cont %>
  <%= f.submit '検索する' %>
<% end %>

修正後

<%= search_form_for @q do |f| %>
  <%= f.search_field :user_name_or_title_or_body_cont %>
  <%= f.submit '&#128269;'.html_safe %>
<% end %>

そもそも「&#」とは何か？

はじめは🔍が一塊で虫眼鏡のアイコンを示しているのかと思っていましたが、この認識は異なっておりました。
こちらの記事の冒頭にもあるとおり、&#番号；はHTMLで文字を表示させるために必要な記述になります。

内容がわかりづらい部分があったので、ChatGPTへ🔍の表記方法について確認してみました。

具体的には、&#の後に続く数字（この場合は128269）がUnicodeコードポイントを示していて、これによって特定の絵文字や文字を表現できるようになってる。
例えば、🔍は、数字の部分が「🔍」（虫眼鏡の絵文字）を指している。&#がないと、ブラウザはその数字を普通のテキストとして解釈してしまうから、正しく絵文字が表示されない。
そのため、HTMLで絵文字を表示したい時は、&#を使って文字参照を作ることが重要になります。

Unicodeは、抽象文字を表現するために割り当てられた番号のことを示しているそうです。（参照:MDN）

絵文字のUnicodeコードポイントを探してみると、このサイトに辿り着きました。
このサイトで「try it」ボタンを押してみると、確かにHTMLで絵文字を表示するために、番号の前に&#を追記することで絵文字として表示されています...!

html_safeメソッド

html_safeメソッドは、こちらの記事に詳しく記載があったので詳細は省かせていただきます。
Railsがよしなにやってくれてしまっていることを止めるメソッドという風に理解しました。

Railsでは自動でこういった文字をエスケープしてブラウザ上でHTMLとしての解釈ではなく、文字としての記号として表示するようにしている。
しかし、場合によってはエスケープせずに<%=%>の中の[<],[>],[&],["]といった記号をHTMLとしての意味として使いたい場合がある。
こういった場合は、<%=%>の中で自動でエスケープされてしまうのを止めることでHTMLとして[<],[>],[&],["]といった記号を使う事ができる。
このような自動でエスケープされてしまうのを止めるメソッドが、[html_safe]メソッドです。

最後に

実装で少し理解が浅かった部分に関して、記事にすることで理解を深めることができました。
間違っている部分等ありましたら、優しくご指摘いただけますと幸いです。
最後までご覧いただき、ありがとうございました。