はじめに

blumaを使う予定の人向けに作成します。
jsはサクッと作ったものなので、運用には向いてないかも

環境

ruby:3.0.0
rails:6.1.5
Webpacker : 5.4.3

手順

1. まずはインストール

yarnを使ってインストールします。

コマンド

yarn add bulma

2. CSSの読み込み

下記を追記します。
blumaのファイルの場所は違う可能性あるので、確認してください。

app/javascript/packs/application.js

import 'bulma/css/bulma.min'

3. 使ってみる

3-1 サンプル作成

サンプルでコントローラーとビュー作ります。

コマンド

rails g controller home index

3-2 blumaを使ってview作成

メッセージを表示させます。

app/views/home/index.html.erb

<div class="section" id="message-modal">
  <article class="message">
    <div class="message-header">
      <p>ようこそ</p>
      <button class="delete" aria-label="delete" id="close"></button>
    </div>
    <div class="message-body">
    ここにメッセージを書くよ〜！
    </div>
  </article>
</div>

3-3 起動確認

こんな感じで適用されていればOK！

4. javascriptを書いてみる

4-1 jsファイルの作成

app/javascript/javascripts/application.js

document.addEventListener('DOMContentLoaded', () => {

  // 閉じるボタンを取得します。
  const $close = document.getElementById('close');
  // ボタンのクリックイベントを追加します。
  $close.addEventListener('click', () => {
    // 閉じます。
    const $modal = document.getElementById('message-modal');
    $modal.classList.add('is-hidden');
  });
});

4-2 読み込み

javascriptをアプリ全体に反映させるために追記します。書いた後はwebpakkerを再起動してね

app/javascript/packs/application.js

import '../javascripts/application.js'

4-3 起動確認

やったね！