Help us understand the problem. What is going on with this article?

Rails6でSemanticUIのJavaScriptを読み込む方法(ドロップダウン・アコーディオン等を使いたい!)

SemanticUIでドロップダウンやアコーディオン等の部品を使用するには、JQueryをインストールし、SemanticUIのJavaScriptを読み込む必要があります。

Rails6以前でSemanticUIを利用する方法についてはQiitaなど情報が充実しています。しかし、Rails6からJQueryのインストール方法やapplication.jsの読み込み方法が変更されたため、Rails6での設定には戸惑う方が少なくないかと思います。(僕がそうでした。)

ということでこの記事には、Rails6における、SemanticUIのインストールからJavaScriptを読み込む(ドロップダウン等の部品を動かす)方法を記載します。

確認環境は以下の通りです。

  • Rails 6.0.0
  • JQuery 3.4.1
  • semantic-ui-scss 2.4.2.0

SemanticUIのインストール

まずはSemanticUIをインストールする方法から。Railsでは、semantic-ui-scssというgemを使ってSemanticUIをインストールできます。

Gemfileに以下を追記後、bundle installします。

Gemfile
gem 'semantic-ui-sass'

appication.scssに以下を追記します。

app/assets/stylesheet/application.scss
@import "semantic-ui";

これでSemanticUIのインストールは完了です。単純なButtonなど、JavaScriptを利用しない部品は利用できるようになっているはずです。

JQueryのインストール

SemanticUIのドロップダウン等の部品を使うには、JQueryをインストールする必要があります。

Rails6以前はjquery-railsというgemを利用するのが一般的でしたが、Rails6ではgemを使わずにインストールすることができるようになっています。

以下のコマンドを実行し、yarnでJQueryを取得します。

$ yarn add jquery

次に、application.jsに以下を追記します。

※ Rails6以前とRails6ではapplication.jsのパスが変わっています。

  • Rails6以前:app/assets/javascript/application.js
  • Rails6:app/javascript/packs/application.js
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') // この1行を追記

最後に、environment.jsに以下を追記します。

config/webpack/environment.js
const { environment } = require('@rails/webpacker')

// 追記:ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
// 追記:ここまで

module.exports = environment

これでJQueryが利用できる状態になりました。

JavaScriptの読み込み

SemanticUIのJavaScriptを読み込むには、app/assets/javascript/application.jsに設定を書き込みます。このファイルはRails6では存在しないため、手動で作成する必要があります。(Rails6以前では自動で作成されます)

また、使用したいSemanticUIの部品を動かすためのコード(初期化コード)も書いておきます。たとえば、ドロップダウンを使用する場合は以下のようにします。

app/assets/javascript/application.js
// Loads all Semantic javascripts
//= require semantic-ui

// ドロップダウンを使用するためのコード
$(function(){
  $('.ui.dropdown').dropdown();
})

各部品の初期化コードはSemanticUI公式サイトのUsageに掲載されているので、そちらを参照してください。

このままではapp/assets/javascript/application.jsは読み込まれないので、application.html.erbに以下を追記します。

app/view/layouts/application.html.erb
<head>
    (略)
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- ↓この1行を追記 -->
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

以上です。これでドロップダウン等が動作するようになっているかと思います。

参考

tatehito
都内で働くプログラマ。Java・Rubyなど。
https://blog.tatehitolog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした