【rails6 + webpaker】yarnでblumaを入れて使ってみる

5853 ワード
Rails6 Bulma webpack webpack テキストリンク

はじめに

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 起動確認

やったね！