rails6でrails newした後に入れるgemとその導入方法まとめ

view系

slim

インストール

gem 'slim-rails'

htmlをslimに変換する

gem 'html2slim'

for i in app/views/**/*.erb; do erb2slim $i ${i%erb}slim && rm $i; done

参考

railsにslimを導入し、erbファイルをslimファイルに一括変更する方法 - Qiita

bootstrap

導入

yarn add bootstrap jquery popper.js

app/javascript/packs/application.jsに以下を追加。

require('jquery'); // jQueryを追加
require('bootstrap'); // Bootstrapを追加

app/assets/stylesheets/application.cssに以下を追加。

*= require bootstrap/dist/css/bootstrap.min.css

config/webpack/environment.jsに以下を追加。

const { environment } = require('@rails/webpacker');

// ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
// ここまで

module.exports = environment;

参考

Rails6にjQueryとBootstrapを導入する手順 :: knmts.com Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 後編（翻訳）｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社

デバッグ系

pry-rails

導入

gem 'pry-rails'

参考

デバックツール(pry-rails)について binding.pryの使い方 - Qiita

テスト系

rspec

導入

gemfileに以下を追加。

gem 'rspec-rails'

参考

RSpecのインストール - Qiita

文法系

rubocop

導入

gemfileに以下を追加。

group :development do
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
  gem 'rubocop-rspec'
end

参考

【Rails】RuboCop 導入編（2020年10月版） - Qiita