🦓

Rails 6にBootstrapを入れる1/20

2023/06/14に公開

Bootstrap

Rails

tech

はじめに

Rails6からは、デフォルトのJavaScriptパッケージャーとしてWebpackerが導入されました。Webpackerを使用することで、JavaScriptファイルやその他のフロントエンドのアセットを管理することができます。
この記事では、gemよりWebpackerを使ってbootstrapを導入する方法を紹介します。
gemをインストールする場合はこちらのREADME.mdから参考して実装することができます。

環境

ruby: 3.0.0
rails: 6.1.7

流れ

1.　ジェネレーターをカスタマイズする
2.　gemをインストールする
3.　yarnを使ってBoostrapをインストールする
4.　Bootstrapを読み込む
5.　ヘッダー/フッターの共通化

ジェネレーターのファイル作成制限

rails gコマンドを使用する時に、デフォルトではassets, helper, testファイル, ルーティングを自動的に生成されます。
コマンドを使う際にassets, helper, testファイル, ルーティングが生成されないようにします。

bin/rails g controller About
Running via Spring preloader in process 27568
      create  app/controllers/about_controller.rb
      invoke  erb
      create    app/views/about
      invoke  test_unit
      create    test/controllers/about_controller_test.rb
      invoke  helper
      create    app/helpers/about_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/about.scss

`config/application.rb`を編集する

config/application.rb

config.generators do |g|
      g.helper          false
      g.test_framework  false
			# stylesheets, javascripts, images, etc.
      g.assets          false
			# not auto generate all the routes
      g.skip_routes     true
end

bootstrapとfont-awesomeを使えるようにする

font-awesomeをインストールする

Gemfile

gem 'font-awesome-sass', '~> 5.15'

bundle install

font-awesomeを読み込む

application.cssをapplication.scssにリネームします。

app/assets/stylesheets/application.css

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

<i class="fas fa-star"></i>を追加して⭐️アイコンが表示されることを確認します。
font-awesomeを使えるにようなりました。
font-awesomeの書き方は言語によって異なリます。
また、有料版と無料版がありますのでこれらも合わせて確認しましょう。

bootstrapをインストールする

yarn add bootstrap
yarn add @popperjs/core

package.jsonを確認します。

package.json

  "dependencies": {
  ...
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.0",
  },

bootstrapを読み込む

`app/javascript/stylesheets/application.scss`を作成する

app/javascript/stylesheets/application.scss

@import 'bootstrap/scss/bootstrap';

`app/javascript/packs/application.js`にjsとcssを読み込む

app/javascript/packs/application.js

import 'bootstrap'
import 'bootstrap/dist/js/bootstrap'
# 先に作成したapplication.scssも読み込む
import '../stylesheets/application';

ファイルの構造はこうなってます。

app
└── javascript
    ├── packs
    │   └── application.js
    └── stylesheets
        └── application.scss

レイアウトに`stylesheet_pack_tag`を追加する

app/views/layouts/application.html.erb

# この行があれば大丈夫、なければ追加する
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

railsサーバーを再起動してbootstrapを読み込まれていることを確認します。

全ページにヘッダー/フッターを共通化する

app/views/にsharedディレクトリを作成します。
sharedディレクトリ内に
_header.html.erbと_footer.html.erbを作成します。
bootstrapのサイトからヘッダーとフッターのコンポーネントをそれぞれのファイルにいれます。

`_header.html.erb`にロゴを入れてみる

ロゴをクリックするとトップページが表示されることを確認します。

app/views/shared/_header.html.erb

<%= link_to root_path, class: 'navbar-brand' do %>
  <%= image_tag 'logo.png' %>
<% end %>

レイアウトにテンプレートファイルを読み込む

全ページにヘッダー/フッターを表示されるようになります。

app/views/layouts/application.html.erb

<%= render "shared/header" %>
    <%= yield %>
<%= render "shared/footer" %>

無事にRails 6にBootstrapを入れました。

終わりに

参照するbootstrap文書のバージョンが、プロジェクトにインストールされているものと同じであることを確認しましょう。