はじめに
bootstrapの導入方法について２通りの導入方法を見つけたのでメリット、デメリットをまとめました。
webpackを使用した導入方法
メリット:
統一性: Rails 6以降、WebpackerはデフォルトでJavaScriptを管理するために使われています。これにより、すべてのJavaScript関連のアセットが一箇所で管理されることになります。
最新のフロントエンドツールとの互換性: Webpackerを使用することで、最新のフロントエンドライブラリやフレームワークの導入が簡単になります。
デメリット:
複雑さ: 初めてWebpackerを使用する場合、設定やトラブルシューティングが複雑に感じることがあります。
Webpackerを使用して、jquery、bootstrap、およびpopper.jsを導入する手順
必要なパッケージのインストール
yarn add jquery bootstrap@4.6.2 popper.js
Webpackerの設定の変更
config/webpack/environment.js を編集して、以下の内容を追加します。
const webpack = require('webpack');
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
);
SCSSとJSの設定
app/javascript/stylesheets ディレクトリを作成します。
その中に application.scss ファイルを作成し、次の内容を追加します
@use '~bootstrap/scss/bootstrap';
app/javascript/packs/application.js を編集して、以下の内容を追加します
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application";
レイアウトの変更
app/views/layouts/application.html.erb を編集して、以下のように変更します。
<!-- 変更前 -->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- 変更後 -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
これで、Bootstrapとそれに関連するJavaScriptライブラリがWebpackerを通じてプロジェクトに導入されました。これでBootstrapのスタイルやJavaScriptの機能をRailsアプリケーションで使用できるようになります。
Asset Pipelineを使用した導入方法
メリット
シンプル: Rails 5までのデフォルトの方法で、Railsの長い歴史の中でよく知られています。簡単にセットアップでき、トラブルシューティングも簡単に行えます。
デメリット
古い: 新しいフロントエンドライブラリやツールの導入が難しくなる可能性があります。
非効率: モダンなJavaScriptのビルドツールや最適化の恩恵を受けるのが難しくなります。
Webpackerの設定の変更までは先ほどと同じです
JavaScriptからBootstrapを利用できるように、app/javascript/packs/application.js に以下を追加します
import 'bootstrap'
スタイルシートとしてBootstrapを利用するため、app/assets/stylesheets/application.css の名前を application.scss に変更し（もしまだ変更していなければ）、その中に以下を追加します。
@import "bootstrap/scss/bootstrap";
これで、BootstrapをRailsプロジェクトに導入し、JavaScriptとスタイルシートの両方で利用できるようになります。
結論
新しいRailsプロジェクトで、最新のフロントエンド技術を取り入れる予定の場合: Webpackerを使用する方法 (提供された手順) がよい。
シンプルなアプリケーションや、既存のアプリケーションでAsset Pipelineを使用している場合: Asset Pipelineを継続して使用することを考慮できます。
最終的には、プロジェクトの要件、既存のインフラストラクチャ、そして開発チームの経験や好みによって最適な選択が異なります。