【Rails】Bootstrap4で.has-errorが廃止されたらしい
こんにちは、Mako（@makokamiya）です。
Rails チュートリアル第7章を元に「Ruby on Rails チュートリアル2周目を最新バージョンとPostgreSQLを使ってやってみた」にチャレンジしています。
今回は、Railsチュートリアルとbootstrapのバージョンが違うことが原因でレイアウトが崩れてしまう不具合が生じたので、解決するまで調べた事をまとめてみました。
バージョン
今回作成するwebアプリケーションはRuby,Gemをすべて最新バージョンで作成しています。（Rails6からgemでwebpackerが標準導入されているので、bootstrapはyarnでインストールしています。 ）
| Ruby | 2.7.0 |
| Rails | 6.0.2.1 |
| bootstrap | 4.4.1 |
不具合
今回不具合が出たのは、SCSSに下記のコードを追加した時でした。
Railsは、フォームで無効な内容を送信すると、.field_with_errorsを持ったdivタグでエラー箇所を自動的に囲んでくれるそうです。.form_controlは、フォームにスタイルを適用するためのBootstrapのクラスです。ここにスタイルを追加することで、無効な内容の箇所だけ色をつけたりすることができるというものです。
エラーが出た訳ではなく、これまで効いていていたbootstrapのレイアウトが崩れてしまったという不具合です。
解決までに調べたこと
Railsチュートリアルのbootstrapのバージョンを調べる
Railsチュートリアルでは、gemでBootstrapを導入しています。
gem bootstrap-sass 3.3.7を調べると、バージョンはbootstrap3でした。
.has-errorを調べる
今回はBootstrap4を使っているので、不具合の原因はBootstrapのバージョンが違うことだろうと推測しました。.has-errorを調べると、Bootstrap4移行ガイドにこんな表記を発見！
検証スタイルは、CSS
Bootstrap4移行ガイド:invalidと:validの疑似クラスを介したHTML5フォーム検証機能を使用したスタイルに変更され、.has-warning,.has-error,.has-success,.has-feedback,.form-control-feedbackはそれぞれ廃止。
やはり、bootstrap4では.has-errorが使えなくなったんですね。
:invalidを調べる
さらに:invalidを調べていくと、.is-invalidというクラスにスタイルが当てられていることがわかりました。
Bootstrap4から導入された.is-invalidを使う
.is-invalidのスタイルを＠extendすればいいだろうということで修正したコードがこちら
.field_with_errors {
.form-control {
@extend .is-invalid;
}
}
レイアウト崩れもなくなり、無効な内容を送信した箇所だけ、スタイルが適用されるようになりました！
まとめ
Railsチュートリアルの最終章にならい、最新のGemバージョンでアプリケーション開発を進めていますが、様々なエラーや不具合に遭遇します。
今回、RubyGemsやBootstrap4移行ガイドなどを一つ一つ調べていくことで、理解が深まった気がします。改めて、自分で調べて解決していく力って大切なんだなーと感じました。
エラー・不具合がでても諦めず、一緒にweb開発を楽しんでいきましょう＾＾