【オリジナルアプリ】HTML・CSSの土台作り

今まで、用意されていたHTMLやCSSを使っていたので一から作るのは初めて😳

Bootstrapという、Webサイト制作等におけるフロントエンドの実装をサポートするフレームワークがあるとのこと！
<注意点>
・便利ではあるものの、使いこなすまでの時間は必要なこと
・多少のCSSの調整は必要となること

※今回初めて使うものなので、使い方が間違っている場合があります😢

Bootstrapの導入

Gemfile


gem 'bootstrap', '~> 5.2.3'

ターミナル

% bundle install

Bootstrapの読み込み

最初に、ファイル名を変更します。以下のように、拡張子をcssからscssに変更します。
（変更前）
app/assets/stylesheets/application.css
（変更後）
app/assets/stylesheets/application.scss
元の記述を全て削除し、以下の内容に変更！

app/assets/stylesheets/application.scss


@import "bootstrap";

jQueryの導入

Gemfile


gem 'jquery-rails'

ターミナル

% bundle install

JavaScriptを動かす設定

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/lib/index.js"

下の二行を追加しました！

config/initializers/assets.rb

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = "1.0"

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)

下の一行を追加しました！

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

//= require jquery3
//= require popper
//= require bootstrap-sprockets
import "@hotwired/turbo-rails"
import "controllers"

下の二行を追加しました！

以上でBootstrapを使用するための設定は完了です🙌

次回は、実際にBootstrapを使ってトップページの作成をしてみます！