学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 61 | Bootstrap |導入編

「05 | ナビゲーションバー(Bulma)」で導入した「Bulma」の代わりに「Bootstrap」を導入します。


getbootstrap.jp


Yarnで必要なパッケージ「Bootstrap」「jquery」「popper.js」をインストールします。


コマンド
yarn add jquery@3.6.0 bootstrap@4.5.2 popper.js@1.16.1


記述追加 app/javascript/packs/application.js(11行目)

require("jquery")

import 'bootstrap';
import '../stylesheets/application';



app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")

import 'bootstrap';
import '../stylesheets/application';


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)



「app/javascript」フォルダに「stylesheets」フォルダを新規作成します。
作成した「stylesheets」フォルダに「application.scss」ファイルを新規作成します。



作成した「application.scss」ファイルに以下の記述を追加します。


app/javascript/stylesheets/application.scss(新規作成したファイル)

@import '~bootstrap/scss/bootstrap';



Webpackの設定をします。
「config\webpack\environment.js」ファイルに以下の記述を追加します。


記述追加 config\webpack\environment.js(5行目)

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)



config\webpack\environment.js

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

module.exports = environment

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)



app/views/layouts/application.erb.html の「stylesheet_link_tag」を「stylesheet_pack_tag」に変更します。


記述変更 app/views/layouts/application.erb.html(8行目)

    #削除<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>



app/views/layouts/application.erb.html

<!DOCTYPE html>
<html>
  <head>
    <title>MinpakuBs</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>



これでBootstrapを使用する準備が整いました。