ビュー(erb,haml)でデバッグを行う

やること

今回の記事では、表題の通りビューファイルの中でデバッグを行います。
erbとhamlではhtmlの中にRubyを書き込むことが出来るため、実はbinding.pryをかけることが出来ちゃいます。
これにより、ビューで使用する変数にどのような値が格納されているか分かるわけです！
やることはすごく簡単なことですが、意外と盲点となっており初学者では知らない人も多いと思います。

早速やってみる

以下のようにerbで書かれたビューファイルがあったとします。
注目する点は２行目のbinding.pryです。
erbはビューファイル内にRubyのコードが書けるので、2行目で処理を止めることができます。

<% @posts.each do |post| %>
  <% binding.pry %>
  <div class="content">
    <div class="content__left">
      <div class="content__left--image"></div>
    </div>
    <div class="content__right">
      <div class="content__right__top">
        <%= post.title %>
      </div>
      <div class="content__right__bottom">
        <div class="content__right__bottom--date">
          <%= post.created_at %>
        </div>
      </div>
    </div>
  </div>
<% end %>

ターミナルで@postsの中身が確認できました！
こういった方法も用いてデバッグをやっていきましょう！

    1: <% @posts.each do |post| %>
 => 2:   <% binding.pry %>
    3:   <div class="content">
    4:     <div class="content__left">
    5:       <div class="content__left--image"></div>
    6:     </div>
    7:     <div class="content__right">

[1] pry(#<#<Class:0x00007ff22f887b50>>)> @posts
=> [#<Post:0x00007ff22f10a418 id: 1, title: "こんにちは", content: "ブログテスト", created_at: Sat, 10 Aug 2019 00:00:00 UTC +00:00, updated_at: Sat, 10 Aug 2019 00:00:00 UTC +00:00>,
 #<Post:0x00007ff231386a50 id: 2, title: "おはよう", content: "テスト2", created_at: Wed, 01 Jan 2020 00:00:00 UTC +00:00, updated_at: Wed, 01 Jan 2020 00:00:00 UTC +00:00>]

hamlでもデバッグしてみる

やることはほとんど同じなのですが、一応hamlでもbinding.pryをやってみましょう。
2行目にbinding.pryをかけています。

- @posts.each do |post|
  - binding.pry
  .content
    .content__left
      .content__left--image
    .content__right
      .content__right__top
        = post.title
      .content__right__bottom
        .content__right__bottom--date
          = post.created_at

erbでデバッグした時と同じように、@postsの中身を参照することができました！

    1: - @posts.each do |post|
 => 2:   - binding.pry
    3:   .content
    4:     .content__left
    5:       .content__left--image
    6:     .content__right
    7:       .content__right__top

[1] pry(#<#<Class:0x00007f8c628e2df8>>)> @posts
=> [#<Post:0x00007f8c6284f648 id: 1, title: "こんにちは", content: "ブログテスト", created_at: Sat, 10 Aug 2019 00:00:00 UTC +00:00, updated_at: Sat, 10 Aug 2019 00:00:00 UTC +00:00>,
 #<Post:0x00007f8c62847d08 id: 2, title: "おはよう", content: "テスト2", created_at: Wed, 01 Jan 2020 00:00:00 UTC +00:00, updated_at: Wed, 01 Jan 2020 00:00:00 UTC +00:00>]

今回の記事は以上です！