**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します。
gem 'semantic-ui-sass'
appication.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
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') // この1行を追記
最後に、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の部品を動かすためのコード（初期化コード）も書いておきます。たとえば、ドロップダウンを使用する場合は以下のようにします。
// Loads all Semantic javascripts
//= require semantic-ui
// ドロップダウンを使用するためのコード
$(function(){
$('.ui.dropdown').dropdown();
})
各部品の初期化コードは**SemanticUI公式サイトのUsage**に掲載されているので、そちらを参照してください。
このままではapp/assets/javascript/application.jsは読み込まれないので、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>
以上です。これでドロップダウン等が動作するようになっているかと思います。