RailsにMaterial Design for Bootstrapを導入する

はじめに

• エンジニア転職用のRailsポートフォリオにMDBootstrapを導入した際の手順の記録です。
• MDBootstrapがどういうものかについてはこちらやこちら、公式などが参考になります。マテリアルデザインをBootstrapと変わらない使用感で導入できます。

導入手順の参考

• 公式（https://mdbootstrap.com/docs/standard/getting-started/installation/）
• https://zenn.dev/ryouzi/articles/2aa98e32f4ece6
• https://qiita.com/kcsan/items/5bcd1f62b37861d97d15

環境

• Ruby 3.1.2
• Rails 6.1.7.3
• AWS Cloud9で開発

手順

※rails newでアプリケーションを作成した後を想定しています。

1. Bootstrapの導入
MDBootstrapを使用するにあたり、まずはBootstrap本体やjQuery等、通常のBootstrapの動作に必要な準備を整える必要があります。

まずはyarnで以下の通りインストール。

$ yarn add jquery bootstrap@4.6.2 popper.js

次にconfig/webpack/environment.jsを追記。

environment.js

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

次にapp/javascript/packs/application.jsに以下を追記。

application.js

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"; 

次にapp/views/layouts/application.html.erbの中を以下のように変更します。

application.html.erb

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

2. MDBootstrapの導入
yarnでMDBootstrapをインストール。
bootstrap-material-designパッケージではなくmdb-ui-kitをインストールしないとなぜか動作しませんでした。

$ yarn add mdb-ui-kit

次にapp/javascript/stylesheets/application.scssに以下を追記。
※ない場合は作成

application.scss

@use "~mdb-ui-kit/src/scss/mdb.free";

次にapp/javascript/packs/application.jsに以下を追記。
※mdb.jsファイルはこの後作ります。

application.js

import * as mdb from 'mdb-ui-kit'; 
import './mdb';

最後にapp/javascript/packs/mdb.jsを作成し、以下の内容を記述。

mdb.js

import * as mdb from "mdb-ui-kit/js/mdb.min.js"

// Function to refresh input element style when necessary
var mdbInputUpdate = function () {
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
  });
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).update();
  });
}

document.addEventListener('turbolinks:load', () => {
  mdbInputUpdate();
});

document.addEventListener('turbolinks:render', () => {
  mdbInputUpdate();
});

以上で、Bootstrapにマテリアルデザインを取り入れられます。 各種パーツやコンポーネントは基本的に公式からコピー＆ペーストで使用できます（一部有料版の購入が必要なものも）。