Railsで架空のCafeのHPを作ってみよう!【13日目】『f.text_areaの値を改行、空白含めそのまま反映』編

#概要
基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

#設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

#13日目の作業内容
・ビューの作成(一覧ページ)

#13日目の気になった箇所
f.text_areaで入力された値をそのまま反映したいが
どのようにすれば良いだろうか。

#仮説
調べたらrailsのヘルパーメソッドである
simple_formatや
safe_joinなどを使うと
表示できるらしい。

testsテーブルのsampleというカラムに保存させて反映させていくとします。

tests/new.html.erb

<%= f.text_area :sample %>

まずは入力フォームを作成。

入力例)
sample
 sample

   sample

上記のように文字の前に空白や改行を適当に入力したとします。

tests_controller.erb

def show
  @test = Test.find(params[:id])
end

コントローラでインスタンス変数に格納し使えるようにします。

tests/show.html.erb

<%= @test.sample %>

これで反映はされれるが

sample sample sample

このように表示されてしまいうまく表示できない。

ではここにヘルパーメソッドを使い検証していきます。

tests/show.html.erb

<%= simple_fomat(@test.sample) %>

tests/show.html.erb

<%= safe_join(@test.sample) %>

どちらもエラーが出てしまいうまくいかなかった。

#結論
上記で検証したsimple_fomatやsafe_joinでも
うまく反映させることが可能だと思いますが
今回は私がうまくいった方法を紹介します。

上記と同じものを使うと仮定するので入力フォームなどは割愛させていただきます。

では、同じようにように表示させていきます。

tests/show.html.erb

<p><%= @test.sample %></p>

表示させたい値をpタグで囲っていきます。

今回はpタグで囲いましたがクラス名を付与でも可能です。↓

tests/show.html.erb

例)
<%= @test.sample, class:"text" %>

次にこのpタグ(もしくは付与したクラス名)に
CSSを当てていきたいと思います。

show.css

p {
  white-space: pre-wrap;
}

/* クラス名の場合 */

.text {
  white-space: pre-wrap;
}

たったこれだけで空白、改行全て反映してくれます！
このwhite_spaceというプロパティは要素内の空白をどのように
扱うかを指定するものです。
今回はpre-wrapを指定しましたが、他にも

要素を詰めて空白を作らない
改行はするが最初の空白は作らない　など

用途に合わせて使えると思いますので、気になったら調べてみてください！