Rails6でSemantic UIを動かしたい
どうも、ずみーです。 前回の記事でRailsにSemantic UIを導入してみたものの、プルダウンリストみたいなニュッって動くやつが全然動きませんでした。よくよく調べて見たら、jQuery依存なのでjQueryを書かないとプルダウンは動かないらしいです。
インストール方法のおさらい
まずはSemantic UIのデザインだけ使えるようにします。
Gemfileに追記
gem 'semantic-ui-sass
インストール
bundle install
マニフェストファイル編集
app/assets/stylesheet/application.scss
@import "semantic-ui";
jQuery導入
次にjQueryを入れてプルダウンが動くように設定していきます。
yarn add jquery popper.js semantic-ui-sass
jQueryをapplication.jsに読み込みます。
Rails5とRails6ではパスが違います。
app/javascript/packs/application.js（Rails6の場合）
require('jquery')
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が使えるようになりました。 ちなみに、公式ドキュメントだと以下のようになっていますが、なぜか動かず...
environment.plugins.append(...)
appendをprependに変えてみたところ、うまくいくようになりました。パッケージを読み込む順番が重要なのか？？？再調査の必要がありますね。
プルダウンが動くように設定
Rails6ではapp/assets/javascript/application.jsを自動作成し、以下を追記
// Loads all Semantic javascripts
//= require semantic-ui
// ドロップダウンを使用するためのコード
$(function(){
$('.ui.dropdown').dropdown();
})
最後に、テンプレートにapp/assets/javascript/application.jsをインクルード
<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>
これで、プルダウンリストが動くようになりました。
