【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開発を楽しんでいきましょう^^