【Rails】Bootstrap4で.has-errorが廃止されたらしい

【Rails】Bootstrap4で.has-errorが廃止されたらしい

こんにちは、Mako(@makokamiya)です。

Rails チュートリアル第7章を元に「Ruby on Rails チュートリアル2周目を最新バージョンとPostgreSQLを使ってやってみた」にチャレンジしています。

今回は、Railsチュートリアルとbootstrapのバージョンが違うことが原因でレイアウトが崩れてしまう不具合が生じたので、解決するまで調べた事をまとめてみました。

バージョン

今回作成するwebアプリケーションはRuby,Gemをすべて最新バージョンで作成しています。(Rails6からgemでwebpackerが標準導入されているので、bootstrapはyarnでインストールしています。 )

Ruby2.7.0
Rails6.0.2.1
bootstrap 4.4.1

不具合

今回不具合が出たのは、SCSSに下記のコードを追加した時でした。

レイアウトが崩れる不具合が出たコード

Railsは、フォームで無効な内容を送信すると、.field_with_errorsを持ったdivタグでエラー箇所を自動的に囲んでくれるそうです。.form_controlは、フォームにスタイルを適用するためのBootstrapのクラスです。ここにスタイルを追加することで、無効な内容の箇所だけ色をつけたりすることができるというものです。

エラーが出た訳ではなく、これまで効いていていたbootstrapのレイアウトが崩れてしまったという不具合です。

解決までに調べたこと

Railsチュートリアルのbootstrapのバージョンを調べる

Railsチュートリアルでは、gemでBootstrapを導入しています。

Railsチュートリアルで使用しているgem

gem bootstrap-sass 3.3.7を調べると、バージョンはbootstrap3でした。

bootstrap-sass 3.3.7を調べる

.has-errorを調べる

今回はBootstrap4を使っているので、不具合の原因はBootstrapのバージョンが違うことだろうと推測しました。.has-errorを調べると、Bootstrap4移行ガイドにこんな表記を発見!

検証スタイルは、CSS :invalid と :valid の疑似クラスを介したHTML5フォーム検証機能を使用したスタイルに変更され、.has-warning.has-error.has-success.has-feedback.form-control-feedback はそれぞれ廃止。

Bootstrap4移行ガイド

やはり、bootstrap4では.has-errorが使えなくなったんですね。

:invalidを調べる

さらに:invalidを調べていくと、.is-invalidというクラスにスタイルが当てられていることがわかりました。

.is-invalidのスタイルを適用した例

Bootstrap4から導入された.is-invalidを使う

.is-invalidのスタイルを@extendすればいいだろうということで修正したコードがこちら

.field_with_errors {
    .form-control {
        @extend .is-invalid;
    }
}

レイアウト崩れもなくなり、無効な内容を送信した箇所だけ、スタイルが適用されるようになりました!

まとめ

Railsチュートリアルの最終章にならい、最新のGemバージョンでアプリケーション開発を進めていますが、様々なエラーや不具合に遭遇します。

今回、RubyGemsBootstrap4移行ガイドなどを一つ一つ調べていくことで、理解が深まった気がします。改めて、自分で調べて解決していく力って大切なんだなーと感じました。

エラー・不具合がでても諦めず、一緒にweb開発を楽しんでいきましょう^^