Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails関連

Rails: ビューをきれいに書くのに便利な知られざるヘルパー10種(翻訳)

概要

元サイトの許諾を得て翻訳・公開いたします。

日本語タイトルは内容に即したものにしました。

Rails: ビューをきれいに書くのに便利な知られざるヘルパー10種(翻訳)

Rails(厳密にはActive SupportAction View)には、クリーンなコードを書くのに役立つ非常に優秀なヘルパーがいくつも備わっています。その中から、あまり知られていないが知っておくと重宝するヘルパーをいくつか紹介します。

本記事ではビューレイヤのコードを重視するヘルパーのみを取り上げます。Rails Designerをお買い上げいただければ、ほとんどがそこに含まれていることに気づくでしょう。💡

本記事ではヘルパーを駆け足で紹介します。

🔗 1: class_names

私が必ず使っている唯一のヘルパーです。class_namesは、実際にはtoken_listのエイリアスです。

このスニペットについては別記事がありますのでぜひそちらもご覧ください。基本的に以下のように使います。

class_names("item", { active: item.for_sale?, "out-of-stock": item.out_of_stock? })

🔗 2: current_page?

このメソッドは、指定のパスが現在のページURLと一致するかどうかを知るのに使います。以下のように、ビューのCSSクラスを動的に設定したい場合に便利です。

link_to "Home", root_path, class: ("active" if current_page?(root_path))
link_to "About", about_path, class: ("active" if current_page?(about_path))

🔗 3: parameterize

parameterizeは割と知られているメソッドですが、実はいくつかの引数を渡せることはあまり知られていません。

# 大文字小文字を維持する
"John Smith".parameterize(preserve_case: true)
# => "John-Smith"

# "_"で区切る
"John Smith".parameterize(separator: "_") 
# => "john_smith"

🔗 4: upcase_first

# 最初を大文字にする
"employee salary".upcase_first 
# => "Employee salary"

🔗 5: downcase_first

# 最初を小文字にする
"If I had read Alice in Wonderland".downcase_first
# => "if I had read Alice in Wonderland"

🔗 6: camelize

文字をキャメルケースに変換するcamelizeメソッドには、冒頭を小文字にする:lower引数を渡せます(デフォルトは:upper: 冒頭を大文字にする)。

"visual_effect".camelize(:lower)
# => "visualEffect"

🔗 7: safe_join

safe_joinは、文字列の配列を連結するときに、配列の各要素をHTMLエスケープすることで安全に連結するのに使われます。これは、よく知られているjoin.html_safeの代わりとして使えます。

items = ["Home", "About", "Contact"]
navigation = items.map { |item| tag.li(link_to(item, "/#{item.downcase}")) } 
# => ["<li><a href=\"/home\">Home</a></li>", "<li><a href=\"/about\">About</a></li>", "<li><a href=\"/contact\">Contact</a></li>"]

safe_join(navigation)

🔗 8: excerpt

文字列を抜粋するexcerptメソッドの利用頻度は多くありませんが、知っておくと検索リストページなどを作るときに便利です。

input = "Your team has been fantastic with their quick response times and thorough solutions. We've noticed an improvement in our operations due to your dedicated support."

excerpt(input, radius: 10)
# => ""...fantastic with their quick response times and...""

input = "The project has undergone several changes, and new deadlines have been set for the completion of each phase. The team needs to adjust accordingly to meet the revised goals."

excerpt(input, "deadline", radius: 20)
# => "...changes, and new deadlines have been set..."

🔗 9: inquiry

このinquiryメソッドは、#46786で知りました。以下のように文字列や配列をオブジェクトに変換して、その文字列や要素が存在するかどうかを読みやすい形で調べられます。

"admin".inquiry.admin?
# => true

["pending", "active"].inquiry.pending?
# => true

🔗 10: to_sentence

to_sentenceはほとんどのRails開発者に知られていますが、実は以下のような非常に便利な引数を渡せます。

['apple', 'banana', 'pear'].to_sentence
# => "apple, banana, and pear"

# 最後の2要素の間に'or'を追加する
['apple', 'banana', 'pear'].to_sentence(last_word_connector: ' or ', two_words_connector: ' and ')
# => "apple, banana or pear"

# 最後の2要素の間に'and also'を追加する
['apple', 'banana'].to_sentence(two_words_connector: ' and also ')
# => "apple and also banana"

# 最後の2要素の間に'; and finally, 'を追加する
['apple', 'banana', 'pear'].to_sentence(words_connector: '; ', last_word_connector: '; and finally, ')
# => "apple; banana; and finally, pear"

知られざる便利なヘルパーを他にもご存知でしたら、ぜひ私にもお知らせください

関連記事

Rails: ビューやコンポーネントに条件付きでCSSクラスを追加する(翻訳)

Railsフロントエンド: フォームの.field_with_errorsスタイルを無効にする方法(翻訳)


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。