Rails導入編 | カート機能の実装 | 06 | Bootstrapの導入 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【05 | scaffoldの生成】 << 【ホーム】 >> 【07 | 商品の登録】

Bootstrapは、ウェブ開発者がウェブサイトやウェブアプリケーションを効果的かつ迅速に構築するためのオープンソースのフロントエンドフレームワークです。
Twitterによって開発され、2011年に最初にリリースされました。
BootstrapはHTML、CSS、およびJavaScriptを使用して、レスポンシブで美しく、使いやすいウェブサイトを構築するためのツールやコンポーネントを提供します。
基本的には、サイトからサンプルコードをコピーして、オリジナルに変更していくという流れをとります。
使い慣れてくると、サンプルコードなしでも書けるようになってきます。
divタグのclass属性にコンポーネントの内容やカラー、スペースなどを記述します。
動作する環境を整え、サンプルコードをコピーして表示を確認しているうちに覚えられると思います。

getbootstrap.jp

上記ページの「ドキュメント」をクリックすると、様々なコンポーネントを確認することができます。

Bootstrap5.3をRails7.1で利用する準備をします。

Bootstrap5.3を動かすために必要なパッケージをimportmap(インポートマップ)でインストールします。
importmapは、JavaScriptプロジェクトにおいてモジュールのインポートやエクスポートのためのマッピングを定義するための標準的な方法の一つです。
Webpackに代わり、Rails7から導入されました。
ターミナルで以下のコマンドを入力してください。

コマンド
bin/importmap pin bootstrap

これによりimportmapにbootstrapと@popperjs/coreが追加されます。

~/Desktop/Rails7_1/VacationRental7 $ bin/importmap pin bootstrap

Pinning "bootstrap" to https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js
Pinning "@popperjs/core" to https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js

「config/importmap.rb」ファイルを見ると、8行目と9行目に記述が追加されているのが分かります。

# Pin npm packages by running ./bin/importmap

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap" # @5.3.2
pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8

「app/javascript/application.js」ファイルに以下の記述を追加します。

import 'bootstrap';
import "popper";

記述追加　【app/javascript/application.js】4,5行目

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import 'bootstrap';
import "popper"

Bootstrap5.3を動かすために必要なgemを追加します。
Gemfileに以下の記述を追加します。

# bootstrap5
gem 'bootstrap', '~> 5.3', '>= 5.3.2'
gem 'sassc-rails', '~> 2.1', '>= 2.1.2'

記述追加　【SampleCart/Gemfile】71行目

source "https://rubygems.org"

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.1.2"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
gem "redis", ">= 4.0.1"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mswin mswin64 mingw x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mswin mswin64 mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"

  gem "error_highlight", ">= 0.4.0", platforms: [:ruby]
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

# bootstrap5
gem 'bootstrap', '~> 5.3', '>= 5.3.2'
gem 'sassc-rails', '~> 2.1', '>= 2.1.2'

追加したgemをバンドルインストールします。
コマンド
bundle

SCSS（Sassy CSS）は、CSS（Cascading Style Sheets）の拡張言語であり、より効率的でメンテナンスがしやすいスタイルシートを作成するために設計されています。
SCSSは、CSSの標準構文をベースにしており、同じ構文を使用してCSSとSCSSのどちらも書くことができます。

SCSSを利用するため、「app/assets/stylesheets」フォルダにある「application.css」ファイルを「application.scss」にリネームします。
拡張子をscssにしています。

リネームした「app/assets/stylesheets/application.scss」ファイルに以下の記述を追加します。

 @import "bootstrap";

記述追加　【app/assets/stylesheets/application.scss】17行目

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import "bootstrap";