Gemの注意事項

gemの注意事項

・Gemは、コメントなどで区切りのない段落では、gemの記載はアルファベット順にした方が良い。 ex)

gem 'bootstrap', '~> 4.4.1'
gem 'font-awesome-sass', '~> 5.12.0'
gem 'jquery-rails'

[font-awesome]Gemの使い方 rails5系とrails6系ではfontawesomeの導入の仕方が異なります。

[rails5系に導入する方法] Gemgileに下記のように追加する。

gem "font-awesome-sass"

↓ bundle install ↓ [app/assets/stylesheets/application.scss]に下記のように追加する。 ※[application.css]になっている場合は、[application.scss]に変換。

@import 'font-awesome-sprockets';
@import 'font-awesome';

※注意 下記のように順番を入れ替えて記述するとアイコンが表示されなくなる。

@import 'font-awesome';
@import 'font-awesome-sprockets';

上記の参考記事:

https://pikawaka.com/rails/font_awesome_sass

[bootstrap]Gemの使い方 Gemfileに以下のように追加する。

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

※BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する必要がある。 ↓ bundle install ※注意 sprockets-railsがv2.3.2.以上である必要がある。 sprockets-railsのバージョン確認は、以下で可能。

$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

↓ [app/assets/stylesheets/application.scss]に下記のように追加する。 ※[application.css]になっている場合は、[application.scss]に変換。

@import "bootstrap";

※注意 ・Sassファイルでは、= require、= require_treeを削除する(これらは、CSS記法での「ファイル取り込み」を行う処理を表しているので、bootstrapではCSS記法を使わないので、scss記法で処理を行う必要がある為。) ・Sassファイルで*= requireを利用すると他のスタイルシートでは、Bootstrapのmixinや変数が利用できない ↓ bootstrapとの依存関係を[application.js]に下記のように追加する。(Webアプリケーションではスタイル関連にJavaScriptが使われるのが一般的でありRailsやBootstrapも同様。そのため、JavaScript の設定についても、Rails標準の設定からBootstrap用に変更しなければいけない為。)

//= require jquery3
//= require popper
//= require bootstrap-sprockets

※注意 上記の追加するコードは、下記のように[//= require rails-ujs],[//= require turbolinks],[//= require_tree .]より上に追加しなければいけない。

//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require_tree .

上記の参考記事:

https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf

https://web-camp.io/magazine/archives/16848

公式のGemを検索するのに以下のrubygemsがおすすめ。 ドキュメントやソースコードなどにもすぐ飛べる。 rubygems:

https://rubygems.org