Lesson#6 Railsのエラー解決法！

なぜ起こってるかわからないエラー…pryさんが解決するよ！！

どうも、はくたむです！
え？名前が変わってる？よく気づきましたね！
なんとなくひらがなの方がかわいくて親しみやすいかなって思って変えてみました。笑
ひとつ、よろしくお願いします。

さて、今回のメインはエラーの解決法を探る！でお送りしようと思います。
今回のお悩みはこちら！

なんかCSSが反映されていないーー！！原因がわからん…（；ω；）

カリキュラムを進めていく中で、どうしても原因のわからない現象が起きていました。
はくたむは先生に導かれながらどうやって解決したのか？！順を追って書いていきたいと思います。
どうぞ、お付き合いください。

何が起きたのか

flashで表示される文字が本来ならCSSが適用されるはずなのに適用されていない
※エラーは出ない

エラー表示（error）だけはCSSが適用されている…

原因を探る

CSSが適用されてないってことはやっぱりCSSが原因だよね？

まずCSSが適用されない原因を探りました。
flashを表示するための記述はViewファイルのapplication.html.erbにあります。
flashメッセージはBootstrapを適用してデザインされているので、class名にはBootstrapに対応したclass名が入ります。

<% flash.each do |key, value| %>
  <div class="alert <%= bootstrap_class_for(key) %>"><%= value %></div>
<% end %>

Bootstrapに対応したclass名のところにはbootstrap_class_for(key)というメソッドが入っており、application_helper.rbに定義されています。

def bootstrap_class_for(flash_type)
    case flash_type
      when :success
        "alert-success"
      when :error
        "alert-danger"
      when :alert
        "alert-warning"
      when :notice
        "alert-info"
      else
        flash_type.to_s
    end
end

このメソッドは、flash[:success]、flash[:error]、flash[:alert]、flash[:notice]、のkey部分をBootstrapのクラス名に置き換えているんです。
サクセスメッセージの時はalert-successという文字列に置き換え、クラス名としてHTMLに出力している。

ここまでは把握しました。

じゃあ、実際に吐き出されたHTMLはどうなっている？

GoogleChromeを使って表示されているHTMLの検証を行ってみると、Bootstrapに対応したclass名がきちんと吐き出されていませんでした！

つまりメソッドがうまく機能していなかったということ？？
でもメソッド自体でエラーが出たたらエラー画面が出る気もするし、まだ原因はわかりません…。

引数の中身は何だ？

さてここまでで、どうやらclass名がきちんと変換できていなかったことがわかりました。
処理の流れとして、bootstrap_class_for(key)のkeyがbootstrap_class_for(flash_type)に渡って、メソッド内でどのflashか判断→class名を返すということなので

じゃあそもそもkeyの中身って何なんだ？

というところを確かめていけばいいのかな、と思いました。

ここで出てくるのがお待ちかね今日ンメインゲストpryさんです！！

pryさん、簡単に言えば

Pryはirbの代替となるパワフルな対話ツールです

とのこと。
以前こちらの記事Lesson#4 RailsのMVCとルーティング - アラサーOLだっしゅつけいかくでも紹介してましたが、詳しくは下記URLなど参照ください。

ruby-rails.hatenadiary.com

このpryさんで処理を止めてkeyの中身を見てやろう！ってそんな話です。

binding.pryを使って確かめる

keyの中身を確かめるためにapplication.html.erbに<% binding.pry %>を記述します。

<% flash.each do |key, value| %>
  <div class="alert <%= bootstrap_class_for(key) %>"><%= value %></div>
  <% binding.pry %>
<% end %>

その上でブラウザでflashが表示されるような操作をしてみるんですね。
するとWEBページが途中で止まって、ターミナルがrails cの状態になります。
ここで、keyと打ってkeyの中身を見てみると…

=> "notice"

noticeが返ってきました！
どうやらこれがそのままclass名として吐き出されているんでしょうか。

def bootstrap_class_for(flash_type)
    case flash_type
      when :success
        "alert-success"
      when :error
        "alert-danger"
      when :alert
        "alert-warning"
      when :notice
        "alert-info"
      else
        flash_type.to_s
    end
end

これの最後の部分、flash_type.to_sでどれにも当てはまらない、ということで処理されているみたいです。 つまりシンボルとして渡っていない…？？

def bootstrap_class_for(flash_type)
    case flash_type
      when "success"
        "alert-success"
      when "error"
        "alert-danger"
      when "alert"
        "alert-warning"
      when "notice"
        "alert-info"
      else
        flash_type.to_s
    end
end

こんな感じでシンボル部分を文字列として書き換えてみました。

ちゃんとCSSが適用されて表示されました！！！やったー°˖✧◝(⁰▿⁰)◜✧˖°

じゃあ結局error部分は何だったのか

error部分はちゃんとCSSが適用されてましたよね。
何だったのかって、調べてみたらエラー表示としてパーシャルで切り出していた_error_messages.html.erbファイルの記述で

<div class="alert alert-danger">
  The form contains <%= pluralize(object.errors.count, "error") %>.
</div>

class名がきちんと記述されていたからでした。

まとめ

こんな感じで考えられる原因を1つずつ確かめていって、検証していく。
binding.pryを使って処理を止めて変数の中身を確認する。

エラーの原因特定はやはり地道な作業ですね…。

いつもはRailsの赤いエラーが面とにらめっこしながらの解決だったのですが、今回はそれが出ない中でどうやって解決したのかをまとめてみました。

先生がいなかったらもっと時間が掛かっていたかもしれません。
内容が難しくなってくるにつれ、マンツーマンレッスンの良さがじわじわ染みてくる感じがしますね！

課題のフィードバック

Railsのアソシエーションについて調べたことをまとめてQiitaに投稿する

https://qiita.com/hak_chami/items/336a366ce0071e2f92f9qiita.com

今回は時間をとってフィードバックしてもらいませんでしたが、提出後一度足りない部分を指摘頂いて修正しています。
調べてもあまり良くわからなかったし結構大変でした…(´；ω；｀)
でも大事なところなので今後、実際触りながら理解を深めておきたいです！

次回の課題

”bundle exec”について調べておく。
（Qiitaへの投稿はしなくてOK）

これはレッスン中に私がした素朴な疑問だったのですが、調べて理解しておくのが次回の課題となりました。
とにかく早くカリキュラムを終わらせて自作アプリに入りましょう！ってことでしたので。

いよいよ基礎部分も終了ですね。
個人的な感想としては基礎部分はもっと早く自習しておけばよかったなぁと感じてます。
レッスンの時間をここで使うのはもったいない感じ。

1ヵ月後のまとめができたらその辺も書きたいんですが、まだちょっと勉強を優先する感じになりそうです。

ではまた来週～！