【Rails】お世話になったフォーマットヘルパー６選

# はじめに

某スクールでコピーサイト作成時、フォーマットヘルパーさんに大変おせわになりました。
利用したフォーマットヘルパーを幾つかご紹介したいと思います。


##① 改行ありでテキスト表示する
simple_formatと言うヘルパーを使うと超お手軽に改行されるようになります。
###表示イメージ
text_areaを使って入力した場合、改行も自由にいれられます。
ただ、これをそのまま表示しても改行されません。表示したいイメージは以下のような感じ。

[![Image from Gyazo](https://i.gyazo.com/6078e49cedc6f57e04183838a239a26a.png)](https://gyazo.com/6078e49cedc6f57e04183838a239a26a)
###コーディング例
コメント部分のみ抜粋したら、以下のような感じになります。

```sample.html.haml
<p>#{simple_format(come.text)}</p>
```

##② 任意の文字長で表示を切る
truncateと言うヘルパーを使うことで文章の一部のみを表示させることができます。
###表示イメージ
指定した文字長のところで切ってくれて、まだ続くよって言う...を表示してくれます。
[![Image from Gyazo](https://i.gyazo.com/e1b62a32557a225d7fd5dc13b9b731af.png)](https://gyazo.com/e1b62a32557a225d7fd5dc13b9b731af)
###コーディング例
切りたい長さを指定するだけで行けちゃいます。

```sampel.html.haml
 = truncate(product.name, length:14)
```

###-応用編-
どうせなら、続きを読むとかつけたいですよね。そう言う時はこんな感じで書くと行けそうです。

```sample.html.haml
        %p.content
          = truncate(post.content, length: 100)
          - if post.content.length >= 100
            = link_to '続きを読む', post_path(post.id), class:'content__continued', method: :get

```

こんな感じになります↓
[![Image from Gyazo](https://i.gyazo.com/469c1d5e687df6e7e9c3134104176845.png)](https://gyazo.com/469c1d5e687df6e7e9c3134104176845)


##③ 金額表示にカンマを埋め込む
カンマがない金額表示って読みにくいですよね。
そんな時は、これを使いましょう。

###表示イメージ
こんな感じで3桁ごとにカンマを入れて表示してくれます。
[![Image from Gyazo](https://i.gyazo.com/16441a56219daea4971a440d2e686fe7.png)](https://gyazo.com/16441a56219daea4971a440d2e686fe7)
###コーディング例
以下のように記述するだけでカンマ表示できちゃいます。

```sample.html.haml
%p  ¥ #{product.price.to_s(:delimited, delimiter: ',')} 
```

##④ 画像のパスを取得する(ActiveStorage限定？）
helperメソッドやjbuilderなどを経由してviewにイメージを表示する場合、イメージのパスを整形して利用する必要があります。そんな時に役に立つのがurl_forと言うヘルパー。

どう言うことか、少し試してみましょう。
json.jbuilderファイルにbinding.pryを仕込んでみました。
この状態のpry画面でイメージデータの中身を見た結果は以下のとおり。

```ターミナル.
[1] pry(#<#<Class:0x00007fd2710d9670>>)> notice.sender.avatar
=> #<ActiveStorage::Attached::One:0x00007fd26f185aa8
 @dependent=:purge_later,
 @name="avatar",
 @record=#<User id:・・・略・・・>>

```
これをjsonに代入しても結果はnilになります。
この状態でviewに表示させようとしたら・・・いつもの赤い画面にまっしぐらです笑

###コーディング例
下記のようにパスを取得したデータをurl_forで囲ってあげるだけでOK！

```sample.json.jbuilder
json.array! @todo_list do | todo |
#・・・略・・・#
  json.image      url_for(todo.trade.product.images.first)
end
```
ちなみにurl_forを使って取得できる値は以下の通り。

```ターミナル.
[２] pry(#<#<Class:0x00007fd2710d9670>>)> url_for(notice.sender.avatar)
=> "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bd6c268982a377d08f1671c441dcd4f3186894e3/66260666_159379478518546_5679362341520800957_n.jpg"
```
これならイメージタグで表示できそうですね！

##⑤ 日付や時間のフォーマットを整える
　データベースの値をそのまま出すと長ったらしくて読みづらいですよね。
　そんな時は、このフォーマットヘルパーを使えばいい感じに整形できます。

###表示イメージ
こんな感じでスッキリ表示。
[![Image from Gyazo](https://i.gyazo.com/a24514f0188c1e2ec67f3013914fd16b.png)](https://gyazo.com/a24514f0188c1e2ec67f3013914fd16b)

###コーディング例
そのほかにも%yをつければ年の表示も可能ですし、%Hや%Mの表記を消せば日付だけを表示させることができます。

```sample.html.haml
  = @trade.created_at.strftime("%m月%d日 %H:%M")
```

##⑥ 投稿日などを現在時刻からの相対時間で表現する
ツイッターなどでよく見かける相対時刻の表示も簡単にできてしまうことが分かりました。
結構感動ですね！笑

###表示イメージ
24時間をすぎると１日前、10日前など表示の仕方は自動で変わります。
[![Image from Gyazo](https://i.gyazo.com/2f9870fdd0cbb8f9cf782344a1a58859.png)](https://gyazo.com/2f9870fdd0cbb8f9cf782344a1a58859)

###コーディング例

```sample.html.haml
= time_ago_in_words(info.created_at) + '前'
```
###

#まとめ
フォーマットヘルパーは知っているか、いないかだけで全然見栄えが変わってくるので、どんどん取り入れて、活用していこうと思います。

#参考
Railsのフォーマットヘルパー抜粋：
https://qiita.com/metalels/items/e3b58e6a9482c6078a52